Tag Search: Generative Design

Cityscape-2
Procedural City
, , , ,

Fly through a cityscape built entirely from algorithms. Each building is randomly generated by manipulating cube geometry. The position, size, and color of the buildings are generated from simplex noise maps. This was built for WebGL using the Three.js library.

View Experiment

Cityscape-1 Cityscape-3 Cityscape-4 Cityscape-5 Cityscape-8 Cityscape-7 Cityscape-6

PerlinShader-6
Perlin Shader
, , , ,

Perlin noise can be used to create a wide variety of imagery. Here we use a fragment shader and Perlin noise to divide a canvas into regions and render different noise patterns in each. The resulting visuals are totally random and constantly evolving. You can also save high-res screenshots from the controls. This shader was written in GLSL and presented with Three.js. Javascript was used to track and evolve the individual regions.

View Experiment

PerlinShader-13 PerlinShader-12 PerlinShader-11 PerlinShader-10 PerlinShader-9 PerlinShader-8 PerlinShader-7 PerlinShader-5 PerlinShader-4 PerlinShader-3 PerlinShader-2 PerlinShader-1

PolygonSubdivision-1506618642249
Polygon Subdivision
, ,

Arbitrary 4-sided polygons are randomly subdivided until a specific size threshold is met. The color of the resulting subdivisions is calculated based on slight deviations to the parent polygon. Made with P5.js.

View Experiment

PolygonSubdivision-1506618568943 PolygonSubdivision-1506618587888 PolygonSubdivision-1506618536509 PolygonSubdivision-1506618503265 PolygonSubdivision-1506618445678 PolygonSubdivision-1506618436036 PolygonSubdivision-1506618371573 PolygonSubdivision-1506618358895 PolygonSubdivision-1506618760012

reactiondiffusion-41
Reaction Diffusion Shader
, , ,

A simulation of two chemicals reacting in a fluid written in GLSL and presented using Three.js.  This experiment was adapted from Daniel Shiffman’s reaction diffusion in Processing tutorial, which was in turn adapted from Karl Sim’s excellent description of the process.

View Experiment

reactiondiffusion-39 reactiondiffusion-36 reactiondiffusion-35 reactiondiffusion-32 reactiondiffusion-30 reactiondiffusion-27 reactiondiffusion-24 reactiondiffusion-22 reactiondiffusion-20 reactiondiffusion-16 reactiondiffusion-13 reactiondiffusion-11 reactiondiffusion-8 reactiondiffusion-5 reactiondiffusion-3

polychain-18
WebGL Polygon Chain
, ,

We’re back in WebGL and Three.js again. We’ve got 300 polygons moving in an oscillating chain. Basic horizontal and vertical symmetry add the special sauce.

View Experiment

polychain-15 polychain-11 polychain-7 polychain-3 polychain-1

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

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.

labs6 labs5 labs3 labs2

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