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:
Copy this code to try it out.
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
. 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
Now that you've seen how to program in ProcessingJS in a webpage outside of Khan Academy, you're ready to experiment with more code editors -- only if you want to, of course.
In any editor that you use, make sure you save your main file with a filename that ends in ".html"— that's the file extension that is used for HTML pages to make sure that both editors and browsers know what they are. If you'd like to separate your JavaScript from your HTML, then you can save that with a ".js" extension, and reference it with a <script> tag.
Online editors
One option is to use an online editor, similar to ours but with additional features. You might want to use an online editor if you have a computer that doesn't let you download apps or you want to use the same editor across multiple computers. Popular online editors are JSBin, Glitch, and Replit. If you're on a ChromeBook, you can install a Chrome web app like Caret or Zed.
Here's a video of how to editing a webpage in Cloud9 (from our
Another option is to use a desktop editor. An app is downloaded to your computer and saves the files to your hard drive. There are lots of desktop editors for you to pick from, depending on what OS and price you're looking for. Some popular desktop editors are Visual Studio Code, Atom, Sublime Text, Adobe Brackets, and Notepad++ (for Windows).
Here's a video of how to editing a webpage in Sublime Text (from our
A third option is to use a command-line editor. If you're not already familiar with the command line, you probably don't want to go down this route since you'll also need to learn a lot about the command line first. On the other hand, if you love typing and navigating with your keyboard instead of your mouse, you might find you love command-line tools. Two popular command-line editors are Emacs and Vim, and they are often already installed on Unix-based systems like Macs and Linux.
Here's a video of how to editing a webpage in Vim (from our
Which one should you use? You're welcome to keep using the Khan Academy editors for now. Eventually though, you'll want to get comfortable with at least one other editor. As a programmer, it helps to know how to program in multiple editors, since you might need to use a different editor for a class in school or a job at a company.
You might want to try out a couple different free options and see which one you like the most. You can also ask around to see what friends and colleagues use. It's often helpful to use whichever tool is most popular with your peers because then you can ask them for help.
For example, here's a graph of what some Khan Academy colleagues use:
Last surveyed in June 2018, editor preferences are very subject to change.