Category case study

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

Case Study: An interactive brand for the Cooper Union

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


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.



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%.