John Resig has completed 7 months of work to produce a port of Processing, the "programming language and integrated development environment (IDE) built for the electronic arts and visual design communities", which aims to teach the basics of computer programming in a visual context, and to serve as the foundation for electronic sketchbooks. One of the stated aims of Processing is to act as a tool to get non-programmers started with programming, through the instant gratification of visual feedback."

Processing.js uses Canvas and obviously JavaScript to get the job down in the browser.

John talks about the two pieces of the puzzle:

The Processing Language

The first portion of the project was writing a parser to dynamically convert code written in the Processing language, to JavaScript. This involves a lot of gnarly regular expressions chewing up the code, spitting it out in a format that the browser understands.

The language includes a number of interesting aspects, many of which are covered in the basic demos. Here's a brief selection of language features that are handled:

• Types and type casting - Type information is generally discarded, but becomes important in variable declaration and in casting (which is generally handled well).
• Classes - The full class system is supported (can be instantiated, etc. just fine).
• Method overloading and multiple constructors - Within classes you can have multiple method (or constructor) definitions - with the appropriate methods being called, based upon their signature length.
• Inheritance - Even classical-style inheritance is supported.

Note: There's one feature of Processing that's pretty much impossible to support: variable name overloading. In Processing you can have variables and functions that have the same name (e.g. float size = 0; float size(){}). In order to support this there would have to be considerable overhead - and it's generally not a good practice to begin with.

The Processing API

The second portion of the project is the full 2d Processing API. This includes all sorts of different methods:

• Shapes drawing
• Canvas manipulation
• Pixel utilities
• Image drawing
• Math functions
• Keyboard and mouse access
• Objects (point, arrays, random number generators)
• Color manipulation
• Font selection and text drawing
• Buffers

Congratulations to John, and I look forward to seeing some fantastic visualizations in the browser thanks to this work.