Color Study II

The prototypes met my expectations of visual complexity, but how the heck could I produce them, or something similar, in p5.js?  It seemed to me I needed to be able to do three things: 1) build multiple drawings and save each into an array; 2) add variability by rotating and flipping some images as they were created; and 3)pull some number of images from the array and combine them with blend modes to create the final output.  Simple, right?

I spent a day researching and trying to accomplish the first step - storing my canvas in an array - growing ever more frustrated.  I found all sorts of approaches and code snippets, that for reasons beyond my ken, simply did not work for me. Often there were error messages that might as well have even presented in ancient Sumerian for all the good they did me. Sometimes the code ran but did not produce the desired effect. I spent hours isolating the impact of each line of code, debugging, and inching forward.  Late into the evening, I stumbled across get(), and crawled off to bed.  I had finally built an array of algorithmically produced images, retrieved those images at will, and blended them onto the canvas.  I could sleep.  Achieving rotate image, flip horizontal, and flip vertical were goals for another day and fresher energy.

I woke up to @gorillaSun’s excellent article, All About that Grain, which provided an excellent treatise on the subject of grain, but also illuminated several other elusive concepts that I had been unconsciously chasing in my p5.js journey. Another resource, @genekogans transformation examples, proved immensely helpful in figuring out how to rotate and flip my canvas - emphasis on the word canvas, as opposed to image - when and how I pleased. Work by @freethejazz led me in the direction of adding subtle texture to my images.  By the end of the day I had a streamlined working script that addressed all three of my starting requirements, plus a bonus or two. Now I had only to consider elements of my design.  

Here then is Color Study II. Continuing to depend on the primitive shapes of rectangles and ellipses, the composition achieves visual interest through layering and texture.  Initially, 100 images are created and stored in an array.  The script uses an analogous color scheme, and each set of images is based on a randomly selected primary hue.  As shapes are drawn, the saturation, brightness, and transparency of the hues in the palette are randomly altered. Other random elements include the number, type, size, and placement of shapes, as well as the drawing orientation.

Once the set of images is completed and stored, I then randomly select 10 of the images for the final output.  Blend modes are varied as the chosen images are layered onto the canvas.  At the end of the loop, a final image, also chosen randomly from the initial 100, is used, with a controlled blend mode, to smooth the result.  The result is a complex collage celebrating the simple joy of color and my progression along the p5.js learning curve.

::tezos-storage-pointer[]{contract="KT1BJC12dG17CVvPKJ1VYaNnaT5mzfnUTwXv" path="ledger::19864" data_spec="FX-GEN-DATA-002"}

Love and creativity always,

Wanda