Iris experiment

I recently found an great article about bezier curves by Mike Kamermans. What made it extra amazing was that all the images were open-sourced, interactive files created with Processing JS. You’re able to follow the mathematics of beziers as well understand how they were executed by reading the code.

His brief about calculating offset curves sparked off this concept of layering. By taking the initial bezier and rotate it about the y axis you get a simple and easily adjustable lathe. Offset curves around a lathe create a beautiful layering effect which add quite a bit of dimension. Using gradient fills instead of solids as subtlety to the shape(s) generated. It’s called Eye primarily because the shapes it was generating once I added the gradient fill looked liked an Eyeball. I think in hindsight, this experiment should be renamed iris and because I have an older flash experiment already named eye.

Update – I’ve renamed it Iris.

This experiment was built in HTML5 using the excellent three.js and dat.gui libraries.

I had a decent understanding of the idea so I set about modifying my base code with 3 distinct parts starting from left to right…

  1. The interactive 2d representation of the bezier.
  2. The rotate-able 3d version of the lathe.
  3. Controls created in dat.gui to modify parameters.

After a few versions I was able to get the bezier code as well as the layering effect working in 2d space. I then started working on the 3d shape, constantly adding and refining more parameters. I Isolated a few parameters which affect the animation of the shape and then spent the rest of the time cleaning and refining. Once the majority of the math was done, I spent time creating different view-able options with lines, particles and eventually fills.

Click the image below to see a progression of work

 
version : 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 | 13 | 14 | 15

I’ve only tested this in chrome so there’s a very good chance it will not work in other browsers due to the needs of WebGL.

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?