Instructions for using Khan Academy's Processing.js on your own web site.
This part is optional. It only applies if you have created your own programs using JavaScript+Processing.js on Khan Academy and want to embed them in your site's pages.
You can use your programs from Khan Academy on your own web site, but you will need to add a little extra code to them to make them work. The main thing you need is the Processing.js Template from the Khan Academy web site. Here is a stripped-down version of it with the important parts:
<body>
<!--Place the canvas element where you want the canvas to appear -->
<canvas id="mycanvas"></canvas>
<!-- This causes the browser to load the Processing.js library -->
<script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script>
<script>
var sketchProc = function(processingInstance) {
with (processingInstance) {
size(400, 400);
frameRate(30);
// YOUR CODE STARTS HERE
/***** Replace this line with your code from KA. *****/
// YOUR CODE ENDS HERE
}};
var canvas = document.getElementById("mycanvas");
var processingInstance = new Processing(canvas, sketchProc);
</script>
</body>
Just copy the needed parts of this snippet to your HTML file and replace the indicated comment line with your code.
Put the <canvas> tag wherever you want the program's canvas to appear. There is an example program below so you can see what it will look like. If it helps any, you can also use the View Page Source function in your browser to view the HTML of this page to see how it is coded.
You can CSS style the <canvas> element to control things like the placement and margin of the canvas. If you want a different canvas size or frame rate, change the numbers in this part of the code:
...
with (processingInstance) {
size(400, 400);
frameRate(30);
...
There are some differences between the Processing.js library used by Khan Academy and the standard one that you will be using on your own web pages.
The good news: You can now use some Processing.js functions and JavaScript features that don't work on Khan Academy! See the following documentation for all the cool stuff you can do now:
The bad news: You might need to make some minor code changes to get your code working outside of KA. Fortunately, this usually only means adding a line or two of code. See here for some differences between KA and the standard Processing.js library.