Browser info:Internet Explorer 8 will not show HTML5 (so this site won’t load properly)Chrome does not allow HTML5 (or Javascript?) pages to be run from a local hard drive, so you can’t test this on you own computer. Solutions to this are (i) start Chrome with the the option “–allow-file-access-from-files”, (ii) save the files to a computer which is running a webserver, and then access them via “http://localhost/…”

Strangely enough, Processing is designed to parse Java and display it in HTML5 pages, however, in KhanAcademy the user types in a simplified Javascript langauge which it then changes to Java and then feeds to the Processing language which then seems to change it back to Javascript in order for the content to be displayed in HTML5. See this post about mixing Javascript and Processing.

How to put Khan Academy programs into your webpage

Step 1: setup the HTML* you must download the processing-1.n.n.min.js file into your current directory and include it* the <canvas> tag has the link to the program which must be saved as a .pde file* you can also add styling to the canvas tag.

What this will do is (i) show “Please upgrade your browser…” for IE8 and other browsers which don’t support HTML5 (ie. the <canvas tag>. (ii) Show a tan coloured box if Javascript is disabled or if there is some problem in the .pde code. (iii) if everything works then it will show the running program.

Modifications:

Processing.js has two functions (or methods): setup() and draw(). The draw function is executed repeatedly (depending on the frame rate). Khan Academy gets rid of setup() so you have to add it in.

KH uses a fixed screen size of 400×400 pixels.
In PJ you need to put this into the setup function: size(400,400);
But … you can change the size! YAY!

KH defaults to a frameRate(30); KH also allows you to change the frame rate with e.g. frameRate(100); — just don’t put in draw().
You must add a frameRate() command to PJ if you’re trying to do animation.

Javascript and KH handle don’t require a void or any other return type declaration on functions. If your function has a return value, you may need to declare it like “function myFunction() {”
I haven’t tested this yet.

Khan Academy Code (KH)

Processing.js code (PJ) (saved as “hello-web.pde”)

1

2

3

4

5

6

7

8

9

stroke(255);

noFill();

vardraw=function(){

background(0);

for(vari=0;i&lt;200;i+=20){

bezier(mouseX-(i/2.0),40+i,410,20,440,

300,240-(i/16.0),300+(i/8.0));

}

};

1

2

3

4

5

6

7

8

9

10

11

12

voidsetup(){

size(640,360);

stroke(255);

noFill();

}

voiddraw(){

background(0);

for(inti=0;i&lt;200;i+=20){

bezier(mouseX-(i/2.0),40+i,410,20,440,

300,240-(i/16.0),300+(i/8.0));

}

}

Synopsis

I think that the KhanAcademy.org/cs pages are neat and a good way to get people interested in learning computer programming. However, after using them for a week or two, I am ready to switch. It is not enough of a programming language to be really useful. There are so many limitations on what you can do. The documentation is sketchy (how do you make a random number?). The editing screen is too small and all of their code is double spaced (which is insane).

So after using this for two weeks, I would probably switch over to pure processing.js and work with that or download VisualStudio Express and use that to program.