4. Processing.js Animation
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.
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
- Visit khanacademy.org
- Click "Start learning now"
- Either click "sign in with Facebook," "sign in with Google," or "Sign up with email"
- Enter your information and click "Sign up"
- Open your email and click "Finish signing up"
- Finish signing up.
- Go to khanacademy.org/coaches
- 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.
- Go to khanacademy.org/computing/computer-programming/programming and start learning.
4.2 Intro to JS: Drawing & Animation
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
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:
<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
4.4.1 Add Your Meme to Our Github Project Site
Congratulations, you have finished the level four training!
- Go to https://github.com/coders4liberty/js-memes
- Click "Fork" in the upper right hand corner.
- Name your js script file something unique and upload it.
- 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.
- Issue a Pull Request
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!