About Projects Social Training Resources

4. Processing.js Animation

4.0 Introduction

We don't believe in reinventing the wheel here at Coders for Liberty. We believe in learning from everyone and everywhere. When we find an excellent coding resource, we will share that with you. Khan Academy is an excellent tool for learning mathematics, science, the humanities, and computer science. JavaScript is an important language to know for developing web apps. The main reason we include Khan Academy in our training is to introduce you to the collaboration opportunities offered on Khan Academy.  Like Scratch, you can share and remix projects on Khan Academy. You can also help other Khan Academy students by evaluating their projects. You may also want to try Khan Academy's SQL training.
4.0.1 Processing.js
At Khan Academy, you're actually learning two languages, JavaScript and Processing.js. As you will find out later, you will need to alter you Khan Academy project code if you want to use it in a website. This will be covered in section 4.3.2. You will need to be able to do this to take part of our animated meme project in section 4.4. Processing.js uses the canvas, which is an important feature of HTML5 and makes Adobe Flash virtually obsolete. The deprecation of Flash demonstrates the importance of open source software and the limitations of proprietary software. Since Flash is proprietary, updates depend on Adobe's willingness to continue to update it. Adobe has decided that it will no longer support Android and does not provide support for certain platforms like Raspberry Pi, which has made it difficult for people to make use of Scratch 2.0 in the past. While people have found work-around to use Flash on those platforms and Flash has been bundled with Raspbian OS to allow people to use Scratch 2.0 on the Raspberry Pi, it would be in your best interest as a coder to learn to use open source development tools to ensure that you can always make use of the tools without being at the mercy of corporate overlords.

4.1 Getting Started on Khan Academy

  1. Visit khanacademy.org
  2. Click "Start learning now"
  3. Either click "sign in with Facebook," "sign in with Google," or "Sign up with email"
  4. Enter your information and click "Sign up"
  5. Open your email and click "Finish signing up"
  6. Finish signing up.
  7. Go to khanacademy.org/coaches
  8. In the "Add a coach" field, enter the class code FGB2JA or the code provided by your Code for Liberty mentor. This enables us to see your progress and help you along the way.
  9. Go to khanacademy.org/computing/computer-programming/programming and start learning.

4.2 Intro to JS: Drawing & Animation

khanacademy.org/computing/computer-programming/programming This really is a fun way to learn JavaScript. It is all about graphics and animation. You can follow along and watch the teacher code. You can also pause the tutorial and mess with the code yourself. However, the best part is creating projects at the end of each section yourself. The training is also available on YouTube as videos. However,we  recommend that you do the training on Khan Academy's site.
4.3.2 Running Your Khan Academy Programs on a Website
www.petercollingridge.co.uk/blog/running-khan-academy-programs-your-computer Follow the directions provided by Peter's website . However, there are some slight modifications I would make based on what I learned from the Mozilla Web Development course. However, these are really just web design preferences. You can just ignore my design tips and just do it Peter's way.
  • Save the processing.js file to your scripts folder for your website.
  • Create a file called code.js in your scripts folders
  • Open the code.js in a text editor and copy  your Khan Academy code and save it.
  • When you are working on the index.html file, you will need to add "scripts/" to your HTML code:

 <script src="scripts/processing.js"></script>
 <canvas width="400" height="400" data-processing-sources="scripts/code.js"></canvas>
Note: This may not work well with some Khan Academy projects. You may need to tweak your project a little. While I did have a bit of trouble porting some Khan Academy projects over, I was able to write a new program using this method and the Processing.js reference page. You should be able to do the 4.4 project using this method. You can refer to the Processing.js reference page if you get stuck.

4.4 Make an Animated Meme

Making a meme should be part of any training program. Use shapes you create using JavaScript code to draw the meme and animate it.
4.4.1 Add Your Meme to Our Github Project Site
  1. Go to https://github.com/coders4liberty/js-memes
  2. Click "Fork" in the upper right hand corner.
  3. Name your js script file something unique and upload it.
  4. Make a html file that uses the Processing.js file and your js file to play the animated meme. Name it something unique. You can use the ssdp.html file as a reference.
  5. Make a link to your file in the index.html file. You don't have to make a javascript script that makes it randomly change the title of your animation, but you can if you want.
  6. Issue a Pull Request
Congratulations, you have finished the level four training!

4.5 Help Others Learn

Evaluate projects on Khan Academy to help others and brush up on your coding skills. Include suggestions for improvement and words of encouragement.

Onward to the level 5 training!