I spent two weeks in Berlin and made computer art for the first time as part of the Recurse Center’s first pop-up event. This post is a more in-depth look at the process I went through as I tried to build an animation that captures my fascination with the U8 subway line of the Berlin subway.
The primary tool I settled on was the excellent p5.js with an npm/webpack loader. P5 has a lovely API for using the canvas element for drawing that all modern browsers now support.
I was reading about the mathematics of tiling patterns. In my research, I discovered a neat paper on defining generalized periodic tilings of regular polygons using a data structure called a Delaney-Dress symbol. There was some source code to read, but most of it was pretty old, and none worked in the browser. I was not confident I could take this idea and get it to the point that it was generating art in the two week period of the pop-up. So I moved on.
Every day I rode the U8 subway from my Airbnb to our workspace, and I loved all the names and colorful tile patterns of the stations along this route. I thought it would be fun to try and take these colors and try and build a generative collage that would beautifully represent the U8.
To test the idea I wrote a script that generated some random pastel rectangles with uniform height and fit them into a collage pattern.
This result looked promising, so I took a day and photographed all the stations and cropped out individual tiles to replace the contrived pastel blocks.
This result looked promising, so I took a day and photographed all the station tiles and cropped out individual tiles and used them in place of the contrived pastel blocks.
When cropped the tile images came out pretty dark, and their colors were too disparate. I am no color expert, but something about putting all the tiles together blended their colors unappealingly.
So I tried sampling each station independently and animating between them.
Finally, I thought might be cool to improve the animation and make it feel like you are riding the train through each station.
The result is pretty far from where I originally envisioned it. I had fun playing with javascript and the p5 library. I wonder if I could realize my original collage idea if there is a method for extracting harmonious colors from different images.
