Processing.js is unreal!
Recently I’ve come across some work that is requiring me to explore the HTML5 canvas across both mobile devices (namely iPad) as well as the desktop. I have looked into HTML5 before, and while it is interesting, I’m really not crazy into web development so I never really got too far into it. Basic HTML5/webkit/etc combined with CSS3 seems to be a huge step in the right direction as far as simple, good looking basic interactions and animations go, but as far as full interactive apps or data visualizations go its really not that great of an environment. Since these are the areas where my interests lie i have been keeping an eye on things but haven’t really dove in yet.
Enter the HTML5 canvas element and the Processing.js project, which is basically a full port of the processing environment to Javascript/HTML5 canvas. I noticed this project about 6 months ago, and I didn’t really get the point of it. It seemed interesting to me but was very limited in use and I had doubts that it would ever be legit enough to use for a full project. I was totally wrong. The developers working on this project have been killing it, and as of today the newest release supports a crazy amount of Processing code that just works!
I have never been a giant fan of Processing, although I think its a great learning environment. Processing has always been too slow/restrictive on the web and not as fast as C++ on the desktop for me to really consider it for any major projects. Now that Processing.js has been created, the web performance/integration issues are rapidly fading away. I now consider processing to be an extremely useful tool for creating web based interactivity, and I’m really excited to dig in further. Expect some updated posts with some experiments from me in the near future, but for check out these links that I have found and feel free to ask any questions.
Main Site:
http://www.processingjs.org
Creating iPad/iPhone apps that Cache (offline web apps):
http://www.rockitbaby.de/experiments/processingjs-on-iphone
Awesome iPad based code editor (code applications on the iPad…so great for messing around!):
http://code.google.com/p/pjs4ipad/
Controlling Processing.js/HTML5 Canvas using HTML Elements:
http://lethain.com/entry/2008/may/14/three-processing-js-examples/
Basic Data Vis/Presentation Layer:
http://hacks.mozilla.org/2010/04/real-time-server-visualization-with-canvas-and-processing-js/
[...] I did implement localstorage which is a sweet bonus with HTML5. I saw Steve Varga’s post here on ProcessingJS which led me to this post from a guy, who figured out how to convert web-based [...]
Just been browsing through your blog and I’m glad I ran into it! The iPad + HTML5 mem management post I’m sure will come in handy for me in the very near future, and as I’ve too only recently started delving into processing.js, I find myself in utter agreement with you with regards to the awesomeness in potential for it. I’m currently dev’ing a site, now, testing it’s application as a header ~ which, coincidentally, lead me to your blog seeking answers with regards to mem management when loading/displaying images. I’m about to check the links that you’ve posted here, as well. Again, thanks for the bits of inspiration. ha
Hi Cory,
Glad that I can be of help! I try to post up useful things on here as much as I can, and comments like these are helpful reminders to keep doing this. I’ll try to keep adding more info on Javascript/HTML5 as I dig deeper and deeper!