…well, “unbearable” might be a stretch. But when compared to running native Processing sketches in Java, the difference is certainly noticeable. While experimenting with potential approaches for the final generative art project in EDPX 4010, I was very inspired by Asher Salomon’s “Evolution” sketch in OpenProcessing: https://www.openprocessing.org/sketch/15839, which created a very cool watercolor-esque painting effect. My initial attempts at porting Salomon’s code to p5/JavaScript resulted in an abysmally slow rendering rate…nothing even close to the original sketch. After a lot of further exploration and changes, I finally reached a more respectable speed, though not something that could be used in a large canvas of 1920×1080. My p5 results can be viewed here, and the source code is here. Some important discoveries:
1 – Instead of the get() and set() methods used in the original (which are still available in p5/JS), getting and setting pixel colors via the pixels[] array is faster. loadPixels() and updatePixels() need to be included for this approach to work. Dan Schiffman’s “Pixel Array” tutorial video was incredibly helpful in understanding this process – in particular, setting the pixelDensity value to 1 for my Mac’s retina display was a trick that I did not find documented elsewhere.
2 – Instead of using the floor() and constrain() methods in p5, using the native JavaScript Math.floor, Math.min & Math.max object methods performed faster by a substantial margin!
There are probably more optimization tweaks to be made to the p5 version – to be continued…