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?

  • primosaur tree style avatar for user Vader2003
    So..after looking at some of the examples, would I be correct to assume that var is replaced with float??

    I've done some(very little) Arduino Programming, and I know that it (which I think is a C++ related language) uses float

    What I'm confused about is the fact that, in Arduino at least, there are a ton of different values (int, float, etc) - Some had to be renamed if you had a bigger number, and I know that not all were compatible with all types of input (Booleans[Logic], Text, Numbers) - The KA ProcessingJS library is very easy to use in that respect.

    Any Ideas?
    (20 votes)
    Default Khan Academy avatar avatar for user
  • spunky sam blue style avatar for user 𝘉𝘭𝘶𝘦𝘣𝘪𝘳𝘥
    I've been a little confused about processing.js. All the examples i can find on other websites seem to indicate that in reality, you write code in "processing" with int, float, void, and such.
    Quoted from processingjs.org: "You write code using the Processing language, include it in your web page, and Processing.js does the rest."
    So, if i use Pjs, am i supposed to type in Processing?

    EDIT: Also, in the PJS and HTML example above, where it says:
    // ProgramCodeGoesHere
    Is that JS, or Processing?
    (13 votes)
    Default Khan Academy avatar avatar for user
    • hopper jumping style avatar for user pamela ❤
      The original Processing library was written for the Java language- that's why you often see Processing examples that use int/float/void, as that's how Java declares variable types. When they created ProcessingJS originally, they let you use Java syntax and converted it to JavaScript behind the scenes. Our version of ProcessingJS only supports JavaScript syntax.
      (27 votes)
  • piceratops sapling style avatar for user Ӿɛהּσהּ
    cool! =) but those html programs that can run prossesingJS never work for me, it's always just a blank canvas. is it just my browser or something?
    (11 votes)
    Default Khan Academy avatar avatar for user
    • hopper cool style avatar for user Jett Burns
      Check the browser console for any errors and try to correct them. If your program uses variables, functions, or other values only found on KA, you need to remove or replace those so the code works off of KA. Let me know how this works, I'd like to help get this working for you!
      (16 votes)
  • male robot donald style avatar for user TheLuckyRobot
    So, I've been looking for a way to use PJS in something like Node.js, but I've never found the library for that. Can anyone redirect me to it, if there is one?
    (9 votes)
    Default Khan Academy avatar avatar for user
  • aqualine tree style avatar for user Murali Chennapragada
    How do I create a HTML file
    (9 votes)
    Default Khan Academy avatar avatar for user
  • primosaur seed style avatar for user πceratops (Caleb Winston)
    I had always thought that using with() {} is generally discouraged.
    I know this is one case where you kind of have to use it if you want to accomplish the desired result.

    But is it still something that should be avoided? or has my understanding been wrong?
    (4 votes)
    Default Khan Academy avatar avatar for user
    • old spice man green style avatar for user Bob Lyon
      Yes, with is deprecated, but if you want the properties of an object to appear as if they are (global) variables, then with is the way it was accomplished.

      This example was written to answer the question "how can I get a Khan-Academy-like Processing.js environment on my local machine?" The answer merely reflects reality.
      (8 votes)
  • leaf blue style avatar for user xacer
    Is there a similar way to do this in a language like php?
    (Off topic)
    What if I wanted to use an SQL database with my webpage? How would I set up a system that could contact the database?
    (Also off-topic)
    Is there a way to run python scripts from webpages?
    (5 votes)
    Default Khan Academy avatar avatar for user
  • male robot donald style avatar for user TheLuckyRobot
    In the sketchProc function, the javascript keyword with is used. After doing some digging, I learned that with is deprecated. Is there an easy replacement for the keyword with?
    (4 votes)
    Default Khan Academy avatar avatar for user
    • hopper jumping style avatar for user Tyler Tian
      Not that I know of. If you've done some digging, I'm sure you now know that the reason with is deprecated is because of lexical scope:

      You cannot determine what an identifier refers to by looking at its syntactic surroundings (its lexical environment). According to Brendan Eich that was the actual reason why with was deprecated, not performance considerations. Quoting a tweet of his:

      with violates lexical scope, making program analysis (e.g. for security) hard to infeasible.
      (Taken from http://2ality.com/2011/06/with-statement.html)

      This means that the fundamental thing with does is not recommended, and thus any replacements that serve the same purpose will be deprecated also. Nonetheless, you can still reduce redundancy by using temporary variables as aliases, e.g.
      var pi = processingInstance;
      pi.size(400, 400);
      //...


      with is only used here to reduce redundancy, and more importantly, make the environment familiar (functions are the same as here on KA). If you're working on a large program, the best way to do things is to not use it, or as mentioned before, use temporary variables with short names.
      (4 votes)
  • piceratops ultimate style avatar for user ultrakanman
    How do you switch html versions? I want to learn to program in html4.
    EDIT: how do you do other versions?
    (2 votes)
    Default Khan Academy avatar avatar for user
  • blobby green style avatar for user Christian Thalmann
    This may be a very basic question, but I can't figure it out myself ...

    When using the html-template above in a desktop editor, to play around with some of the js-examples from KA , how can I modify the image-locations so that the browser finds them?

    For example

    image(getImage("creatures/Winston")...)

    works within Khan Academy, but the browser won't know where to look. Are there full URL's that can be used outside of KA if I want to use the same images?

    thanks!
    (2 votes)
    Default Khan Academy avatar avatar for user