Demos below!
As a sort-of reverse birthday present I've decided to release one of my largest projects, in recent memory. This is the project that I've been alluding to for quite some time now:
I've ported the Processing visualization language to JavaScript, using the Canvas element.
I've been working on this project, off-and-on now, for the past 7 months - it's been a fun, and quite rewarding, challenge. The full scope of the project can be broken down into two portions:
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.
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.
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.
If you're curious as to what the language looks like, here's a basic example of inheritance:
float x, y, speed;
float angle = 0.0;
Spin(float xpos, float ypos, float s) {
x = xpos;
y = ypos;
speed = s;
}
void update() {
angle += speed;
}
}
class SpinArm extends Spin {
SpinArm(float x, float y, float s) {
super(x, y, s);
}
void display() {
strokeWeight(1);
stroke(0);
pushMatrix();
translate(x, y);
angle += speed;
rotate(angle);
line(0, 0, 66, 0);
popMatrix();
}
}
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
Most of these are demonstrated in the basic demos.
There's pretty-good coverage of the Processing API: there's sure to be many gaps, but most of what I can throw at it works.
Download
The full source code is contained within a single file. It comes in at about 5000 lines, compresses down to less than 10kb.
How to Use
The API is quite simple - there's a single method "Processing". If you wish to only use the Processing API (not the language) you can interact with it like so:
p.size(100, 100);
p.background(0);
p.fill(255);
p.ellipse(50, 50, 50, 50);
If you wish to have the full power of the language, as well, you would pass in your Processing code as the second argument.
"fill(255); ellipse(50, 50, 50, 50);");
That's really all there is to it. Information on the full Processing API can be found on the Processing.org web site.
Important: Browser Support
Before we get into the demos I want to outline what some of my goal was for this project. First, and foremost, I wanted to try and get the best Canvas-based demos out of a browser, as possible. This meant that I had to shoot directly for the latest, and greatest, browsers. I needed good Canvas API support and, importantly, I needed speed.
Because of this, for this first release, I've specifically targeted Firefox 3, the latest WebKit Nightly, and Opera 9.5. In other words: beta browsers.
A large part of the code base is sure to work in "older" browsers (Firefox 2, Safari 3, Opera 9, and IE with excanvas) - but that wasn't my target platform. I wanted something that would be capable of pushing the edge of what a browser is able to render - giving them something to strive for in their upcoming releases.
There were a couple of stumbling blocks that the above browsers hit:
- Image loading - Currently, only Firefox 3 and WebKit Nightly handle this reliably.
- Pixel processing - Loading pixel data from images, manipulating them, and putting them back on the canvas. Only Firefox 3 can handle this sufficiently.
- Font loading and text rendering - The specification for this is still in the works, currently only Firefox 3 has support for this.
Thus, anything outside of the above (images, pixel processing, and text) should work "ok" everywhere.
Demos
NOTE: I highly recommend that you use the latest Firefox 3 beta to view the demos. Most will work in the latest WebKit Nightly and a majority will work in Opera 9.5, but all will work in Firefox 3.
Note again: A lot of these demos will peg your CPU. As I mentioned above, I'm trying to squeeze the most out of the browser, as possible - be ready for it!
What would the release be without a ton of demos? In development I worked in a backwards manner. Instead of building the API up from the ground - I worked from the top, down, implementing enough of the API to get individual demos working. The result of this is two-fold: 1) It made for a very rewarding development process - and guaranteed working demos and 2) It means that there are still portions of the Processing API left unimplemented.
Regardless - enough of the API has been implemented to allow all of the demos, available on processing.org, to work as best as possible.
Here's the full break-down of demos that are available:
I've gone through and cherry-picked a bunch that I really liked - in case you're interested in seeing some really interesting ones. Wherever possible I specify what browsers the demos work in (if none is specified, then it should work in all).
Custom Built/"Found In the Wild" Demos
Artistic water-color style drawing. (Firefox, WebKit)
A snake that chases your mouse cursor. (Firefox, WebKit)
Basic Demos (91 Total)
Re-sampling the points of an image. (Firefox, WebKit)
Topical Demos (51 Total)
Dynamically pull colors from an image. (Firefox, WebKit)
Adjusting brightness on an image. (Firefox)
Scanning the pixels of an image. (Firefox)
Drag image portions using a scrollbar. (Firefox, WebKit)
Dynamic histogram drawn over an image. (Firefox, WebKit)
Mandelbrot Fractal (Firefox)
I'm quite curious to see what people construct with this new API. I think it holds a lot of potential and I'm excited to see what comes of it! Enjoy!
Remember: You should be using Firefox 3 or WebKit Nightly (Safari 3.1 is missing some features) - the above demos generally work best in those browsers.
Jeff Eaton (May 8, 2008 at 10:04 pm) · Edit
I'll just take a moment to go slack-jawed. Holy crap, man. That's awesome.
Aaron (May 8, 2008 at 10:10 pm) · Edit
?!!!?!?!?!?!! ?!! ... !!!
alex guzman (May 8, 2008 at 10:11 pm) · Edit
this is insane!
AndrewT (May 8, 2008 at 10:12 pm) · Edit
What Jeff said....
Jason Persampieri (May 8, 2008 at 10:15 pm) · Edit
Wow. Holy crap.
Rich Manalang (May 8, 2008 at 10:17 pm) · Edit
Unbelievable. Great work, dude. I can't wait to try this out.
PNuin (May 8, 2008 at 10:19 pm) · Edit
Looks really nice, will definitely try it. Cheers
Tom Dyer (May 8, 2008 at 10:20 pm) · Edit
Great, Processing without Java.
Eduardo Lundgren (May 8, 2008 at 10:21 pm) · Edit
It sounds good.
Congratulations for the initiative in building a parser for this powerful open source programming language.
What we have to do is help and cheer this amazing project to let the Processing.js support each more demos - and make it a strongly parser.
It will be very important for the future of images, animation, and interactions on a browser.
Abi (May 8, 2008 at 10:22 pm) · Edit
I just started trying out processing about a month ago. Now with javascript, its going to be totally awesome. Great work!
Blake (May 8, 2008 at 10:24 pm) · Edit
Man, this is some awesome work, can't wait to find an excuse to use it.
jessamyn (May 8, 2008 at 10:30 pm) · Edit
Happy Birthday indeed!
rektide (May 8, 2008 at 10:35 pm) · Edit
birthday #0
Scott Johnson (May 8, 2008 at 10:37 pm) · Edit
Wow, this is huge!
Rob L. (May 8, 2008 at 10:44 pm) · Edit
Yowza, this looks cool; can't wait to dig in. Happy birthday, John, and thanks.
Mauro (May 8, 2008 at 10:54 pm) · Edit
this is just freaking insane.
Coto (May 8, 2008 at 11:11 pm) · Edit
Fantástico John... Fantástico
Oliver (May 8, 2008 at 11:12 pm) · Edit
Very cool demo :D
It looks like a number of the tests are failing in webkit because they are relying on non-standard gecko-isms rather than webkit bugs. The biggest issue appears to be that a number of the tests use a generic object for ImageData rather than an actual ImageData object created with Canvas.createImageData. Using a generic object is not safe behaviour as it fails to account for the canvas being resolution independent -- another issue is that it means that future optimisations to the ImageData representation used by engines will not be made available to you :-(
A simple place where this occurs is in updatePixels for the mandelbrot demo, you use
var pixels = {};
var data = pixels.data = [];
pixels.width = p.width;
pixels.height = p.height;
Where the "correct" approach would be
var pixels = .createImageData(p.width, p.height);
This is still ignoring the problem that the number of CSS pixels you request may not necessarily match the number of physical pixels you get back, but should work in Opera and WebKit nightlies.
Einar Vollset (May 8, 2008 at 11:23 pm) · Edit
I'm speechless. Great work.
Iraê (May 8, 2008 at 11:25 pm) · Edit
Impressive! I can't even think for an apropriate way to complement you is this awesome great project!!!
Hope to see great stuff that came from that on the JSNinja book! =D
Avi Flax (May 8, 2008 at 11:28 pm) · Edit
Wow.
Lincoln (May 8, 2008 at 11:28 pm) · Edit
I nominate you for the position of God. Unbelievable.
manfre (May 8, 2008 at 11:38 pm) · Edit
Very nice. I wonder how long until some one creates a javascript game that is on par with flash.
Daniel Raffel (May 8, 2008 at 11:39 pm) · Edit
Holy cow, brilliant work John!
Scott Lawrence (May 8, 2008 at 11:39 pm) · Edit
Damn, man. That's really impressive. Nice job!
-s (fellow CSH'er)
P.J. Onori (May 8, 2008 at 11:45 pm) · Edit
I am simply blown away. This is amazing.
Kamran (May 8, 2008 at 11:54 pm) · Edit
Wow,this is incredible, really impressive work, changes the way I look at javascript.
david gurba (May 9, 2008 at 12:08 am) · Edit
Ragel parser builder :) ... just code a new Javascript backend :/ Then the Processing.org people and the Processing.js people could stay in sync.
Eric D (May 9, 2008 at 12:29 am) · Edit
Simply amazing, way to push the envelope. and 10k! Thank you, sir.
Ara Pehlivanian (May 9, 2008 at 12:31 am) · Edit
Extremely impressive dude... you totally rock. You _are_ fully human right? Man.
h3 (May 9, 2008 at 12:36 am) · Edit
Fortunately you're always there to impress us and pull back the limits of JavaScript :)
Thank you and kudos.
Andrew (May 9, 2008 at 12:41 am) · Edit
Animator is my favourite I think http://ejohn.org/apps/processing.js/examples/topics/animator.html
Kevin Weibell (May 9, 2008 at 12:58 am) · Edit
Wooohoooo, this is so awesome!! Well done, John!
Johann (May 9, 2008 at 1:09 am) · Edit
I'm speechless.
Sean (May 9, 2008 at 1:35 am) · Edit
Mind Blowing! Great Work
beppu (May 9, 2008 at 1:35 am) · Edit
You have outdone yourself.
daaku (May 9, 2008 at 1:36 am) · Edit
mind boggling!
gally (May 9, 2008 at 1:52 am) · Edit
WOW ! Congratulation, this is great.
niko (May 9, 2008 at 1:58 am) · Edit
erm… nothing to say that hasn't been said before… but… wow^10!
Mark (May 9, 2008 at 2:10 am) · Edit
Stunning.
Colin Ramsay (May 9, 2008 at 2:41 am) · Edit
Amazing work.
jive (May 9, 2008 at 2:50 am) · Edit
wow. so big and pretty! I am really impressed. I've never seen javascript animate so smoothly, as flash. This will really take off.
Ozh (May 9, 2008 at 2:55 am) · Edit
Holy cow.
(flash is dead?)
qq (May 9, 2008 at 2:57 am) · Edit
Finally, flash animation has real rival from ajax world . Great!
doom (May 9, 2008 at 3:02 am) · Edit
hey john .. that's cool ...
someday .. we going to have direct3D ajax so that we can make a 3D game :D
- JQuery direct3D / OpenGL Plugins ... :D
Sebastian Redl (May 9, 2008 at 3:10 am) · Edit
This is truly amazing. And I agree with Andrew, animator is fascinating. And addicting.
On a side note, all three links in your demo listing are broken. They all go to apps/processing/ instead of apps/processing.js/ and the third one ends in csutom or something like that instead of custom.
Luke (May 9, 2008 at 3:29 am) · Edit
Great work John - is this what you demoed at @media Ajax last year?
Happy birthday by the way!
Jauhari (May 9, 2008 at 3:31 am) · Edit
Just Perfect ;)
Adam (May 9, 2008 at 3:43 am) · Edit
Wa wa we wah, wow this is fantastic, amazing work.
J.W (May 9, 2008 at 3:44 am) · Edit
Happy birthday John! and congratulations! this is really great project
Olle Jonsson (May 9, 2008 at 3:53 am) · Edit
We. Are. In. Awe.
(Just began reading that Visualizing Data book, 2 days ago. How is your timing this great?)
Nilesh (May 9, 2008 at 4:05 am) · Edit
John - you're a robot from the future.
Absolutely amazing work.
Josue R. (May 9, 2008 at 4:08 am) · Edit
Happy Birthday. I wish my bdays could be this awesome too!
bonersawarded (May 9, 2008 at 4:12 am) · Edit
Maybe I'm missing the point here... but hasn't everything in these demos been possible in flash since pretty much the first version? and isn't flash scripting pretty much as terse and concise as the kooky drawing language that this library hacks into javascript? just a thought...
Charles Phillips (May 9, 2008 at 4:13 am) · Edit
Incredible, John. Are you a demoscene fan (see scene.org)? I noticed you call these all 'demos'... This reminds me of demo effects, but written in canvas. I've seen this in the browser with Flash and Java, but of course you had to bring it to JS. I'm sure by now you must be familiar with p01 (po1.org) ...
Always great to see languages pushed to the edge. This will be a long-lasting effect on JavaScript and vector graphics in the browser. Can't wait to see where it goes from here!
Patrick (May 9, 2008 at 4:22 am) · Edit
OMG
i never thought that such things could be done with JS!
czert (May 9, 2008 at 4:22 am) · Edit
Incredible work.
There really is something about the whole "large and pretty" thing .)
Kristof Neirynck (May 9, 2008 at 4:22 am) · Edit
Wonderful.
I wonder weather this could be ported to ActionScript 3.
Alistair (May 9, 2008 at 4:43 am) · Edit
If they ask why then they don't understand. Some things are just cool things to do. Kudos to you.
Vaska (May 9, 2008 at 4:46 am) · Edit
John must live in the future and be reporting back to us. Amazing!
Dan W (May 9, 2008 at 4:47 am) · Edit
Happy Birthday!
Jason (May 9, 2008 at 4:53 am) · Edit
Well done, congratulations John.
Just the other day when you posted about Processing I kinda tied the two together (sneak peak). Those who have asked if this is possible in Flash, well yes of course it is. However this is open, un-encapsulated and on the whole a far superior angle of attack.
I look forward to seeing you @media later this month
Happy birthday dude ;)
P.S. WOW!
lrbabe (May 9, 2008 at 4:58 am) · Edit
Happy birthday and congratulations, you are my hero.
Mauro De Giorgi (May 9, 2008 at 5:25 am) · Edit
OMG... this is incredible...
Sandro (May 9, 2008 at 5:30 am) · Edit
o_O O_O O_o
WOA !! That's amazing !
Thanks !
Sandro
Asbjørn Ulsberg (May 9, 2008 at 5:32 am) · Edit
Happy birthday and thank you so much for this amazing present to the web community! Phenomenal work, John! Truly incredible stuff. Looking forward to seeing better support and cross-browser compatibility for
<canvas />in the following months.The really big disappointment of course, is -- as always -- Internet Explorer. I wonder when that big heap of stinking, bloated and non-conformant piece of C++ code called a browser will start supporting anything but Microsoft's own proprietary crap, including the
canvaselement and SVG.Speaking of SVG, could that be an alternative renderer for
Processing?jmdesp (May 9, 2008 at 5:37 am) · Edit
Is it me or is the Animator exemple actually faster in the javascript version ?
Marc Diethelm (May 9, 2008 at 5:49 am) · Edit
Hi John, hope you had a nice birthday!
# 51 larger, topical, demos.
# 4 custom "in the wild" demos.
Those links result in a 404.
Nice work!
Roshan Bhattarai (May 9, 2008 at 6:10 am) · Edit
wow........thanks for this......
Dot. (May 9, 2008 at 6:10 am) · Edit
Happy birthday John!
Awesome work!
Though the links for
* 91 basic demos.
* 51 larger, topical, demos.
* 4 custom "in the wild" demos.
are wrong, the base url should be /apps/processing.js/examples/ instead of /apps/processing/examples/ and you misspelled "csutom".
Hadrien (May 9, 2008 at 6:39 am) · Edit
Happy birthday,
It just totally rocks !
John Griffiths (May 9, 2008 at 6:39 am) · Edit
excellent work, the glass door effect is really nice. can so see a use for the dynamic bar chart.
well done!
Daniel Shiffman (May 9, 2008 at 7:10 am) · Edit
Totally awesome
Hamish M (May 9, 2008 at 7:19 am) · Edit
Really amazing work, John. I never expected this.
Thanks for all your hard work, this couldn't have been easy!
David Goodwin (May 9, 2008 at 7:31 am) · Edit
Great demos - it looks very exciting .. now we'll just have to wait a year or two before we can deploy stuff based on it
p3 (May 9, 2008 at 7:32 am) · Edit
Very nice. I think using this with xul runner gives quite many interesting possibilities, now I only need some time to develop something.
By the way. Most of the demos worked pretty well in Firefox 2. I was expecting most of them to fail and only few to work, but instead it was the other way around.
Doc (May 9, 2008 at 7:47 am) · Edit
oh my - i have to go change i got so excited.
really really cool stuff.
dani (May 9, 2008 at 7:56 am) · Edit
incredible!!
dimitre (May 9, 2008 at 8:00 am) · Edit
JOHN this is fantastic! this will change some serious things out there
Zach Leatherman (May 9, 2008 at 8:15 am) · Edit
But... I thought the applet was making a comeback?
I guess not.
Lo J (May 9, 2008 at 8:22 am) · Edit
I LOVE YOU john, do you want to marry me ? your brain is so sexy.
mikx (May 9, 2008 at 8:31 am) · Edit
Amazing!
Laurian Gridinoc (May 9, 2008 at 8:34 am) · Edit
Bliss! I was switching to an Adobe AIR UI and crying after Processing, now I can do it with canvas in html in AIR.
Ivan (May 9, 2008 at 8:41 am) · Edit
Impressive. These are the fun projects you do in your spare time? I like to play around with JQuery menus plugins! hah.
It's sorta timely that I just finally bought visualizing data by Ben Fry literally a week ago.
Jeremy Zawodny (May 9, 2008 at 9:10 am) · Edit
Uhm... Kick Ass!
Theun de Bruijn (May 9, 2008 at 9:15 am) · Edit
Awesome.
Finally a way to bring Processing to the masses.
Big thumbs up and heaps of thanks ;)
Mason Wendell (May 9, 2008 at 9:16 am) · Edit
Wow, John. This is incredible. Can't wait to play with it. Happy Birthday.
_why (May 9, 2008 at 9:46 am) · Edit
Golly juggle hats! This is totally sensational work, kid. Normally, I would feel bad for Processing people (since this will clearly eclipse their whole distro) but you've done them a favor by circumventing the applet. So, everyone wins I guess.
James (May 9, 2008 at 9:54 am) · Edit
Hi John,
This is great stuff. Really cool.
I've messed about with Processing a few years ago, but performance always put me off - as you say, it pegs your CPU.
As I read your post, I was wondering if you going to do the translation from p5 to js in the browser or before hand - as you know p5 has an offline step which takes p5 source, translates it to Java source then compiles with jikes.
More recently, I've found GWT; which contains an optimizing compiler for Java source to js.
Unfortunately, your comment about p5's performance is the killer for p5, for me anyhow. For it to "break out" for wider usage - including this project - it needs to be sort the busy-waiting loop out. I know that it's optimized (or it seems to be) for FPS rather than being kind to the CPU, so it's not something that is easily fixed.
In which case, I'd be really interested to look at the canvas implementation of the API (not done that yet); perhaps it could be wrapped in to a GWT implementation, so it could be used from java!?
Thanks