Code Your Way - Week 2 (02/03/2025)

Decoding & The Unpredictable

In ICM, I always thought that using random() was the easy way out of creating an interesting sketch since the steering wheel is no longer in your hands.

I still think that it's the simpler way to create "cool" visuals, but through this weeks exercises, I've come to appreciate the other interesting things that can be done to regain control of randomization.

◀ The left image is a piece created by Argentinian artist Manolo Gamboa Naon who creates generative art through code.

Decoding Exercises

Exercise #1: Using random to generate variation
Prediction:
- canvas with black background will be adaptive to the browser window size
- a rectangle is drawn from the center point with a 2 pixel wide border in white and no fill color
- squares are drawn at random positions within a range and getting increasing larger 

Exercise #2: Using random to create probability
Prediction:
- adaptive canvas that matches window width and height with black background
- through a for loop which is only run once, 400 rectangles are drawn
- 20% of the rectangles are wider than tall, the remaining 80% are taller than wide
- the "skinnier" rectangles will be drawn closer to the left & right edges, but farther from the top & bottom edges
- while the "wider" rectangles will be drawn farther from the left & right edges, but closer to the top & bottom
- when the mouse is pressed, the background and rectangles are redrawn

Exercise #3: Using random to control iteration per frame
Prediction:
- canvas with black background will be adaptive to the browser window size
- the sketch always starts with the same seed, but a different one is selected randomly within the range of 0-1999
- 100 lines are randomly drawn each time the seed is updated, which is only triggered when the mouse is pressed.
(A different way of "freezing" a sketch and not constantly iterating over and over)
- all lines drawn start inside a 20 pixel border around the browser window edge
- 10% of the lines are horizontal, 90% are vertical
- the end position of the line is dependant on the previous end point
- some sort of error will happen because endX and endY are not defined before they are used in the draw loop

Exercise #4: Using random to iterate 
Prediction:
- canvas with black background will be adaptive to the browser window size
- the lines will always be drawn within a 10px margin from the edge of the canvas
- only 40 lines will be drawn
- after the first line is drawn, the start of next line will be the end of the previous line
- then a new end point will be randomly generated
- refresh page to generate new sketch

Exercise #5: Introduction of noise to smooth the lines into curves
Prediction:
- canvas with black background will be adaptive to the browser window size
- very similar to Decode Exercise #4, but with more lines and the points are less dramatically distributed
- possibly presenting more curves than angles?
- page has to be refreshed in order to generate new sketch

Sketching with Random and Noise

An exploration of bubbles following a mouse in random order