Playful sandbox app for simulation based generative art
2018-2022
App Promo Site – Live Sketches – Process Gallery – GitHub Universe Showcase
Not quite a serious tool yet much more than just a toy, Microbium intends to be a fun and friendly sandbox for experimentation with simulation based generative art. Designed for simplicity, you will only need to learn one polygon / brush tool to start making interesting art, while much depth in style and motion can be achieved with the flexible rendering and simulating systems. My initial motivation for this project started with a Jellyfish; people really enjoy observing the mesmerizing movements of these forms. This was an experimental project to test some of my ideas for simulation based animation, but the process was very limiting: I had hand-coded procedures for generating and connecting all the parts and components of the form. I wanted a fun tool and better process for myself and for others to experiment more freely, so Microbium came to be.
Soft body jellyfish simulation
2015
Live Project – Source Code – Process Gallery
Starting out as a few simple prototypes to test a realtime physics system I was working on, this project became a bit of an obsession for me as I tinkered with constraints and designed various components of jellyfish anatomy. Being a physically based simulation, minimal input (a user can tap/click the hood to emit a nudging force, and the hood muscles are continuously expanding and contracting) results in complex organic movement which can be quite mesmerizing. As a technical aside, all geometry and physical constraints are procedurally generated through hand-coded methods, which was fairly tedious. In future work, I hope to develop tools for automating or graphically editing simulation constraints to allow quicker iteration on ideas with a balance between creative freedom and technical tedium, making this process more accessible to others as well as my future self.
Surrealist horror voodoo doll; nonsensical phrase generator
2016
Live Project – 3D Model – Source Code – Process Gallery
Spawned in response to (and named after) a Tumblr stream featuring strangely grotesque photo composites, this piece provides a novel interface for generating nonsensical phrases: through interaction with a digital entity conceptually similar to a voodoo doll. Each selection is made by inserting a crystalline needle into the surface of the doll head, creating a string of short phrases over time in order of insertion. Although based on a political figure, I see this experience as an abstract commentary on control and manipulation, as well as an auditory/visual exploration of the grotesque. My initial aim was to develop a system capable of synthesizing arbitrary words and phrases from a limited set of predefined sounds and their corresponding mouth shapes; the final piece is more limited, with predefined words composed of a limited set of primary mouth shapes with accompanying audio. It would be interesting to apply machine learning methodologies to blend mouth shapes based on input syllables; although I currently have limited knowledge of this field, I hope to explore it more as the technology becomes more accessible.
Strange face compositions generated with computer vision
2017
Live Project – Source Code – Composite Gallery
Interactive kinetic sculpture concept
2017
3D Model – Process Gallery
Polygonal webcam toy
2013
Live Project – Source Code
Particle physics micro library
2014
Live Project – Source Code
Global ground water data visualization
2011
Live Project – Source Code
Volumetric AR Performance
Powster / Sam Smith / Spotify
2020
8th Wall, MRCS, Three.js, React, WebGL, GLSL
Live Project – Case Study
An interactive volumetric performance displayed in AR promoting the Diamonds album by Sam Smith.
We worked with a 3D video capture studio to record Sam Smith’s improvisational dancing, which we were then able to play back as a volumetric video in realtime using the MRCS video format. The 3D scene is also unlocked by and tracked to the album artwork for the album on Spotify. I contributed to the creative development of the experience including the shattered diamond interaction mechanic and image tracking flow. I also executed the front-end build including custom refraction shaders for the fragmented diamond effects.
Playful video collage beat pad
Powster / Amazon Prime
2024
Three.js, Howler.js, React, WebGL, GLSL, MediaRecorder
Live Project – Promotional Post
A playful and unique sound and video sampling + beat making interactive experience.
I contributed to the conceptual and creative development of this experience, as well as executed the front-end build of the video collage. I also developed systems for audio and video recording using native browser APIs. Key elements of the experience include recording audio samples with corresponding video and a beat maker with a live rendered cityscape. As a user composes the beat, elements of the collage are composited with the beats video samples, generating a one of a kind video.
Interactive conversational pet cat experience
Powster / Charisma / Dreamworks / Puss in Boots
2023
Charisma.ai, Three.js, React, WebGL, GLSL
Case Study
An interactive conversational pet companion experience that utilizes Charisma AI's character driven story engine.
I executed the front-end build including all the playful and conversational interactions with the users digi-cat as well as the system for generating a unique cat character model for each user based on their answers to a short quiz. One key feature of conversations is speaking animations, which use a custom system that dynamically animates the characters mouth and face using phoneme metadata surfaced by the Charisma API.
Immersive party scene exploration experience
Powster / Bastille
2019
Three.js, React, WebGL, GLSL
Live Project – Case Study
An immersive party scene exploration experience with each room featuring a track from the Doom Days album by Bastille.
We combined traditional 3D modeling with handheld 3D scanning to create the college house party environments for this experience. I contributed to the conceptual and creative development of the experience including the shattered figure alignment mechanic. I also executed the front-end build including several unique material and VFX shaders that make up the surreal spotlight effect as well as other visuals.
AR Minecraft mini-games
Powster / Minecraft / Crocs
2023
8th Wall, Three.js, React, WebGL, GLSL
Live Project – Case Study
A set of Minecraft themed mini-games that are unlocked by scanning the Creeper icon on the Crocs product. I developed the custom image recognition model trained on images of the Creeper icon as well as the platformer style game "Crocs Crossing". The game features an infinitely repeating level system which uses randomly shuffled modular platforms.
Mosaic poster face filter
Powster / Netflix
2023
Meta Spark, Three.js, React, WebGL, GLSL
Live Project – Case Study
A unique face filter built for both web and Instagram that turns the user's selfie into a mosaic poster resembling those promoting the film. I executed the front-end web build as well as the build for Instagram using Meta Spark.
Jump scare hallway scroller
Powster / Bad Robot
2019
Three.js, React, WebGL, GLSL
Case Study
An interactive 3D hallway scroller with jump scare videos that pop up as the user progresses down the hallway. I executed the front-end build including custom distortion vfx and created all 3D assets using texture projection mapping.
Immersive eight-chapter whodunit with hidden games
The Wonderful Company
2017
Backbone, Pixi, Grunt, WebGL, GLSL
Live Project(no longer live)
An immersive eight-chapter whodunit with hidden games where users help Ernie the Elephant track down the missing “nature film” he made with the Squirrel Sisters.
Working with one other frontend developer, I was responsible for leading graphics development as well as establishing the site's architecture and build system and our device responsiveness strategy. Core site features I built include the home page intro, each chapter's interactive panorama scene with hidden clues, games for chapters (2, 4, 6, 7, 8), as well as the campaign finale sequence.