After exploring natural representation on my three latest works, I was thinking it’s time to go back making abstract work again. While searching for ideas I tinkered with the patch from ‘A Fissure in the Megastructure’ in Cables.&#x20;

*(In case you never heard of them,* [Cables.gl](https://cables.gl/) *is a node-based webgl environment. It's a visual programming system, meaning instead of typing code by hand you interact with visual elements within the system (in this case, connecting nodes and virtual 'cables') to build the logic for your program. Each nodes represent a function, and by connecting them with virtual cables you can build a pretty complex network (called 'patch', like in modular synthesizer) of function that can do pretty much anything from interactive visualizer to games.)*

![Cables user interface. Pictured is the patch for 'A Fissure in the Megastructure'.](ipfs://QmbwDhDgZ6nigyQVQBhGFNp7SYoev5EHeX2aW4xErovhz5)

This [patch](https://cables.gl/p/co39a6) is my personal groundbreaking moment; it’s where I develop the basis of most of the technique I used in my recent works, especially on blending and layering to create a grainy, almost ink-like texture effect.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::927221"}

The main pattern in ‘A Fissure in the Megastructure’ is composed of layered grids that forms irregular pattern. This time, I want to focus on the intersecting shapes and put the grid as subtle layer to add nuance to the gradient.

![](ipfs://QmT8c4W8wSg94GDX6sZaNYza5Uk9g3TCr3DKifeEMTXV7N)

***

# Basic Composition

I started by generating an array of random points, then subdivide them. This way it would still look random, but also has some kind of order to them since the points in between are interpolated. I use this array as the position, scale, and rotation value for instancing cuboids and circles. To create the intersecting effect, I set their transparency very low with randomized value. This variable alone can create tons of visual variations, especially when paired with LUTmap node later in post-processing since it’s pretty sensitive to the initial grayscale value.

![Different transparency value can create different effects. It will be more apparent after colored with LUTmap.](ipfs://QmX5td13SkbVQjvkc2PbWzxCrTa79TzcRfm4GJrjvm8qbH)

For the rotation, I multiply the initial value with a number depending on the turbulence mode. All pictures below have the same seed with different turbulence mode to show the difference. ‘Low’ turbulence means little to no rotation, so the cubes will form an irregular rectangular grid.&#x20;

![](ipfs://QmdL6b4kRwTp1uu2J4YaF3vTMPfAfxHmccEBZEDxNsnUMi)

‘Medium’ turbulence multiplies each rotation by a small value. This creates a ‘flowing’ effect.&#x20;

![](ipfs://QmRYRHNhhokb2o6z9UwwFWiGXpJwqvZKNPRj9i2svxSV3N)

And ‘High’ turbulence is the most chaotic of the three.

![](ipfs://QmXGUMNEVRLD7K4u1UCiAd2Movjcd79AYXa13FRzgJK1ej)

This creates more identifiable variations in the output.

***

# A Burst of Color

Every instanced geometries above are put through a Render2Texture node in Cables. This allows the resulting images to be post-processed to add grain effect and most importantly, colors.

First, grain effect is achieved by layering a few Value Noise at different scale, blending mode, and transparency.

![A visualization of Value Noise in Cables.gl.](ipfs://QmZ3c9UeWQ8eWKdRo2t7WapPPHiq7xFeiVrZY2Bzthkajn)

Two Value Noise layers are put before the LUTmap node with very low transparency. Blending them before LUTmap allows the different grayscale value in the grain to be mapped in different colors. Then at the very end of the nodes one more Value Noise is overlaid to create finer grain.

Coloring is done via LUTmap node. What this does is basically apply a color filter/effects by using a lookup texture. I find it very useful to create deep contrast and color combination as opposed to ColorMap node since ColorMap map the actual grayscale value to the gradient, but LUTMap works by...uh...let's just say it's more complex 🤷. [This article](https://r105.threejsfundamentals.org/threejs/lessons/threejs-post-processing-3dlut.html) explains it really well on its implementation in three.js.

By using gradient textures I can create and apply color palettes quickly and easily.&#x20;

![Gradient palettes.](ipfs://QmWWnvgezAcJa2LoRdGrgKYabiLgdiPRcp1xLRhYWt9Md6)

![Same image processed with different coloring method. LUTMap (left), very yummy. ColorMap (right), bleh.](ipfs://QmYMCt6TPsFiKXXCGHJJqF8QvZNEtiWH1DeKNkkSnai9Sq)

One of the parameters in Gradient Texture node that I include as feature is gradient step. The effect is subtle but it can add nuances to the variations. Here the effect can be seen on the CMYK palette.&#x20;

![](ipfs://QmapmgvoLCXt8qohDBtwrvFqMfscHENjmCcXkYkXwVf4zc)

![Left: gradient step = true. Right: gradient step = false.](ipfs://QmXmubyrgw4Cv4KK4bfUe1igemnbfc2oGwvcc2YDHQaLj3)

With gradient step = true, only Cyan, Magenta, Yellow, and Black show up. Some green occurs but if you zoom in, it's actually just some individual Cyan and Yellow grain that create the illusion of green. But with gradient step = false, the color blends a little bit creating some actual shades of green and orange.

***

# Melting Consciousness

At the post-processing stage, I put a PixelDisplacement node to give the lines and shapes a ‘wobbly’ look. It takes the grayscale value of a texture — in this case I use a combination of Simplex and Perlin noise — to displace the pixel on the final image.&#x20;

I usually use a very low value for the displacement amount, but then I try increasing it a little bit to create a ‘melting’ look. It works pretty well with this type of visual, so I decided to leave it as an uncommon feature (± 20% chance of appearing).

![🫠🫠🫠](ipfs://QmRFLiR6xe2ZZUDAtcHfxHrHu2Yh9jnk3qN9oNr6fCbSHu)

![Some test outputs.](ipfs://QmR1otphs6q8PRNQYyXoCkbfidfH7TX6wATXDqCv2kvorW)

That concludes this brief explanation of my creative process. Hope you enjoy the outputs, and happy minting! 🖤

::tezos-storage-pointer[]{contract="KT1BJC12dG17CVvPKJ1VYaNnaT5mzfnUTwXv" path="ledger::20683" data_spec="FX-GEN-DATA-002"}


A brief overview of the process behind the making of ‘In a Moment, a Thousand Years’.

I play with nodes until reality is destroyed

The Making of "In a Moment, a Thousand Years"

Written by

Editions

Share

Details

stay ahead with our newsletter