Rooted in layered structures.
Each piece begins with stacked blocks, noise-driven offsets, and drifting rectangles generated in P5.js. These strata form a dense underlying architecture that the fragment shader then reinterprets.
Long-form generative art (with p5.js and GLSL)
SubSTRATA() is part of what is known as long-form generative art: a format where a single piece of code can generate dozens or hundreds of unique artworks.
Instead of manually creating each image, the collector triggers the algorithm, which produces a one-of-a-kind output based on randomness, seeds, and variation inside the system.
Each mint is unique, but all versions come from the same shared codebase.
To build these structures, SubSTRATA() uses p5.js, a library designed for creative coding.
p5.js allows the system to draw shapes, colors and layers directly in the browser, turning code into a visual composition. In this project, it is used to produce a large textured image made of accumulated rectangles.
Once this base texture is ready, it is sent to a GLSL fragment shader.
GLSL is a low-level language that runs directly on the GPU, capable of transforming images with mathematical precision.
In SubSTRATA(), the shader mirrors, rotates and animates the texture, creating the symmetrical drift that defines the final visual character of the work.
Together, p5.js and GLSL form a hybrid pipeline:
- p5.js builds the layered surface,
- GLSL interprets it and brings it to life.
Layer buildup
1 Layer (P5.js)
The composition begins with a single layer: a long horizontal band made of black and white rectangles. The structure is simple and linear, almost like a compressed barcode or a fragmented strip of architecture. Each rectangle is clearly visible, and large areas of white space surround the form.
5 Layers
With five layers stacked, the composition becomes noticeably more complex. Additional rectangles appear above and below the initial band, forming multiple horizontal strata. Overlaps begin to emerge, gaps are filled, and the image gains density while remaining easy to read. It resembles a set of shifting, interlaced architectural fragments.
50 Layers
At fifty layers, the composition turns into a dense, interlocking field of rectangles. The canvas is now almost completely filled, with black and white shapes forming a rich, highly textured pattern. Depth appears through accumulation, overlaps, and the irregular rhythm of the blocks. The original “single line” structure disappears into a full, intricate surface.
Mirrored shader texture (GLSL)
In the final stage, the texture generated in p5.js is passed as an image uniform to a fragment shader. The shader does not draw new shapes. Instead, it samples and transforms the existing texture using polar coordinates and mirroring:
Animation, a slow drift inside the shader
Once the layered texture is sent to the fragment shader, SubSTRATA() becomes fully dynamic. The animation does not redraw new shapes; instead, it moves the sampling inside the mirrored texture. The shader converts the texture coordinates into polar space (radius + angle). It then mirrors each angular sector to build the kaleidoscopic symmetry. The animation happens after this mirroring stage.
Code
mirrored.x *= sin(mirrored.y * 0.2 + uTime * 0.01);
mirrored.y *= cos(mirrored.x * 0.2 + uTime * 0.01);
Some Results
Seed: substrata00
Seed: substrata01
Seed: substrata04
Seed: substrata07
Seed: substrata08
Seed: substrata13
Collectible from editArt.xyz
See subSTRATA() on EditArt.xyz Thanks for sticking around till the end!