Generating Airshells on a Web Browser




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.



    • Creative Misuse Contest

      Creative Misuse Contest
    • Water Contest

      Water Contest
    • Fix It! Contest

      Fix It! Contest

    11 Discussions

    As Cheng suggests in this Instructable:
    Coping, altering and sharing code is allowed in this project.
    So I hacked and did some thinkering and here is some code that works:

    Unzip to a local folder and open index.html in browser. From the site export to obj > In 3d-software:Import in Meshlab > and export to .stl

    Then you can open in Meshmixer

    1 reply

    Nice! Feel free to send a pull request.

    what? how wonderful! Really so gorgeous.


    1 year ago

    Is there any chance that you could post a few STL files for the shells? Thank you!

    I miss the part of generating / downloading too

    These look great, but I'm still confused on how to create the object code. The site allows me to fiddle with parameters, but I don't get how to download 3D object code from it. What am I missing?

    Nature should be the muse of mathematicians, it is sometimes indeed.

    Your work is as lovely as yourself - thank you for sharing your passion and philosophy ?

    These are beautiful!

    Fantastic! Definitely going to print one of these