Friday, May 9th, 2008

Processing.js: Port of the Processing language to JavaScript and Canvas

Category: Canvas, JavaScript


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.

Posted by Dion Almaer at 12:54 am

4.5 rating from 44 votes


Comments feed TrackBack URI

Dion said: “I look forward to seeing some fantastic visualizations in the browser thanks to this work.”

Processing already existed in the browser. It’s called Processing… which is a Java applet… which runs in a browser…

Seems like some wasted work, really. A Processing file doing a lot of CPU-intensive stuff will run an order of magnitude faster in an applet.

Comment by naikrovek — May 9, 2008

You are missing the point. Canvas is ‘native’ to the browser and doesnt need to have a huge memory hogging java applet. This way the processing language is available to many more folks who may not have java installed, and folks who may have been turned off to processing because of the java requirement.

I could see other folks taking this and porting it to actionscript or silverlight as well… the more runtimes the better.

Comment by triptych — May 9, 2008

I don’t think it’s a waste of time cause using processing or the canvas are two different thinks. As the use of processing in the last years turn away from simple applets to application for vjing, installation, fabbing and so on. I don’t know about the performance of the canvas object but the js examples run smooth as the applets. Also you can easier communicate between html elements and the canvas.

Comment by eskimoblood — May 9, 2008

whether or not you think it was worthwhile, you must respect his accomplishment. Go John!

Comment by AaronHeckmann — May 9, 2008

You cannot use Processing as an applet in an Adobe AIR application, so this (canvas) is the only choice.

Comment by Laurian — May 9, 2008

Interesting. I only gave Processing a cursory glance because it was a Java-based framework (that required a cursed Java applet to run in browser). Now that it’s been ported to JS/Canvas, I’ll definitely take a deeper second look. Good work!

Comment by sciamop — May 9, 2008

The Canvas object is hardly widespread. It is widespread among web developers, but very few casual internet users I know have even heard of Mozilla/Firefox/Opera/Safari. They have lives to lead.

Processing somehow does applets correctly. My browser doesn’t even slow down when rendering them the first time after a reboot.

You can’t use the original Processing in an Adobe Air application for the same reason you can’t use a #2 pencil as an umbrella. (It wouldn’t make sense.) Besides, you wouldn’t want to – Flash can do everything Processing can do and more, and Flash *IS* virtually everywhere.

Comment by naikrovek — May 10, 2008

@naikrovek: with excanvas you can do some pretty nifty things using canvas, even on IE. For example, I used it for building an hourglass with animated grains of sand and dynamically rendered sand piles that looks identical across all browsers. Runs smooth as silk.

Although I do agree that flash is a much better fit for that stuff, because I’ve done things in flash that you can’t do in canvas (manage thousands of individual semi-transparent dynamically-rendered drawing objects for example).

Comment by Joeri — May 12, 2008

Why not make a JavaScript API? But still awesome.

Comment by JustinMeyer — May 14, 2008

I like he processing.js library very much. Not that powerfull as processing itself (3D, very fast, …). But ideal to get to know probably the best software fo digital artistic experiments.

Here is my first processing.js example:
rotating music artist circle or

Comment by camaris — May 22, 2008

I think Proceesing.js is a great idea. Personally I am not an applet or Flash fan as they are not transparent (metaphorically speaking). I have used the Canvas element on a freelance project for a large yachting company, so I can tell you that it is cross-browser. Processing.js is not completely cross-browser yet, but it is getting there because people enjoy using it.

I’ve been playing with it now for a couple of months and I’m getting some great results. If you’re interested in seeing what I have been doing with Processing.js, please come by and check out my experiments:

There is also a Processing.js Google Group which has some interesting topics.

Comment by F1LT3R — October 30, 2008

Leave a comment

You must be logged in to post a comment.