Lily pad experiment

hero

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

lamp

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.

paper

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.

v2

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.

v3

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.

screenshot_01

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.

comparison

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.

Trackbacks

One Trackback

Add Your Comments

Disclaimer
Your email is never published nor shared.
Required
Required
Tips

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <ol> <ul> <li> <strong>

Ready?