Category html5

Lily pad experiment


Lily pad is an experiment that explores paper folding inspired by the form of a lily pad floating on top of water.


A while back, I was looking at some pendant lamps and came across these really beautiful ones on Esty from Nellianna. I was really interested in the paper folded pattern from the shade and spent some time creating it from scratch. (As an aside, designer lamps are a great source of inspiration for algorithmic art forms)

I figured the flat facets of paper translated easily to the 3d world… or so I thought. I jumped directly to code, manipulating particles that represented each corner of the lamp. However, once a 3d mesh was skinned over the particles, the facets started misbehaving, randomly flipping for no reason whatsoever. Nothing worked even after countless hours of code debugging.


I took a step back and decided the only good way to understand how the facets worked was to create a tangible model. Using paper and some tape, I built each horizontal band of the lamp one at a time. Once the bands were taped together, it only dawned on me that the creases of the lower folds were from a completely different pattern than the repeating ones causing more confusion. With that out of the way, it was a simple manner of ignoring the lower band, unfolding the paper model to examine the crease lines and replicating those facets with code. I’m sure it can be optimized for better performance or clarity but it worked well enough for what I wanted it to do.


I finally created a usable pattern but didn’t have an interesting enough shape to apply that pattern to. I started with my old standby, the cylinder/cone shape as a starting point which eventually evolved to the flattened look below.


Normally adding perlin noise gives it a natural feel but it proved to be trickier than I expected. When a ‘wave’ travels across the side of the shape, it abruptly ends, causing a very noticeable animation seam. Luckily I found this great tutorial here which uses 3d perlin noise to generate a seamless wrap around a cylinder. I plan on using this workaround on a few more experiments in the future.


When I normally create these code experiments, it would start of as a specific idea and evolve over time. The pattern itself was cool but it wasn’t grounded to any particular concept. The name came much later on as I was randomizing a few parameters. The shape flattened into a pancake which poke through the ground creating what looked like a lilypad. Adding lighting and shadows gave it a sense of realism.


I recently started using github to create this experiment. Feel free to fork.

credits below
Three.js 3D framework.
Dat-gui gui framework.
jstween for animation.
@moebio for introducing me to paper folding.

Drop experiment

Drop is a new experiment that explores a droplet shape and it’s associated views in 3d space. Click and drag to rotate the shape. Alternatively, you can use the scroll wheel or right click and drag to move the shape to a particular view. Audio is set to ‘They Move On Tracks Of Never-Ending Light’ by This Will Destroy You.

You can view the debug version and all the 25 iterations here

I’ve had this idea of a droplet of water following a line for a while but I was never quite sure of how the line would behave. Creating lines that would meander around a center line would tie in the droplet idea nicely. The aha moment came when I realized that meandering line code and the droplet code were really just variations off of the same idea, a series of points that orbit around a center point.


One of the bigger roadblocks with creating 3d work is visualizing ideas. Sometimes ideas have complex moving parts and it’s hard to focus on a particular transformation. Sketching on paper is quick and painless but I constantly have to draw the same thing at different angles to see a complete picture. 3d modeling apps are great but they all feel unwieldy, like using a sledgehammer on a push pin (If anyone can recommend a simple intuitive one that works on an iPad that would be great). Instead I opted to build a simple ‘sketch’ using bendy straws, a hole puncher and some markers. It worked much better than expected and from now on, any new experiment will require raiding my fiancé’s craft closet.


Creating the center line was relatively easy. I used perlin noise to create and update the shape of the line. The meandering line was a little more involved which required the use of my bendy straw model.


The position of the droplets along the string was more involved than I expected. To create a smooth motion, you had to interpolate between the points of a line. On top of that you had to loop the droplet back to make it happen again. Creating the droplet shape required some research on wiki-ing. I’ve been using waves to create similar shapes but using Gaussian functions provides a little more flexibility.


My recent experiments can be divided into 2 parts. The first part uses math to create and parse data in real time. The second part draws different shapes based off of that data. Some of these views draw connections with each other, creating smooth connected lines while others take all points and use it to create a smooth shape. The hardest part of this step was the editing process.

At first I envisioned a toggle allowing you to switch from one view to another but after clicking through some of the Three.js examples (specifically the multiple canvases example), it was much more interesting to show all views at the same time side by side.

credits below
Three.js 3D framework.
Dat-gui gui framework.
jstween for animation.
Web Audio for audio data.
‘They Move On Tracks Of Never-Ending Light’
by This Will Destroy You

Unfold experiment

This experiment came from watching a PBS documentary called “Between the Folds” a film about the history of Origami. I wanted to build something that started off as a single piece of paper which would transform into a randomly generated shape.

The paper (or ‘plane’ in 3D terms) consisted of a bunch of points which rotated along a single axis. It looked okay but it felt too uniformed so I started varying the amount of rotation a point has to travel. Once the travel distance was tied with how close it was to the axis, things started to look pretty.

As I iterated on the look and feel, the original concept of origami became lost. To (kinda) bring it back, I added the ability to ‘unfold’ the shape back to the flattened paper plane. A few lighting effects (recommended by Nicolas Belmonte) and some algorithmic color materials later and we have unfold.

versions : 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12

credits below

Three.js 3D framework
Dat-gui gui framework.
jstween for animation

Pillbug experiment

This experiment tries to replicate the defensive and passive postures of an Armadillidiidae. Since I don’t know how to spell or even pronounce armadillidiidae, renaming this to “pillbug” made much more sense.

The pillbug experiment has 2 modes; the passive, open mode which feels airy and colorful and the defensive mode collapses into a dark ball for protection. The animation is known as conglobation (thanks wikipedia!). In keeping with the use of audio in my work, I made both modes react differently with sound data (Arabesque by DeBussy), ripples in the open mode, spikes in the closed mode.

In my early sketches, I focused specifically on the notion of a hood comprised of overlapping bands. The bands would independently pivot from a central hinge similar to an overhead awning. I wanted to continue the covering metaphor in 3d space so I had envisioned a similar behavior for the front side like a paper fan.

When I started working on the code the outcome was surprisingly spherical. The pillbug idea was instantly obvious once I started messing with the parameters (via sliders).

Design and technology conferences always provide a great deal of motivation for creating new work. The eyeofestival in Minneapolis was a week away so I figured that would be a great time to fully explore the pillbug idea while meeting awesome people and listening to inspiring presentations.

Using the framework I cobbled together in my last experiment I was able to get a working prototype pretty quickly. Once the pillbug idea started to germinate, I started playing with the surface of the shape, moving points around to create a gap like the shell sections of the pillbug. Messing with the parameters that affected the sections created interesting spikes which emphasized the defensive mode of the pillbug.

versions : 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 | 13 | 1415

credits below

Three.js 3D framework
Dat-gui gui framework.
jstween for animation
Arabesque by DeBussy
web audio
Photo Credits

Disc experiment

Recently I’ve been exploring shapes and forms generated by algorithms. Sometimes I have a shape in mind and execute accordingly. This time I took a different approach.

The disc experiment is an exploration of a simple shape, the arc. I know I wanted the arc to be able to transform and I know I wanted it to exist in 3D space. After a few iterations I came upon this general shape.

A tweet from Felix Turner mentioned I should hook it up to web Audio a simple audio component of chrome with some ability to analyze sound data in real time, similar to a sound based experiment’s i’ve tried before. The data was too complex to accurately relate the sound to the visual so after a few iterations, I blatantly copied what Felix did and averaged the data into 1 parameter to make it easier to understand. I recently got into a classical music phase and found myself using Claire De Lune by DeBussy to provide the data.

versions : 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09

credits below

Loop Waveform Visualizer by Felix Turner

Three.js 3D framework

Dat-gui gui framework.

jstween for animation

Claire De Lune by DeBussy