Generative Typography for exquisite corpse project for Adobe
I recently participated in an Exquisite Corpse project at Adobe for an illustration that is now decorating the renovated first floor at Adobe on 601 Townsend street in San Francisco.
I created my contribution as a two dimentional piece (I have done mostly 3D work recently), using generative typography (i.e., applying generative art to a typographic challenge). This gave me a chance to get back to doing SVG programming, which is a lot of fun!
The process can be summarized as shown in the following figure.
On the left is the type I was given to illustrate. Using code, I applied an algorithm which scanned the type and generated the result to the right.
The algorithm is simple and can be broken down into the following steps. The implementation does not follow these steps exactly, but the steps do represent the logical process that is applied.
Step 1: Scan the type to figure out which positions are in or out of the type
In this step, the input type is converted to a regular grid of points that are either in or out. The following illustration shows the result of that step.
To allow bleeding beyond the geometry I was given, the type is place in a larger artboard. The dashed box represents the target aboard space. The hollow circles show where the grid cell center does not intersect the type. The red dots show where the center intersects the type.
Step 2: Introducing random sizing
The following figure shows how we can use that initial 'hit map' to generate something that starts to be interesting. Here, a random scale is applied to the dots placed into the grid cells. The three renderings show different iteration of the algorithm, each iteration producing a different result.
Now, let apply more randomness to make the composition look less like a regular grid.
Step 3: Introducing more organic randomness
This step introduces a very simple variation, making the random scale applied to the cell's marker (the dots) cover a wider range, allowing the markers to expand beyond the boundary of the grid cell, creating random overlaps from one cell to the other. Again, three iterations of the algorithm are shown below.
Step 4: Generating random shapes
In this step, we replace the simple circle markers with a leaf-like shape that is randomly generated.
On the left image below, notice how each shape, while similar, is slightly different. This is done by applying a little bit of randomness to the code that generates each leaf. The right image shows the result when the same random scale is applied to the leaves, as it was to circles in the previous step. As you can notice, the regular 'direction of the leaves make it a little too regular again.
Step 5: Random rotation
To create a more organic feel again, the algorithm now applies a random rotation to each leaf. Multiple iterations are shown below.
Step 6: Random Colors
We are turning to coloring the composition. You can see below how the colors on the light leaves are slightly different. This is accomplished by randomly introducing small variations in the lightness of the color applied to these leaves.
One issue with the results below is that the shape is naturally meant to connect to the right and is truly expanding beyond the box. By working with the clipped shape, we are not getting any leaf bleeding over the the shape to the left, and this produces a less appealing result. Step 7 addresses that issue.
Step 7: Better right-edge cut-off
To allow shapes to bleed from the right of the target artboard, I replace the initial shape with the full curve for the 'S' shape. As illustrated below, it produces a fuller set of leaves to the right of the artboard box (light dark rectangle).
The following images were generated as variations from the same basic process, using different shapes and color scheme. I will publish a project with more of those soon.