Introduction to Temporality
written by 0xbenj
Idea conception
Before I started making code-based generative art in September 2022, my main creative outlet was photography. I've been shooting long exposure landscapes and seascapes since 2010. When drones became affordable around 2017, I became fascinated by the unique top-down perspective that they enabled. Mundane locations suddenly transformed into canvases filled with interesting textures, patterns and geometry. In my free time, I'd scour Google Earth looking for shoot locations. Below are some examples of the types of images that I really enjoyed and these eventually became the seed for this project.
For me, the most interesting images come from where land meets water. Swirling river banks, sedimentary plains, estuaries and deltas contain some of the most fascinating patterns and textures. Sometimes formed in minutes and hours from sudden occurrences like floods and volcanic activity, other times formed over hundreds of years through erosion and tectonic movements. They offer a glimpse into the passage of time on a geological scale.
"Everything in life is just for a while" - Philip K. Dick (A Scanner Darkly)
The inevitability of change evokes a sense of transformation and impermanence. This notion of perpetual change and movement over time is the foundation for Temporality.
temporality [/ˌtɛmpəˈralɪti/] The state of existing within or having some relationship with time
Evolution of the art
Even though the final aesthetic has a painterly look and feel, I did not set out at the beginning with this in mind. This came from a lot of experimentation. Temporality is the result of my first steps into the world of shaders. The images below show how the work progressed as I built my understanding of how shader processing worked. I really enjoy looking back at these milestone images and I intend to explore these iterations further.
Brief technical details
The collection is built using p5.js, chroma.js and GLSL. As mentioned earlier, I'm very early in my GLSL journey and so the concept behind the algorithm is extremely simple. Here's what it does:
1. Generate a noise map on an off-screen canvas. This will be used to determine the direction to sample in the shader.
2. Generate another noise map on a different off-screen canvas. This will be used to determine sampling distance in the shader. I'm also adding scratches and marks to this canvas to add compositional features.
3. Draw a base image on a third off-screen canvas. This base image is essentially 2 color wheels drawn using the chosen color palette. The color wheels have various stepped gradients (calculated using chroma.js).
4. The 2 noise map canvases are passed to the shader as textures. Using the base image as the starting point, every pixel samples the color from another pixel and adopts that color for itself. The noise maps determine which pixel is sampled. The first map determines the direction to sample in and the second map determines how far the sampled pixel is from the current pixel.
5. This shader process is repeated a number of times to arrive at the final result.
