Embedded Files
My focus here was to explore a dramatic interplay between light and shadow. The scene is dominated by a sun that casts only a cold, white light, forcing the shadows to fold into deep, layered constructs.
For this piece, I've designed the background to be a spiraling, black hole-like abyss, composed of interlacing black and white patterns. This is intentionally crafted to visually suggest a mysterious, abstract eye, as if a cosmic entity is gazing out from the void.
Building upon the previous black hole-like background, I've used Perlin noise to introduce significant variation into the radius of each concentric circle. This results in a structure where some intervals between the black and white bands are wide, while others are tightly compressed. This randomness in spacing creates a visual illusion of depth and three-dimensionality.
Comparing to Iteration 3, this version adds a bit distortion by adding some noises during the drawing procedure to add a sense of layering to the scene.
I removed the strokes in this version because I found that the quantitative strokes in Iteration 4 seemed to be disturbing and distracting.
Inspired by Iteration 5 and the concept of a magnetic field, I decided a good background would be an 'electronic fog'. To create this, I used the lerp() function to blend black and purple, forming this atmospheric backdrop.
This is a testing iteration of how to draw a thunder-like background by using the vertexes and some sin & cos functions to add some curves.
I combined the codes from Iteration 6 and Iteration 7 together to form this background, as I thought the electronic fog and the lightnings could blend together well.
In this version, I've replaced the sharp, zig-zag lightning lines with smooth curves. This is to create lines that resemble 'magnetic conduits,' which is more consistent with the overall magnetic field design.
CODE:
All codes can be viewed by clicking on the links with underscores below each image.
Reflective Prompt:
How is drawing by hand from observation different from programming the computer to draw for you? Can you think of some commonalities as well?
In programming, there could be "happy accidents" formed by randomly assigning values or utilizing the noise functions to create something that I would appreciate but never thought of before, but for drawing by hand, I would preferably have a clear plan of what to do, eliminating possible blurriness and randomness.
However, both processes begin with observation and deconstruction. Whether drawing a face by hand or programming a generative portrait, we must first understand the subject's fundamental properties. We need to break it down into its core components: shapes, forms, light, shadow, and texture.
What properties have you manipulated in the repetition / iterations? Describe your observations and visual outcomes during the process.
I have manipulated with the following properties:
"noiseScale"
This was one of the most fundamental properties, affecting the cohesion and texture of the generated flow fields and backgrounds.
I adjusted the multiplier applied to the coordinates before they were passed to the noise() function.
Very low values (e.g., 0.001) produced extremely large, smooth, and gentle curves. The entire canvas behaved as if it were part of a single, massive, slow-moving current. The resulting image was soft and atmospheric.
High values (e.g., 0.1 and above) resulted in chaotic, tightly-packed noise. The lines changed direction erratically over very short distances and instead appearing like television static.Grid Resolution
In the background generation phase, I introduced a key variable named resolution to create the cloud texture.
This variable defined the size of the grid used to draw colored rectangles (rect) across the canvas. The for loop's step-size and the dimensions of each drawn rectangle were both controlled by this single resolution value.
A large resolution value (e.g., 10 or 15) resulted in the canvas being filled with fewer, larger squares. Each color block was clearly visible, producing a low-fidelity (lo-fi) and retro digital aesthetic, reminiscent of early computer graphics or 8-bit art.
A small resolution value (e.g., 1 or 2) caused the program to draw the background using thousands of tiny squares. This formed a fine-grain cloud or smoke-like texture.
What makes a good generative pattern?
The most important feature of a good generative pattern is coherent with the context. For example, a generative pattern meant to evoke nature might use flowing, organic lines based on Perlin noise (like the magnetic field lines we worked on). A pattern for a sci-fi interface would likely use sharp, geometric shapes and rigid grids.
A good generative pattern should also exist in a sweet spot between perfect repetition and pure randomness. Too much order is boring and predictable. Too much chaos is meaningless and visually jarring.
Page updated
Report abuse