Extruded Letters

Creative Coding • p5js
Extruded Letters is an exercise in transcribing letters into 3D forms using a layered scan approach.

extruded grid

Extruded Grid is a creative coding sketch that generated a grid of thin lines and performed gradual transformations as the grid is moved up (or extruded) along the Z axis.

While the individual lines as isolated expressions are barely visible, the grouping, in a grid and along the Z axis, begins to resemble an ethereal form.


The inquiry began as a way to create a stylized ‘F’ for this portfolio website. Using the preexisting code, the extrusion was sectioned off into four parts, with two parts filling out the grid halfway to form the semblance of an F.

This led me to consider other letters that are a bit more complex than an F. Defining an S or a K wouldn’t be feasible unless every segment of the letter was considered.


Slicing is the technique of evaluating an object by considering it one layer at a time. Scanning and 3D printing are common applications using this technique.

In a similar manner, a letter can also be considered as sliced layers. Each layer would contain information about whether a part of the letter is present or not. As in scanning and 3D printing, the more layers, the higher the resolution.
Once all of the letters have been sliced, the data is stored into a JSON format that refers back to the layer information. Rhino and Grasshopper were tools used to automate the process of slicing and compiling JSON files.

The current iteration slices all of the letters of the English alphabet and stores it in a single JSON file. If another font is to be used, the letters would need to be re-sliced and formatted into another JSON file.
The letters are shown upside down to represent the order of the letter drawn from bottom to top


The prepared JSON files are fed back into p5js to generate the extruded letters. Just like the initial Extruded Grid sketch, Extruded Letters generates a grid that transforms as it moves along the Z axis.

As it references the JSON file, the grid on each layer is adapted to the sliced data. Where there exists a part of a letter, it will fill in with lines, while other areas will remain empty. This is performed on a layer by layer basis, starting from the base.


This method works not only for letters, but for any vectorized drawing. If expanded, 3D objects could also be described in this manner.

The steps taken to produce the JSON file can also be web-based, using rasterized images instead to detect where pixels occur and where they don’t.