Demos

Ripple Clock

Using Perlin noise to simulate wind ripples on cloth. Writing dynmic text to webGL texture via canvas.

View Online →

  • Date: Jun 2016
  • Category: Demos
  • Role: DESIGN & DEVELOPMENT

EMSX Controller

A WebGL UI Demo based on a design by Nicolas Lopardo. Using simple geometry with hi-res textures and a custom tilt-shift shader. Use scroll wheel to twist.

View Online →

  • Date: Feb 2016
  • Category: Demos
  • Role: DEVELOPMENT

Noise Field Ribbons

Ribbons driven by a 4D noise field. Using WebGL, Three.js. Use mouse to zoom and rotate. Use control panel to modify ribbon behavior.

View Online →

  • Date: Nov 2015
  • Category: Demos
  • Role: DESIGN & DEVELOPMENT

Mosh

MOSH is a web app to apply creative ‘glitch’ filters to images and web cam input. Uses Three.js and custom GLSL shaders to stack multiple effects on to an image. Save results as still images or animated gifs. Featured on Creators Project, Product Hunt, Reddit, Codrops, and Chrome Experiments.

View Online →

  • Date: May 2015
  • Category: Demos
  • Role: DESIGN & DEVELOPMENT

Winter Rush

A  simple WebGL game that runs well on mobile devices. View the blog post including source code.

View Online →

  • Date: Jan 2015
  • Category: Demos
  • Role: DESIGN & DEVELOPMENT

Nero – In the Way

A dubstep music visualizer for Nero’s In the Way. Featuring custom shaders, vertex displacement and lots of strobe. Stick around for the drop.

View Online →

  • Date: Jan 2015
  • Category: Demos
  • Role: Design & Development

Confessions

Music Visualizer, using WebGL and Web Audio API. Using a custom audio-reactive shader to draw lines and dots onto a 3D mesh. Mesh vertices are displaced by perlin noise based on audio level. Hit ‘q’ for control panel. Built with three.js.

View Online →

  • Date: Jun 2014
  • Category: Demos
  • Role: Design & Development

Word Problems

3D Music Visualizer. Using WebGL and the Web Audio API. Renders frequency range levels as 3D colored strips. The time period of the stripes movement is set to the BPM of the song. Beat detection is used to transition the camera angle and fire a custom Bad TV pixel shader.

View Online →

  • Date: Nov 2013
  • Category: Demos
  • Role: Design & Development

Pareidolia

A WebGL Audio Visualizer. Use microphone or drop MP3 file. Set volume sensitivty, cube speed and control visuals with the mouse.

View Online →

  • Date: Mar 2013
  • Category: Demos
  • Role: Design & Development

Bad TV Shader

Custom Pixel Shader simulates a bad TV via horizontal distortion and vertical roll, using Ashima WebGL Noise. Click to randomize uniforms.

View Online →

  • Date: Feb 2013
  • Category: Demos
  • Role: Development

WebCamMesh

Connects HTML5 WebCam input to a WebGL 3D Mesh. It creates a 3D depth map by mapping pixel brightness to Z-depth. Perlin noise is used for the ripple effect and CSS3 filters are used for color effects. Use mouse move to tilt and scroll wheel to zoom.

View Online →

  • Date: Oct 2012
  • Category: Demos
  • Role: Design & Development

Loop Waveform Visualizer

Audio Reactive Waveform via Web Audio API and Three.js. Uses a combination of audio waveform and frequency data to create a live visualization of a track. Drag in any MP3 to see it visualized.

View Online →

  • Date: Oct 2012
  • Category: Demos
  • Role: Design & Development

Rutt-Etra-Izer

Rutt-Etra-Izer is a WebGL emulation of the classic Rutt-Etra video synthesizer. This demo replicates the Z-displacement, scanned-line look of the original, and allows you to drag and drop your own images, manipulate them and save the output.

View Online →

  • Date: Jun 2011
  • Category: Demos

More WebGL Demos

A collection of recent WebGL demos featuring audio-reactive animations, shaders, perlin noise and webcam interactivity. Mostly built using Three.js.

View Online →

  • Date: Oct 2009
  • Category: Demos
  • Role: DEVELOPMENT AND DESIGN

Flickr Related Tag Browser

Enables user to surf Flickr’s ‘tag space’. Each tag has a list of ‘related’ tags, based on clustered usage analysis. Features a zooming Flash UI.

View Online →

  • Date: Mar 2005
  • Category: Demos
  • Role: Design and development