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.

Case Study: An interactive brand for the Cooper Union

Created in flash using PV3D. Roll over to change the logo.
 

DESIGN SYSTEM

I’ve done a few dynamic logos in the past and have always had a bit of fun making them. So when my friends over at Behavior asked me to help out with creating one for the Cooper Union to coincide with their new site, it was impossible to say no. The logo itself (created by Doyle Partners) was a series of planes that were organized in an isometric-looking view that had so much potential for 3D motion.

The mark centers around an abstracted ‘C’ and ‘U’ intertwined in orthogonal space. We wanted the mark to deconstruct itself to it’s basic form of 2D planes which then form to create a composition. We wanted the composition to be randomly generated so what we needed to do was isolate specific parameters (like rotation and distance) that radically changes its look and feel. To do that we need to create a generative design system.

Once we found the parameters, it took a matter of trial and error to clamp which values looked good. For anything rotation related, we choose angles incremented to 45° while position based parameters are numbers divisible by 20. The Cooper Union mark is actually a variation generated using these parameters. After that, it was just a matter of animating these parameters from one set to another using tweening equations. The last thing we did was extend the animation back to the original mark by adding delays between each tweened parameter. On a side note, I do remember having fun changing the speeds to sync up with the tranformers’s transforming sound.

 

HTML vs FLASH

I’ve had some minor success with learning canvas recently and thought this would be a great way to dive into Three.js, Mr. doob’s 3D framework. For compatibility’s sake I ditched the WegGLRenderer in favor of the CanvasRenderer so it would work in all modern browsers and devices. For the most part, most of my preliminary tests work and so i moved forward with building it it in HTML.


Preliminary test done in Canvas using Three.js

Design system in Canvas using Three.js and jQueryUI

Everything was going splendidly until I hit a nasty roadblock that completely derailed the use of HTML, layer effects compatibility. It wasn’t supported in IE or Firefox and every hack I tried didn’t work or suffered massive performance issues. Removing the multiple/subtractive effects wasn’t an option because it was integral to the branding so there was no other recourse but to sandbag HTML in favor of Flash’s ubiquity among browsers. If i had to sacrifice anything it would be the user experience on mobile devices (who are already accustomed to it and won’t think much of it) than over half of all modern browsers. The final interactive brand was built with flash 10, using PaperVision3D.

A nice outcome of this was learning about perspective nomenclature. The Cooper Union mark is a non foreshortened, oblique projection with a 45 degree rotation. PaperVision3D nor Three.js had that particular angle configuration so I had to hack it by using an orthogonal camera position and using trial and error. I believe the closest approximation to the brand required squeezing the stage/canvas width a by 15%.

wormy experiment

This experiment was an offshoot from my previous experiment where I wanted to create a simple following formation rather than the circular one that arc had.

This particular experiment was unusual in that I didn’t really have a clear goal in mind. I was trying to solve a particular geometry problem. One iteration led to another which led to another. The end result was just a cleanup of all the iterations so you can see the inner workings. My fiancee wanted to name it colon but I had to veto an name it something more professional like wormy.

I’m slowly learning more about about html5, and I’m finally at a point where I can express some of these ideas at the same fidelity that I had with flash and processing. The reality is that it wouldn’t be possible without some of the open source frameworks available. For this experiment, I use jquery, jqueryui, seb’s vector class and had help from mr elstob.

Iterations
version 01
version 02
version 03
version 04
version 05
version 06
version 07
version 08
version 09
version 10
version 11
version 12
version 13
version 14
version 15
version 16
version 17

arc experiment

I’ve been drawing circles with code for quite a little while now.
For the most part, I’ve been drawing them using a simple sinusoidal equation which I’ve used a ridiculous amount of times.


for(i=0;i<total;i++){
    var percentage = i/total*Math.PI / 180
    var xPos = Math.cos(percentage) * radius + offsetX;
    var yPos = Math.sin(percentage) * radius + offsetY;
    // do stuff with values
}

You don’t have to fully understand trigonometry (although it does help if you do). Plug in some values that change the parameters and you can easily modify code. However, once I started to create arcs, this proved to cause a whole mess of issues, the biggest when determining when to rotate clockwise vs counterclockwise. From my understanding, the sin/cos functions are smart enough to get a range from 0-360°. Once you go pass that, the values reset back to 0°. You can keep track of it using states but the values keep getting clobbered. It’s like the the tall man, small blanket problem. Covering your head makes your feet cold and covering your feet makes your head cold. I wasn’t smart enough to figure this out so I sat on it for a few months, then a few years, I’ve tried tackling this a few times but I’ve always ended up using a workaround instead.

Cut away to a month back. I was reading a post about drawing arcs and circles without using sine and cosine in the main loop. I believe the purpose was to skip trigonometry which can be processing intensive.

var da = (endPositionInRads - startPositionInRads); // distance angle
var ss = 45; // segmenet spacing
var rs = (Math.abs(da) / (Math.PI * 2) * ss); // real segments
var tm = Math.tan(da / real_segments); // tangent multiplier
var rm = 1 - Math.cos(da / real_segments); //radial multiplier

// first position uses sinusoidal
var xPos = Math.cos(startPositionInRads) * radius + offsetX;
var yPos = Math.sin(startPositionInRads) * radius + offsetY;
var tx; // transitionX
var ty; // transitionY
for (i = 0; i < rs; i++) {
    tx = -(yPos - offsetY);
    ty = xPos - offsetX;
    xPos += tx * tm;
    yPos += ty * tm;
    xPos += (offsetX - xPos) * rm;
    yPos += (offsetY - yPos) * rm;
    // do stuff with values
}

(The code is a little larger but it works)

I didn’t think much of it at first. I’ve actually used it before just for the sake of using it. Going back to the arc problem again, I realized that a simple way to not get the modulus 360° problem was to not use sine and cosines at all. Sure enough it worked and the results of that can be seen below.


(left image uses trig, right image just uses math)

I’ve been completely reliant on using sines and cosines for the pass decade that it actually prevented me from doing what I wanted to do. I think I’m going to revisit a few old experiments that I’ve never published due to code complexity and take a look at it from a different perspective. All the iterations can be found below.

version 01
version 02
version 03
version 04
version 05
version 06
version 07
version 08
version 09
version 10