I’ve been playing with Processing for a while now but I haven’t actually touched Processing.js until pretty recently. As a test, I added Processing.js to this site and have modified one of the examples to do some interesting masking on the header image of this site.

It’s slow. Or, at least, the bug in processing that doesn’t let you use the PGraphics object as a mask for PImage objects makes it so you have to write a slow workaround.

Plus, it’s cpu intensive because of the way it’s infinite draw loop assumes every loop should redraw EVERYTHING in the frame.

But, it’s easy to use and it’s cross platform. I’ve tried Raphael a few times in the past and I’ve been frustrated with the way it locks you into their object structures. CreateJS is good, but it didn’t work very well cross platform (iOS for example) even though. At least processing.js has a working image preloader…

I’ve done a little pure Javascript canvas manipulation (that’s what was up there before… I still haven’t removed the controls for it) and while it was nice to have that level of control, it doesn’t have some of the nicer things I want to play with… Like an image object that makes sense… or the ability to draw circles without having to roll my own.

The best thing about Processing.js is that you can interact with all of it’s objects through pure Javascript! I haven’t set this up yet because I have a few more things to do before I can go down that route (like clean up the SASS styles on this page a bit more and remember where the hell my pure Javascript game loop code got to) but I’m very interested in the possibilities such a combination will open up.

Specifically, because you can interact with Processing.js straight from Javascript, it’s relatively easy to pull data from a server over AJAX and just plop the information into a Processing.js UI. Very cool!

I’m planning on using these front end tools with a new RoR app very soon. I’m glad I have this site as a playground!