Creative Developer Computational Designer Generative Artisan


Generative data artwork on chain



“Window” is a generative piece exploring the different densities formed by both rigorous and pseudo-random patterns through wobbly quadrilaterals.

Its visual foundation is based on a subdivided 2D grid that opens up a number of windows with elements either saturating the space or making it breathe. The size of the windows also impacts the density to the point of sometimes filling up the entire area with a uniform color.

Another dimension is added with inner grids bent to various degrees, breaking the flatness, letting you dive inside and imagine a glimpse of something more.

Two sets of lines crossing and overflowing the piece bring some stability to the ensemble.

The colors follow a set of 7 predefined palettes crafted by eye in order to give it a consistent identity. To fit the limited on-chain generative edition format, weighted occurrences of these palettes as well as dithering and saturation variations will generate different outputs.

“Window” is build on top of the Canvas API with the visual programming tool Nodes.

It lives primarily on the tezos blockchain via the fxhash platform as an edition of 512 tokens at a 2048x2048 resolution.

Minted tokens grouped by similarities


First off, I gave myself the constraint of only using the Canvas API. No WebGL, shader or image texture. Nodes was the perfect companion to bring it from prototype to final state.

The whole graph is pretty succinct so let’s see how it is structured.

Window graph

A “Portal” logic is used to reduce #blueprintsfromhell spaghetti: it allows me to send data from 1 point of the graph to N others without dragging lines all over. Here, it sends the config computed from @fxhash features to the nodes taking care of geometry and drawing.

Window portal nodes

Designing the palettes was a very artisanal process:

  • WhiteStripes: sampled and adjusted from White Stripes album covers 🎸
  • Spices: thinking back on an indian dal I cooked
  • BleuBlancRouge: inspired by the french flag 🥖
  • SignoraInGiallo: a citrusy feel and obscure reference to crime italian TV

Each palette is just one template node with color ports. The port preview is a nice way to visualise all of them at once. Their definition follows @kGolid’s logic of background/stroke/N colors from their personal collection (Chromotome).

Window palettes

After subdividing the base grid from fxhash config and seed, the quads are filtered according to few criteria: horizontal vs vertical, area… A few “array.forEachLoop” nodes (similar to a Houdini for-each) will then loop the quads and fill them with the different patterns.

Window grid

Once the grid is filled up, a final pass ties everything together by mixing in a bit of dithering.

Window dithering