For this assignment, I used this piece by A. Michael Noll as my starting point.
Naturally, I wanted to expand on the concept of generating randomly-sized rectangles across a canvas and I decided to do this through introducing random movement to them. Upon doing so, I felt that recreating the same monotone color palette in Noll’s piece would lack depth, so I experimented by filling the rectangles with a randomly generated (yet still specific) color palette. Initially, I went for brown but, as I was experimenting with the RGB values, noticed that introducing green reminded me of a forest’s color palette. The movement of the squares (which I had already coded at this point) aided in this imagery as it was reminiscent of the swaying of branches and leaves in the wind. To complete this imagery, I changed the background color to a shade of blue which attempts to mimic the sky’s color just after the sun has set.
My main challenges and highlight of my code one and the same as I struggled to figure out how to incorporate randomness into my for loops. However, I was definitely happy with the result after incorporating them into my code. I have included it below.
for (let i = 0; i < 200; i++) {
let x = random(width);
let y = random(height);
let rectWidth = random(100, 20);
let rectHeight = random(100, 20);
rect(x, y, rectWidth, rectHeight);
let r = random(140, 170)
let g = random (120, 150)
let b = random (10, 40)
fill(r, g, b)
Some further points of development could be to incorporate the use of noise to produce a swaying effect rather than the random generation of squares each frame (however I do like the “pixelated” appeal of my outcome). Another point which I considered would be to incorporate a moving gradient into the background to create a more immersive experience. A larger scale development could be to create an entire interactive exhibition with an environment made in the same style as this outcome.