kaleidoscope1
WebGL Kaleidoscope
, ,

WebGL is a super-powerful tool for creative expression on the web, and three.js makes an otherwise obtuse system a pleasure to work with. Here is a kaleidoscope created with WebGL via three.js. It has a number of configurable features including the number of axis and the type of grid used. It also uses environment mapping for a nice reflective effect.

View Kaleidoscope

kaleidoscope2 kaleidoscope3

 

VertexOsc5
Vertex Oscillation Shader
, , ,

Layering a few oscillations can produce dramatic effects. This project uses vertex and fragment shaders written in GLSL with a custom Three.js shader. We begin with a sphere and then send multiple compound waves through each axis via a vertex shader. The fragment shader then uses the offset values to map a color to each vertex. This demo give you control over each modulation wave an the colors used to represent the offsets.

View Experiment

VertexOsc4 VertexOsc6 VertexOsc1 VertexOsc2 VertexOsc3

InfiniteArboretum1
Beautiful Programming
, ,

Beautiful Programming is a collection of generative design experiments made with Processing. I’ve always been fascinated by generative design. At an early age I discovered my grandfather’s old spirograph set in the back corners of a dusty attic. I was amazed at how the combinations of mathematical relationships created different patterns. I’ve since learned how to create these effects using only computer code. What started as a fascination has turned into a life long passion.  These sketches are the descendants of the tiny spirograph doodles I made as a boy.

View Site

CubicSunset3
descentOfColor4
CosmicSoup2
PisciumDraconis1

UzuBack07
UZU iOS App
, ,

What started out as a personal project quickly turned into a full blown iPad app. Uzu is a “Kinetic Multitouch Particle Visualizer”, and it was the first iPad app to utilize all 10 fingers for interaction. Using a custom physics-based particle engine and OpenGL ES, Uzu allows users to manipulate a fully dynamic art light show. The engine is fully customizable and allows users to explore and create their own presets. Uzu won Apple’s App of the Week and was included in Apple’s 2010 App Hall of Fame.

Featured by: Ars Technica , Wired , Chris Pirillo , Beautiful Pixels , This Week In , Mac Stories , Examiner

View in App Store

UzuBack01

UzuBack05 UzuBack06 UzuBack07 UzuBack14 UzuBack17 UzuBack23 UzuBack26 UzuBack30 UzuBack32 UzuBack44

cc2
Creative Confidence
, ,

While working at IDEO, I had the great opportunity to help with the NYC launch party for the book “Creative Confidence” by Tom and David Kelly.  I built some software using processing that simulated painting with a brush. To generate the colors, images were loaded from Instagram that were tagged with #creativeconfidence. Attendees of the party could sit down and paint pictures from the party. A second computer projected images on the wall that were painted dynamically by a brush simulation particle engine. 10 different effects animated and painted while loading various images of the party.

cc8

 

cc7

cc6

 

cc5

 

cc4

 

cc1

 

cc3

ledWallComplete1
LED Infinity Mirror
,

I love flashing lights. All the better if I get to control them. 1 Arduino Mega and 10 meters of RGB LEDs later and we have a prototype for a wall of LED light strips. The eventual hope is to turn the entire thing into an infinity mirror. Then we just sit and stare for hours. It will be great.

ledWallComplete2

ledWallComplete3

 

ledWall2

 

ledWall3

 

ledWallDiagram

 

ledWall4

 

ledWall5

 

ledWall6

masonry3
Masonry+CSS Colors
, ,

While making a prototype using the javascript library Masonry, I came across the full list of CSS colors. The number of colors and the strange names some of them had facinated me, so I chose to integrate them into the demonstration. This prototype UI grabs 5 random colors from the full list of CSS color names, you can then infinite scroll through content and select only the content of a specific color. There is a randomize button in the upper right to select 5 new random colors. Its fun.

View Demo

masonry6

masonry5

masonry4

masonry7

masonry2

masonry8

masonry1

instagram4
Instagram Grid
, ,

I wanted to see if I could make an animated grid of Instagram photos using javascirpt and a little jQuery. It turns out I could, but the real point of the exercise was to see how easy it was to use the Instagram API. This prototype has a rudimentary UI that allows you to change the tag search. You can also control the size of the grid and animation speed.

View Prototype

instagram3

 

instagram2

 

instagram1

labs4
Actionscript Lab
,

Colordoge.com is a personal website. It is a place where I created a number of visual experiments in Actionscript 3. The project represents some of my favorite explorations of visual creativity and demonstrates a number of useful dynamic animation techniques. In a way, this site was the precursor to Uzu, as many of the techniques I use for particle engines and animation came from what I learned during these projects.

View Site

labs6 labs5 labs3 labs2

coconutRun1
Coconut Run
, ,

Johnson Controls hired Colossal Squid Industries to create a new web presence. As part of the site, three games were to be developed to help drive the primary marketing goals – the first game was Coconut Run. In Coconut Run, users can draw their own car and use it to transport coconuts across a challenging terrain. I created the concept, and worked closely with a designer and illustrator, building a robust game that integrated the Box2D physics engine for realistic and fun game play. The game was a viral success, and soon many youtube videos appeared showing off the impressive and hilarious variety of vehicles users had created.

Play Game

littleGreenieTree1
Little Greenie
,

When Scott hired Colossal Squid Industries to build a new web presence, they wanted an interactive web app that would help encourage users to be more “green”. Working with the overall Scott team, I designed and built Little Greenie: a flash-based web app that allows users to choose green promises and plant them as trees in an interactive environment. The engine is a fully realized dynamic genetic plant growing system that contains over a hundred varieties of plants. I created the high variety of plants by having the engine generate random variety, and then choosing the best variations. The entire app content is xml driven and integrates with facebook and twitter.

View Demo

littleGreenie2

littleGreenie1

littleGreenieTree9 littleGreenieTree8 littleGreenieTree7 littleGreenieTree6 littleGreenieTree5 littleGreenieTree2 littleGreenieTree3 littleGreenieTree4

 

rbc1
Root Beer Challenge
,

Root Beer Challenge started off as a root beer taste test. The members of Colossal Squid Industries fancied themselves purveyors of the fine taste of root beer, and thus a “fun project” was born. In an effort to document the event I designed and built a website full of all the charm and wit timelessly associated with root beer. The design includes a tremendous amount of compositing in Photoshop, combined with a fun interface and fluid animation. It was basically the steam punk website I had always wanted to create. The site became an ongoing project, with multiple members of the team contributing assets.

View Demo

rbc2 rbc3 rbc4 rbc5

hungerland1
Hungerland
, ,

While working at Pixel, the creative team was tasked with creating a fun web presence for the Ball Park Franks brand. Hunger Land is a top-down driving game used to explore a world of fun surprises. Users drive a number of vehicles across a crazy world containing deserts, swamps, forests, plains, and ice worlds. I created the initial concept and layout, and I worked with an illustrator to create the map for the fictional Hunger Land. I also built the site – including custom AI, a tunable driving engine, and multiple particle engines.

View Demo

hungerland2 hungerland3 hungerland4 hungerland5

particlePro1
Particle Flow Builder
, ,

The second game in the Johnson Control’s trilogy is Particle Pro. Particle Pro allows you to take control over the energy use of a home by directing the flow of particles using various tools. The Box2d engine is again used as the base for the physics engine, and a number of tools were created to bounce, funnel, slow, accelerate, and redirect particles. I contributed to the concept and worked with a designer and illustrator to build the final product.

Play Game

particlePro2 particlePro3

piggy1
The Piggy Contraption
,

The third and final game in the Johnson Controls series has you tossing a pig around your own fantastic contraption. The game asks users to get a pig to the top of a tower by drawing with tools that do a variety of things: platforms, launch pads, cushions, conveyor belts, and trampolines. Box2D is again used for the physics engine, and an another team member provided the graphic design and illustration. Of the three Johnson Control games, this one is by far the most hilarious.

Play Game

piggy2 piggy3

darkKnight2
Mattel Toys – The Dark Knight
,

While working at Pixel, I was excited to be a part of the launch of the toy campaign for “The Dark Knight”. Mattel wanted a banner campaign that would engage children and help them learn about the new toys surrounding the Movie. I designed and created a banner bursting with animation and flair. The client was extremely pleased and the campaign generated 4 times the normal number of impressions.

View Demo

darkKnight

legoCastle3
LEGO Castle
,

Lego wanted Pixel to create a banner campaign highlighting the Lego Castle brand, and bringing attention to the game Lego created to go along with the series. I designed and build an in-banner game based off the assets from the original. The result was a tiny, fun, and addicting web game that gave Lego Castle the attention it deserved. Click the catapult to launch boulders at the approaching army – survive as long as you can.

Play Game

legoCastle4

marsMission
LEGO Mars Mission
,

Lego again came to Pixel wanting a fun in-banner version of a game they created for their Lego Mars Mission brand. Using the assets from the original Mars Mission game, I designed and built a small banner game that let users shoot at passing waves of enemies. The project made heavy use of trigonometry to dictate the paths of the AI vehicles. Point and shoot.

Play Game

marsMission2