Nymph

Applying vertex deformations to a mesh. Click to randomize parameters and move camera. Post Processing via color grading and barrel blur. Model is ‘Nymph’ by John Gibson.

View Online →

  • Date: Jul 2018
  • Category: Demos

ShaderToy Explorations

Some GLSL pixel shader explorations published on ShaderToy. Source code is available. Part of my ongoing effort to learn GLSL shaders.

View Online →

  • Date: Jul 2017
  • Category: Demos

Ribbons

An experiment in ambient generative art, built to run as wallpaper. Colors and geometry are procedurally generated so each view is different. Using custom shaders for post-processing. Built with WebGL, three.js and GLSL shaders.

View Online →

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

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

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

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

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

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

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

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

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

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

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

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