On my ongoing learning path in the Creative Coding Arts I’m going to make a lot of stops at a bunch of Clichés. I’ve been saying that this is, for me, the equivalent of the “Create a Blog in 5 Minutes with Framework X” of the Web Development scene. This time, the Cliché’s name is Worley Noise and I got to it via another Coding Train episode.
Worley Noise’s algorithm works as follows:
We randomly create and distribute feature points (I called them control points in the code for whatever reason)
With that out of the way, we draw a picture where, for every pixel, we calculate the distance to the feature points
We then map - somehow - that distance to a given color and move on to the next pixel
The result is sometimes alike cells, other times it resembles crystals , it really depends how you approach the color mapping and which distance you decide to use.
I started this exercise off with a simple enough code where I had an array of points distributed randomly across the screen and I went around every pixel on the screen making stroke / point calls to p5.js until the picture was formed. It worked but it was very very slow, so I took a little bit of time to try and make it a little bit better, and although I managed to get a full picture rendered from 12 seconds down to 3s - on my computer, which is a blessing because there’s a GPU available, but also a curse because it’s a 5k display and so the canvas is very large - it’s still slow enough that I didn’t even consider adding animation to this experiment.
In terms of “optimizations” I did a couple of things:
Instead of using P5.js stroke / point methods, I manipulate the pixel array directly, which in turn makes the code an estimated 94.55% less unreadable as we need to navigate a one-dimensional, pixel density aware, 4 color element array instead of just saying “draw this pixel this color”
I also went with the cell approach to the feature points, where instead of having an array of randomly generated points, I now break down the canvas in a grid and randomly place a point in each grid element. This in turn makes the lookups faster as I can address specific grid cells instead of going over all the points.
I also made a few variations in Color Schemes, some are black and white and simply look at the distance to closest point, others - like the Oily ones - look at different distances for the different color components. I didn’t put a lot of science into it, I just have an easy way to add color schemes and played around with them until something visually interesting came out.
If I ever manage to make this code run faster, I’ll definitely explore adding animation to this - be it that the points move around or that I map things in a 3D space and navigate that.