The Deconstruction
This is the first serious attempt to try to come with something on my own. The idea came from the cover of a notebook^{1}. I was automatically attracted to it, and I decided I wanted to replicate those graphics procedurally.
To set the title for this project, I used Eels’ last album: The Deconstruction
At the end, I ended with results like these ones:
You have to trust me when I say they look at their prettiest in high resolutions
It took me about six hours along two days between drawing, designing, and coding.
You can see a live version at the end of this page, or here for faster loading times.
The code is available at davidomarf/generative/deconstruction.
The abstraction
The first thing I did was decomposing the “pattern” into its individual elements:

Points: Pretty selfexplanatory. At first, I assumed they were uniformly distributed, but after watching the notebook for a longer time, I realised that the individual points were only on the rightbottom
cell
inside aslab
, which is a collection of 4 x 4 cells (more on this later). This makes the whole work appear more ordered. 
Raindrops: The diagonal lines with lengths between 3 and 6,

Chess slabs: Slabs with a chesslike fill.

Solid slabs: Slabs with a solid fill.
I noticed that the individual points and the raindrops, were mostly uniformly distributed. The slabs (chess and solid) can be in clusters or uniform distribution.
The Structure
The points are a filled cell
, which is the basic structure. A cell
can be filled or blank.
A collection of (4 x 4) cells is a slab
. And is the slab the structure that
can be solid (all cells filled), or chessfilled (filled and blank cells intercalated).
The “Randomness”
Apart from randomly deciding the position of each point/slab, I decided to determine the “consistency” of each slab, by giving it some probability to deviate from the ideal slab: filled cells when blanks are the default, or viceversa.
Up to here, I coded the first versions. They lacked clusters, and were all uniformly distributed accross the space.
The bottom rows have more saturation of slabs. Left bottom didn’t use solidfilled slabs.
One of the results of this first version that I liked most, even being very simple and basic, was this one using only points. I’ll definetely modify this (specially the opacity) for other projects.
Generated using only points.
The clustering
The clustering (I called it propagation during the design) was the last piece to be developed. Even now I feel pretty unsure of the method I used, and I’m looking forward to think of new methods that can get better results in term of “naturality” and efficency.
My current idea goes like this:
 Select one slab.
 Choose the propagation direction.
 Move to the next slab in that direction.
 Grow to the sides (perpendicular direction from where you came)
 Choose the propagation direction, which is heavily influenced by your previous direction.
 Repeat 35 n times.
I chose to keep the direction somewhat constant because of the original looks of the notebook.
After applying that idea, I could get clusters like this:
From left to right: [3, 200, [3, 80], [30, 30], [50, 8]. [n, max_length]
And mixing it all together again, I got to The Deconstruction V 1.
This svg is generated on each page load:
I’m working on making it interactive, being able to modify every variable with forms and updating at will, to really experiment with this.

The notebook at issue (Price in MXN, which is about 3USD) ↩
Leave a Comment
Your email address will not be published. Required fields are marked *