If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

Using ProcessingJS outside Khan Academy

We have a pretty great editing environment here - it updates in realtime, and it gives you helpful errors, number scrubbers, and color pickers. Our environment here is designed with new programmers in mind -- we have thousands every day, and we want to make JavaScript easier for them to learn.
Once you become familiar with JavaScript and start developing longer and more complex programs, you might find yourself wanting different features in your coding environment. Perhaps you don't want realtime updates, or you want to put your code in multiple files, or you want to integrate with a version control system. Or maybe you just want to be able to integrate your ProcessingJS programs into your website.
In that case, you may want to start programming your ProcessingJS programs outside of Khan Academy. You can't just copy and paste your program code into a file in your desktop editor and see a working program. Why not?
ProcessingJS is a library built on top of web technologies. When you program with it on Khan Academy, we actually create a webpage (HTML file) behind the scenes, stick a <canvas> tag in it, load the ProcessingJS JavaScript library, and then run your program code.
That means that if you want to work on your program outside of Khan Academy, you need to create a HTML file that does what we do.
Here's an example that you can start from:
That example is built using our webpage environment. You can paste it into an HTML file in any other code editing environment however.
If you paste your program code into that template, you might find that everything works perfectly, and you can jump for joy! (Or hop for sticks, if you're a beaver).
If things aren't quite working right, that might be because the template is not using the exact same version of ProcessingJS that we use at Khan Academy. Our version is designed specifically to be used inside KA, so we recommend using the official ProcessingJS library when you're developing outside of KA.
There are a few notable differences between our ProcessingJS and the official one:
  • KA uses mouseIsPressed instead of mousePressed for the global boolean. Similarly, KA uses keyIsPressed instead of keyPressed. That means you need to change mouseIsPressed and keyIsPressed when pasting your code in the template.
  • KA uses degrees by default for all angle parameters, instead of radians. If you're using degrees for angles in your program, you can convert them using radians().
  • KA uses getImage() and getSound() for images and sounds, which don't exist in the official version. You can use PImage for images, and you'll need to create an <audio> tag to play sounds.
The official version also has a wider range of functionality, like image manipulation and more 3D capabilities. You can explore all that in their documentation.
Of course, we'd still love to see the programs that you create outside of Khan Academy, so I hope that you share them once you're done, either by converting them back to our ProcessingJS version or sharing them in our webpage environment.
Next up, I'll talk more about desktop editors and debugging tools.

Want to join the conversation?