Nothing changes till you start to break it down. — Mark Oliver Everett
This is the first serious attempt to try to come with something on my own. The idea came from the cover of a notebook1. 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:
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 first thing I did was de-composing the “pattern” into its individual elements:
Pretty self-explanatory. 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 right-bottom
slab, 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 chess-like 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 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 chess-filled (filled and blank cells intercalated).
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.
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.
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 3-5 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: