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.
- 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.
- 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.
- 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).