Creative coding: experimenting with Skyscrapers

I dived into creative coding to explore mixing various interests including programming, architecture/design and printing/plotting. In this story, I show early experiments and share thoughts on the generative process and tools.

Experiment Objective

This first experiment deals with the generation of a grid of skyscrapers drawn with striped cubes of various heights. A custom computer code generates the skyscraper model and renders it according to various parameters. Parameters that can be configured include model size and vantage point locations. The code also includes some level of randomness to grow skyscrapers organically from the base. This is where it gets interesting as you plan the overall structure of the model but randomness brings its lot of surprises that you only discover when the code completes and you look at the generated images.

A requirement for this experiment is the ability to draw the design with a mechanical plotter (not done yet but will likely be done on an Axidraw plotter or any other similar machine). For this, the output format needs to support a vector file format such as SVG, instead of typical image formats such as PNG or jpg.

Generative Process

I drafted a few designs on paper and started a quest on tools that could help me to produce designs. After exploring a few tools, I ended up using a Line Art library called LN, developed by Michael Fogleman. This library is available for the Go programming language so this is the language I ended up using.

Once the basic code framework was in place, I played with various parameters to change the model size, vantage point locations and the way the algorithm is implemented to grow skyscrapers from their base. The code starts from a large grid of 100x100. Starting from the bottom, each level, a square, is sliced into four equal parts and each slice hosts either a vertical block of random height or is recursively sliced into four additional slices. The process stops when all generated slices are small enough or the model reaches a predefined maximum height.

Rendering the output images is demanding on my Macbook pro. It takes a good 5 to 10 minutes to render two images as shown below with the processor fan spinning as I never heard before. I typically generate a batch of 10 pairs of images (same model with two vantage points). For each pair of images generated I keep the vantage point configuration (eye position and where the eye is looking at) along with the seed for the generation of random numbers. The seed dictates how the random number generator creates the series of random number required for the creation of the model. The seed is an important predefined parameter as it is required to re-generate the same model later (with optionally a variation of other non-random predefined parameters). For the generation of a completely new model, the computer code uses the date and time when the code execution started as the seed.

Once I have all images generated, I scan them all manually and make a selection of the most appealing. This is obviously a very subjective curation process. For the selected images pairs, I insert them into an architecture-like layout along with technical information such as seed, viewpoint information and generation date.

Designs can be drawn with a mechanical plotter such as the Axidraw plotter. I use different sorts of pens (Sharpie ultra fine point and Pilot v5) on smooth Bristol paper.

Tools: Sketchup, P5.js and Processing

I ended using the Go programming language with the Line Art library introduced earlier. The choice of the language was made because of the library being available for Go. I am usually not tight to a given programming language in particular, I just pick up the one that is most convenient for the experiment.

Previously, I generated similar designs with the 3D modeling tool SketchUp. SketchUp is a powerful 3D modeling tool and the fact that you can extend it with code makes it very interesting for a creative coder exploring 3D geometry.

I also explored the Javascript library P5.js. P5.js is a great library for experimenting with web technologies. I managed to generate a few 3D design but I struggled with the generation of SVG file formats. Note that the Line Art library I used has recently been ported to P5.js but I have not explored that part yet.

Processing is also in my list of tools to explore 3D geometry. I managed to generated skyscraper models but, like P5.js, I faced issues with the generation of SVG files. One of the major issues I face was that lines, which are not visible because hidden by a block, are not shown on screen but are integrated into the SVG output. The Line Art library by Michael Fogleman provides a solution by only outputting lines which are visible in the model rendering.

Next Steps

I definitely learned a lot during these experiments and I hope you found this story useful. My next steps will be to enhance the generation of the model and to plot a selection of the designs with a mechanical plotters. So stay tuned for more to come.

Feel free to download the code from Github and make your own experiments. Visit my online studio to see latest plots at g6.studio.