Introduction: Generating Airshells on a Web Browser

Intricate natural forms emerge from simple logic. Small change in the logic results in incredible variations. Snowflakes, tree branches, seashells, these are all fascinating natural formation with infinite possibilities.

I created a series of 'airshells', shells that mimic the logic of seashell formation, for Tilandsia, or air plants. You can make your own using my webpage at

Step 1: Why Seashell

A year ago I read The Sixth Extinction ( In one chapter called "Dropping Acid", I read how the current acidification of ocean makes calcification of corals and shells difficult, and might cause the extinction of the beautiful creatures. It's painful to imagine the loss, and I feel I need to do something about it. Something that captures the beauty and uniqueness of the shells.

Image from Dr. Claudine Hauri, Modeling ocean acidification in the

California Current System,

Step 2: Why Browser

I've been an avid processing user, although sometimes I find it hard to share the work with someone far away, without giving an one hour lecture first on how to run Processing apps.

Web page solves that problem. Anyone with internet access can browse away, creating their unique shells. Although Processing js is on its way, this round I gave THREE JS a try, and it worked smoothly for displaying the intricate 3D forms on a web browser.

Step 3: The Math

Shells are the exoskeleton of the animal inside. This animal forms a circle of material around it that accumulates into a protective shell. If the circle is perfect, over time it'd extrude into a tube. If one side of the circle grows constantly more than the other, it turns into a donut.

But the animal grows too. As it gets bigger, the circle it extrudes enlarges, and the donut tube starts to taper. Let that donut grow as it enlarges in your mind. It forms a shell.

To put that mental experiment into computer understandable words, I followed this excellent paper for the algorithm of shell growth

  • Seashells: the Plainness and Beauty of Their Mathematical Description

along with the implementation from

plus awesome THREE JS master Marpi

and a triangle master piece from Reza Ali

That's right! Good artists borrow, great artists steal.

The result is a webpage you can generate your airshell and access the code from

Step 4: Find a Home for the Airplants

With the webpage at hand, you're now ready to start building your air plants a new home.

Start with the plants. Find one that has lovely curvy lines that goes with the shell. Or loose strings that spread out like a jellyfish. Or whichever one that catches your eyes. Observe the plant, find features to put in the air shell that would echo your plant.

I like printing out a few variations from the webpage out, and find the match. Colliding digital 2D and physical 3D is a bit counter-intuitive, and I hope to change that process with Augmented Reality soon.

Step 5: Print! and Print Again!

After the first print, you might realize that you have to go back and change the design of the shell, as each material handles differently. For some, you'd need to consider the overhang. For others, you need to consider how to get support material out of the tricky geometry. The physicality will push back on your digital design. This is a most frustrating yet really awarding process, as you learn to dial in each machine...

(Images here compare a print from ember and a print from fortus)

Step 6: Assemble

Now put your air plant into the shell!

I also made some custom stands for the airshells so they stand in the air.

Design Now: 3D Design Contest 2016

Participated in the
Design Now: 3D Design Contest 2016

Homemade Gifts Contest 2016

Participated in the
Homemade Gifts Contest 2016