John Resig has ported the Processing visualization language to JavaScript, using the Canvas element called 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 as follow.

  • 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.

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

The full source code of The Processing Language is contained within a single file. It comes in at about 5000 lines, compresses down to less than 10kb. It is licensed under MIT license.

Requirements: -
Demo: http://dev.jquery.com/~john/processing.js/examples/basic/
License: MIT License