# Reverse Engineering Tessellation Poster

Today I’m showing how I recreated Giovanni Pintori’s poster “Numbers”.

First off, I analyzed the poster and I noticed that Giovanni Pintori achieved the overall look of this poster by creating a tessellation with random numbers. He used multiple fonts and random font sizes, but most of the fonts he used are bold, filling as much of the canvas as possible. He also positioned the numbers so that they are as close to others as possible, but never overlaps with others. He filled the voids in between large texts with smaller texts, and the way he determines overlapping is by checking against the actual shape of the texts.

Because of the non-grid random tessellation nature of the poster, I thought of poisson disk sampling algorithm and used it to fill up the canvas by randomly positioned circles, and just leave the problem of modifying the algorithm to work with texts until later.

Then I started working on the color pattern of the random numbers. I noticed that the distribution of color follows two rules: 1) the canvas is vertically partitioned by some random curves, and each section is colored using an analogous color scheme. 2) within each section there are some small connected areas where the numbers are colored differently.

I wanted to first deal with the small areas because they look like peaks in a height map. I believed that I could create a 2D height map using perlin noise, sample it and obtain those areas by comparing the sample to a cutoff value. I first generated a 256*358 noise texture using a javascritp library texgen.js:

Then I was able to color the circles with a predefined palette by sampling the noise texture and equally partitioning in the vertical direction.

To create the organic boundaries of color bands, I created some curves with perlin noise and made it match the characteristics of the boundaries in the original poster.

After randomly offsetting the curves vertically to give the bands different heights, I made the color bands follow the curve boundaries.

From now on, I started replacing the circles with texts. To modify the poisson disk sampling algorithm so that it work with text, I have to figure out a way of collision testing for text. Since the algorithm runs hundreds if not thousands of passes for each sample point, it’s computational expensive to use the actual polygonal shape of the text as collision bounds. I decided to use bounding rectangles created based on empirical calculations.

It looked like this using rectangular bounding box and the naive poisson disk sampling algorithm.

I modified the algorithm so that it uses the bounding box of text to do distance calculation and collision testing.

With height map and noise curve aided color assignment and modified poisson disk sampling algorithm, I recreated the poster that looks very similar to the original piece.

Code:

// A computational approach to Giovanni Pintori's poster "Numbers" |