Spring and Processing.js

In celebration of Spring's belated arrival in Brooklyn, here is a Processing.js script inspired by all the blooming flowers. Click on the branch and hit 'r' to regrow the cherry blossom branch. 

Other than being inspired by the cherry blossoms, the main aim was to play around with Processing.js. My experience with javascript is limited to teaching my students Scriptographer in Illustrator, so this was a great opportunity to familiarize myself with the language and web programming in general. With the development of html5 and webgl, the possibilities of the web browser are getting incredible - just look at the amazing stuff going on at Chrome experiments!

Processing.js promises easy translation of processing sketches to javascript, however I ran into several problems that were difficult to troubleshoot. Here are some of my experiences:

  1. Translating from Eclipse to Processing IDE - Firstly, Eclipse is my main IDE and in order to use processing.js, I had to move the code to the standard Processing IDE. Some inconsistencies include: i) calls to static methods e.g. PApplet.PI  in Eclipse just  becomes PI in processing, ii) don't use the Math library e.g. Math.random() as I think processing.js doesn't recognize it, iii) no need for access modifiers e.g. public, private, protected in Processing, iv) no interfaces in Processing.
  2. OOP and Simplify- the final Sakura sketch is simplified from the original which had mouse interaction and some dynamics in it. When the structure of the sketch gets too complex, with multiple classes (in this example, Sketch, Branch, FlowerBloom, LeafBundle), it is difficult to troubleshoot when it breaks down in processing.js. The rule of thumb is to start with what works and then build up complexity later. Also I placed all the classes under one main tab in Processing IDE, rather than follow the convention of creating a separate tab for each class.
  3. Coding conventions that don't translate to javascript - I found this out the hard way when I should have read the 'learning resources' in the processing.js website more carefully. Do not have the same variable names! As an example both FlowerBloom and LeafBundle classes have a variable called 'growDir', this must be differentiated in order for processing.js to work. Therefore it becomes fb_growDir and l_growDir instead. As an added precaution every method and instance variables were given unique names.
  4. 3D is a problem - I banged my head on this for the longest time. I could never get my 3D sketches working in processing.js and spent a lot of time running through the code line for line to find a non-existent error. 3D is handled in Processing as P3D or opengl, however in the browser it is handled through webGL. This may seem obvious, but ensure that your browser and computer are webgl compliant! The video card on my old laptop did not support webgl and I ended up thinking that my code was the problem, instead of the hardware.

Here's a link to the original Processing sketch and the source code (typical tree generating code that involves recursion).