Script Web 2.0 Applications & Sites

Suggest a site

Processing.js

Processing visualization language to JavaScript

Processing.js - Processing visualization language to JavaScript

http://ejohn.org/blog/processingjs

Tagged with: script

Posted on 09 May 2008

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.

It works “fairly well” (in that it’s able to handle anything that the processing.org web site throws at it) but I’m sure its total scope is limited (until a proper parser is involved). I felt bad about tackling this using regular expressions until I found out that the original Processing code base did it in the same manner (they now use a real parser, naturally).

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.

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.

Be the first to write a comment for Processing.js:

Browse by month

Companies

About

  • About

Spread the word!

Extendi-anim-300x250