I recently stumbled upon this wall art piece by Sol LeWitt and thought it might be fun to recreate in code.
P5.js was the library of choice. It’s from the team behind the Processing language so the API is perfect for geometric generative pieces like this.
It’s also my first time using the new ES6 class syntax, which helped to clean up what could have been messy spaghetti code (not that it entirely stopped me writing bad code).
Let’s dive in to some of the more interesting parts of the code.
You’ll notice it’s broken into three classes, Layer, Line, and Block. A Layer is a group of four lines: north, east, south and west. The piece is made up of gradually diminishing layers. The layer instance is in charge of constructing each of the lines while a line creates the block instances and each block renders itself to the canvas.
The Line class is the main workhorse for the piece. It’s passed vital information: the line width, the block height, the average width of the blocks, and a ratio of how much each block should vary in size. An algorithm then fills the line with randomly sized blocks. It’s also tasked with ensuring that two neighbouring line blocks are never the same colour.
I may do another iteration with smarter colouring so that blocks of the same colour never touch.