Khan Academy – Computer Science Tutorials

The Khan Academy, an online tutorial website, has now added a very clever and user-friendly interface for learning graphics programming. (For some undocumented functions, go to my other page.)

The site is located in the sub-directory /cs and looks like this:

Students can watch a video explaining the code, pause the video and modify the code as it’s being typed. Whatever changes are made to the code show up instantly in the graphics panel.

The layout of the Khan Academy programming panel

  • More information about the setup can be found in John Resig’s blog
  • The website is based on a programming language called “Processing” from the website Processingjs.org
  • The Processing.js website has documentation of other functions which do not appear in the Khan Academy pages.
  • 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.

HTML CODE for webpage

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.

Step 2: transform the Khan Academy code to Processing JS code (see below).

Modifications:

  1. 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.
  2. 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!
  3. 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.
  4. KH functions look like: var draw = function() {
    PJ functions look like: void draw() {
    so remember convert your functions too.
  5. 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”)

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.

 updated December 2012