Friday, May 9th, 2008
Processing.js: Port of the Processing language to JavaScript and Canvas
Category: JavaScript
, Canvas
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.
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.
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.
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.
whether or not you think it was worthwhile, you must respect his accomplishment. Go John!
You cannot use Processing as an applet in an Adobe AIR application, so this (canvas) is the only choice.
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!
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.
@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).
Why not make a JavaScript API? But still awesome.