What happens when… gradients are used like displacement maps, only they disrupt other visual characteristics? That’s the question this experiment explores using the Generative Symmetries HTML5/JS app I’m developing. The following images show the progress through the process until the final result is generated.
In my app Generative Symmetries, I simply drag-n-drop the color map onto the canvas, select how I would like to use it, and then the colors are sampled 1-to-1 based on the location of the graphics in relation to the color map image.
There are many different parameters I can adjust in terms of Turbulence, but for the this experiment I decided to apply the gradient to the color sampling within a minimum and maximum range (0.1 – 0.7) of grayscale values. In other words, if the grayscale sampled from the gradient was between the min – max, then it would color the (compound) path, otherwise, it would use white as the fill color.