Perfectly timed...

Shadow Type

3D Printing, Coding

Part I: The Idea

Shadow Type is my first foray into 3D printing and WebGL. My design work has always been heavily type-focused, and in the months leading up to this project, I kept thinking of new and creative ways to manipulate letter forms. Then, I stumbled across the work of Fred Eerdekens, a Belgian artist who works with material, light, and shadow:

Fred Eerdekens installation 1
Fred Eerdekens installation 2

Looking at Eerdekens' work, I wondered: what if the light source was moving? What if only some of the letters and strokes moved with it? What would that look like?

I decided to create a sculpture that casts shadows that create letterforms. In the beginning, I considered creating two sculptures: one that casts the shadow strokes and one that receives those shadows with more strokes carved into its surface. I also considered having two sculptures that both cast shadows onto the wall. Ultimately, I decided to simply create a single sculpture that casts shadows onto itself. Depending on where the light source was coming from, those shadows would either construct or deconstruct the letterforms.

Part II: The Sculpture

Fred Eerdekens

With the help of a friend who is adept in 3D modeling software like ZBrush and Blender, I built a small sculpture with the alphabet. I needed a typeface that had enough strokes pointed the same direction in order to make the effect work, and Helvetica caps has a lot of straight, vertical strokes. To create these "shadow strokes," I designed small blocks to extrude at the top of where each shadow was supposed to fall and varied their heights to control the shadow length.

While working on this project, I was simultaneously studying the works of Yoko Ono (especially her book Grapefruit) and how visual artists use language in their work. Eerdekens also uses original text in his work. But any text I wrote for the sculpture didn't include the diversity of letters I was looking for, and it was always too long to fit on the plaque. That was a major problem because the longer the text, the smaller the letters had to be. This compromised the structural integrity of those extruding blocks which were extremely fragile. The 3D printing studio had to remake the sculpture multiple times because the first few had broken in the machine!

After many software, measuring, and printing fails, I finally had a finished product.

Part III: WebGL

In addition to printing the sculpture, I wanted to simulate the effect of the moving lights by putting my newfound WebGL skills to the test and creating an interactive web animation. Around that same time, I was taking courses in WebGL and learning how to create 3D objects on the web. One of my recent lessons covered lighting and how to move spotlights around a scene.

My ultimate goal was to publish this 3D animation on the web for anyone to interact with, but I hit multiple setbacks along the way. The problem lies with the sheer enormity of the sculpture's JSON file. This is not an unusual JSON file size for a 3D object, but it is for anything you might want to put on the web.

I essentially made three mistakes during this process that led to this difficulty.

Mistake #1: The back of the sculpture is covered in a grainy texture. I don't even know how it happened; ZBrush made it so and I assumed it was a nonissue. But that texture easily added thousands of additional facets and vertices to the JSON file.

Mistake #2: Revisiting this project after some time, I tried editing the JSON file directly. I skimmed through hundreds of thousands of numbers and deleted the ones I thought were associated with the textured back of the sculpture. Codepen crashed. My text editor crashed. My computer wheezed with effort. And I only managed to erase a small section of the back of the sculpture.

Even if my programs didn't crash, it was extremely inefficient sifting through all that data. I finally turned to Blender again to edit the original model. I eventually managed to slice off the back half of the sculpture:

Fred Eerdekens

Mistake #3: After my Blender success, I ran into another problem: evolving technologies. In the time since I first started this project, the Three.js JSON Blender exporter had been deprecated. There are other workarounds, and one day perhaps I'll attempt to find them.

In the meantime, I am able to run the web page locally on my computer where I have recorded myself using the interactive web animation:

I'm thrilled with the success of, and response to, this playful typographic project that got me to experiment with software and mediums I had never touched before. I hope to return to 3D modeling again soon for more typographic work.

More projects like this

Let's work together

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.