Squishing infinite space into finite domains

Welcome to FLOW.STATES, a newsletter by me, Eliza Struthers-Jobin, that explores the many interconnected topics and ideas that shape my practice. I’m a creative technologist particularly interested in real-time outputs and the continuous cycle of exploration and discovery of the unexpected ✨

For this round of shaderstudies, I dug back into a long standing obsession of mine, which is that of extruding shapes aka poking holes in things! When I was first getting started with ray-marching, which is a rendering technique that basically shoots light out of a camera in order to figure out where to place shapes in space, I managed it in a very hacky way, by chaining mix() functions together to create a combination of shapes that gave the impression of a single shape that had been extruded. Like I said, hacky. Sadly that code vanished when my old Razer’s battery nearly exploded1 so I can’t pull any of the franken-shader code up to compare. But there are some remaining examples from instagram, if you’re curious.

How do we extrude shapes correctly? The solution I came upon has a serendipitous connection to my other forever obsession, iridescence.

I’m talking about gyroids. A fancy term to explain an infinite surface full of holes, but both the surface itself and the holes form these never ending tunnel networks. There are no dead ends, and if you were to walk through the tunnels, or if you were to fly through the tunnels, you’d

a) never get to any perceivable endpoint

b) you’d never be able to switch your mode of navigation.

Meaning that if you were a walker you could never swap that for flying instead, and vice versa. The trick is that the two endless routes—solid and hollow—meet only at a single, repeating boundary: the gyroid surface.

If that boggled your mind a bit, you are not alone. It took me a second to make sense of all this. From what I understand a gyroid is basically a boundary between two infinite spaces. If you’re having trouble imagining it, the mental model that I choose to use, is that of a giant piece of Swiss cheese, but one that extends off the plate, and goes on forever and ever in all directions. It’s not a 1:1 analogy but it works for me.

What do infinite spaces have to do with iridescence, you might be wondering? Gyroids show up in a few places in nature, including cell membranes, and the spines of some species of aquatic life. They also show up at teeny tiny nano-structure scale on butterfly wings. Not every butterfly has them, not every butterfly’s wings are iridescent. But those that are shine so beautifully because their wings contain as many tiny gyroid mazes as the wings have scales. (I was today years old when I learned that butterflies had scales!)

But ok, let’s back track a second because how can an infinite surface exist at nano scale, repeated a bunch of times on each wing? We’re talking smaller than the wavelength of visible light tiny. And how can an infinite surface exist in a cell membrane? These two scales, infinite and finite, seem kind of at odds with each other, don’t they?

Enter the aspect of math, science and programming that has always tripped me up. Speaking in infinite terms is another way of speaking in generalities and abstractions. It’s a way to define things without having to contend with their edge cases. The infinite gives us the space we need to define underlying patterns without worrying about where anything starts and stops. This is why math, science and code can seem so elegant at times. Let’s take a detour for a second towards my favorite math related GIF of all time, I know I’m not alone.

Here we have a visual representation of the sine and cosine function, which not only shows how the two frequencies together create a perfect circle but it also creates a never ending wave.2 If you have ever plugged time into a sine or cosine function in your shader code, or math.sin() in p5.js or Touch Designer or insert-your-CC-tool-of-choice-here, you know that it can also be constrained to whatever our needs are.

Often in creative coding, those needs revolve around shaping specific time intervals, particular amplitudes or defining frequency ranges. Which is pretty much what I was doing with my gyroid. In fact the code isn’t that different from the first shaderstudies I shared, the only difference is how I create the ray marched shape itself. The SDF, which is a little mathematical recipe we can use to create different shapes, generates a gyroid pattern whose frequency (how far that Swiss cheese extends) is scaled down and forced into a shell of sorts. I opted to stuff it into a sphere and to stay with our cheese theme, a cube as well.

By default when you work with ray marched shaders, there is a cap on how far into space you generally want to allow the camera in your scene to look, so spatial boundaries are also imposed by the visual technique itself, which is a great example of how a more general idea can be scaled to fit within a specific paradigm.

Since my shader built off of my previous series, I had access to iridescence right out of the gate, which if you remember from earlier is something that gyroid nanostructures help generate in certain types of butterflies wings. Iridescence is all about how light makes certain colors shine and change. When it comes to the tunnels and passages created by gyroids, the different wavelengths that light creates each take their own unique path through the twisty tunnels of gyroid space. Sometimes certain waves will run into each other and create an amplification of the wave where they both shine brighter, and other times they totally cancel each other out. All the chaos creates something called selective reflection, or iridescence. In my shaders, the same thing is happening, in particular on the thicker iterations.

The thicker the walls, the longer the paths of light become as they traverse that dense space. That means the red, green and blue rays have more chances to bounce around and recombine. We get more complexity. The thinner versions being less dense, the light passes through them more easily which is why they seem more like a solid color. Until I throw a feedback loop on them, and create some color memory. That plus the rotation of the shape in space means that even these thin gyroid surfaces are creating new color combinations all the time.

A note on timing — I’d ended my first shader studies post enticing you for what would come the following month. Except that month was may, and we’re now on the very edge of September. Have I been iterating since then, feverishly whittling away at my code? The answer is no. When I realized I’d missed the aforementioned date, I was a bit embarrassed. And then I leaned hard into the perfect excuse that is summertime and wanting to be afk.

However, as the autumn days shorten, I’ve decided to get over myself and return with some renders to share. I go back and forth a lot about the nature of what the Internet has become, (which often feels like something we have to keep up with to keep our own relevance intact.) I wrestle with whether to accept it, to fight against it, to ignore it or to somehow find an in between. This could definitely be its own post, but given my time away, I did want to mention it.

I do believe the best shares are the ones that are given the time to ripen a bit, the ones where the ideas contained within have had as much time to work on the person playing with them, as the person has had to work on them. I’ve noticed that I can feel when something is rushed to be released, when it’s created to satisfy the algorithm, and it honestly gives me an incremental and creeping ick. Which there’s no coming back from.

So… I try to give my ideas the time that they need ✨