Category threejs

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.

A Cooper Union mark variant in HTML5

I’ve always made a distinction between client-work and personal-work. Sometimes we make choices which prevents us from using a particular technology or an effect in favor of accommodating for the largest viewing audience. I chose to do it in HTML5 instead of flash not because of any particular argument over which technology is better. I’ve worked in flash for years and there wouldn’t be anything relatively new to learn. 3D in HTML5 and was something new to me and one of the best ways to learn new things is to force-ably throw yourself into a project.

If Murphy’s Law came into effect, I can always revert to a flash solution. As it turned out, browser compatibility issues prevented it from looking correct and the HTML5 version was scrapped for an entirely flash based solution.

Once the project was completed, I didn’t want to loose all that effort I spent on the HTML5 iteration so I slowly reformatted the original code using the latest version of Three.js and dat.gui, a framework that easily allowed you to modify parameters contained within a panel.

On a logistical note, I’m hesitant about naming it as the cooper union mark because of the alterations I’ve made to the original design, like the reintroduction of perspective and the addition of cube geometry. So for now, I’d like to call it a variant. Below are a few more randomly generated variants.