Shaders in sketches — Length

ilithya

Jul 21, 2023

Hola,

Hope you’ve been enjoying the summer or winter wherever you find yourself around the world. 🌞❄️

Let’s welcome the new subscribers to this tiny newsletter. :)

It’s shader time! If you haven’t read my previous issue, read it here. And the very first one was published on my blog.

The following GLSL function to explore in this 'Shaders in sketches' series is length().

Length function

Let's travel through the length() function, which calculates the length of a vector:

length(x)

The links in the references below give us a description of this GLSL function:
length returns the length of the vector.

But what does that mean? My aha moment arrived once I visualized the function as an abyss in the middle of a space (the distance between two points) — a luminosity gradient going from dark (abyss) to light (space).

[© ilithya] Shader sketch of GLSL length function: x = x

For example, let’s take the coordinate x as a vector to measure with the length() function. If we center our coordinate space to have a 0 value in the middle of our screen, we can imagine a flat vertical abyss of darkness in the midpoint of that one-dimensional x vector. The abyss isn’t a solid block of color but more of a murkiness eroding in light, appearing visually as two linear gradients mirrored together.

We could do the same by calculating the length() of the coordinate y, where we assume instead to have a flat horizontal abyss of murkiness in the center of that one-dimensional y vector.

[© ilithya] Shader sketch of GLSL length function: x = y

If we decide to measure the length() of a two-dimensional vector, per se, a vec2(x, y), our imaginary abyss would no longer be flat but round, considering both coordinates in the space. It’ll still be an abyss, but a circular one, like a black hole that gradually dissipates towards the light, forming a radial gradient between a dark and a light color on our screen.

[© ilithya] Shader sketch of GLSL length function: x = xy

Whether x is a one-dimensional or two-dimensional coordinate, visualize an imaginary abyss portrayed as two mirrored linear gradients or a radial gradient emerging from the center of the measured vector if your coordinate space is centered. As long as I imagine such gradient(s) whenever I use this function, I can make a clear picture of what that code will draw.

References:

Personal Projects

Last week, I released my first long-form generative project as a collaboration with Erin Wajufos. It isn’t my usual trippy shader art, but a collection of architectural collages with some good old p5.js (we wanted to choose a technology where we both felt comfortable). 🌱

It’s a nostalgic reflection of the Internet era from the '90s, which feels similar to entering the Web3 now.

If you’re into collecting NFT art, mints are still available on Art Blocks.