Introduction

I've noticed a lot of people asking how they can run the programs they've seen or created on Khan Academy's computer science area, so I've written this post to explain how to (sort of) achieve it. Note that not all Khan Academy programs will run on your computer.

What you need

To run a KA program you need a few things, all of which are easy to get. You can download the files you need here. You will want to create a folder somewhere on your computer to keep all the files of this project in. One thing you don't need to download is Javascript. Your program is written in Javascript and it is interpreted by your browser. Which brings us to...

1. A browser

This program is a program that opens web pages like the one you now to view this page. For security reasons, Chrome doesn't work when opening trying to run this type of file on your computer (unless you set up a simple server) so for this I recommend using Firefox.

2. An HTML document

You need to display your program somewhere and that somewhere is a web page. Webpages are written in a language called Hyper Text Markup Language (HTML) which tells your browser what to display. You can open HTML files with your browser even if they are on your computer and not on the internet. I've written a very basic HTML file (called main.txt) which you can download at the bottom of this page (change the filename to main.html).

If you open the file with Notepad (don't use Word) you should see the line:

<script src="https://cdn.rawgit.com/processing-js/processing-js/v1.4.8/processing.js"></script>

This tells the browser to get the processing.js file. If you want you can download the file here and use a local version.

<canvas width="400" height="400" data-processing-sources="code.js"></canvas>

This line tells your browser to create a 400 x 400 pixel area to display the code which is in a file called code.pde. You can change these values if you want a bigger space or use a different filename for the code.

3. Your code

Finally you need your code. I've included an example as code.js here but you can copy your own code into that file. When using your own code, you will need to make a few changes. You won't be able to use any images as these are stored on the Khan Academy site.

To the top of your code add:

void setup() {
  size(400, 400);
}

Move any part of your code that draws something (e.g. line(x1, y1, x2, y2)) into the draw() function.

Change how you define you draw() function from:

var draw = function() {

To:

void draw() {

If you are dealing with mouse events then change mouseIsPressed to mousePressed. Other variables may be changed - I've not checked everything.

Viewing the program

Finally open main.html with Firefox (right click on the file and choose Open With or open Firefox and drag the file into the Firefox window), and you should see the code running. If you not then you can try to debug the problem with Firebug or ask below.