Main content
Course: Computer programming - JavaScript and the web > Unit 4
Lesson 8: Advanced development toolsUsing 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
mouseIsPressedinstead ofmousePressedfor the global boolean. Similarly, KA useskeyIsPressedinstead ofkeyPressed. That means you need to changemouseIsPressedandkeyIsPressedwhen 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()andgetSound()for images and sounds, which don't exist in the official version. You can usePImagefor 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?
So..after looking at some of the examples, would I be correct to assume thatvaris replaced withfloat??
I've done some(very little) Arduino Programming, and I know that it (which I think is a C++ related language) usesfloat
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)
In real world JavaScript,varwould more likely be replaced withletorconst(see link below) according to new ECMAS standards; but certainly notfloat. I've seen thefloatkeyword used in many languages like Processing (Java based), C++, Arduino, etc. Generally,floatdesignates some kind of floating point number, and JavaScript has a lot of underlying functionality that handles all of this for you, so you don't have to use floats. Hope this helps!
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
- https://en.wikipedia.org/wiki/Floating-point_arithmetic(5 votes)
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)
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.(28 votes)
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)- 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)
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)
The beauty of Node.js is that it does not depend on any display or input devices/technology, so an attempt to meld Processing.js to Node.js is bound to disappoint.
Processing.js can be downloaded from here: http://processingjs.org/download/
and Node.js from here: https://nodejs.org/en/download/(17 votes)
How do I create a HTML file(9 votes)
Open a text editor, enter your HTML code, and save it as a.htmlfile.(12 votes)
- 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)- Yes,
withis deprecated, but if you want the properties of an object to appear as if they are (global) variables, thenwithis 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)
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)- In the
sketchProcfunction, the javascript keywordwithis used. After doing some digging, I learned thatwithis deprecated. Is there an easy replacement for the keywordwith?(4 votes)- Not that I know of. If you've done some digging, I'm sure you now know that the reason
withis 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 thingwithdoes 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);
//...withis 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)
How do you switch html versions? I want to learn to program in html4.
EDIT: how do you do other versions?(2 votes)- You can use anything in HTML4 by removing the Doctype tag.
This is not recommended, though, since HTML5 is the web standard as of now.(6 votes)
- Can anybody give me a link to the khan pjs library? I would simply like my games to run in a file instead of hopping onto khan academy every time.(4 votes)
