Pharm Phresh is the juiciest music launchpad on the internet. Users can create beats or watch the fruits dance to Nice Feeling's "Fresh." We built the application with Three.js and implemented the loops/sounds with the Web Audio API. I also wrote some custom shaders in GLSL to achieve a pixelation and wavified effect in the music video. Role: project lead and developer. FWA of the day 01/04/17.

I worked on design/development for lahacks.com. Users create an account and apply for the hackathon using our custom application form. We used React/Redux to implement the user application form and an internal system for admins to grade applications. The full site is available below.

This is where I put all my WebGL sketches/experiments. Topics covered in here include: shape generation using Perlin noise/fractal brownian motion, particle systems, image distortion, procedurally-generated terrain, music visualization, instancing and morph targets.

I recently wrote a pixel shader for the Three.js library. The shader is used for post processing scenes and is written in GLSL. I also included an example of its use.

Simple music visualizer/particle system. The particles morph into different objects when you click on them and react to the music as it plays. To morph the objects, I fed an array of vertex positions and morph targets to a vertex shader and interpolated the vertex positions. I then updated the morph targets each time the object changed shapes.

ACM is the largest computer science organization at UCLA. As a designer for ACM, I worked on developing its brand and crafting a styleguide for things like the website, banners and other ACM-related assets.

Creative Labs hosted a portfolio building workshop in which we taught beginner web developers how to build their own portfolio site. I built a simple template for them to use, where they can put their personal proejcts.

As a web developer at John McNeil Studio, I worked on the Annex's home page and a 360 VR experience for CA Technologies. We used Threejs to build the experience.

Birthday present I made for my mom. "Xin" means "heart" in Chinese, and there are three because my mom has three sons. Each "heart" character shows a memory/quote I have of her when you click on it. I used Threejs to import the "heart" character model, then wrote some cool-looking fragment shaders for each heart. Some of the fragment shaders are from Shadertoy (not by me).

Creative Labs is an organization at UCLA that brings creatives together. Each quarter we have a series of projects (web, VR, mobile apps, etc.) that are open for anyone to work on. I did the website and branding book this year. Why do they both look like fruit catalogs? No one knows. The website again uses Threejs to set up a WebGL scene, and the wavy cloth is rendered by displacing vertices with some Perlin noise and fractal brownian motion.

I worked on a molecule visualizer using Threejs. We immerse the user in a space filled with certain molecules floating around. The idea was to represent different substances with different environments. This was my first project with 3D graphics, so many of the effects are achieved pretty inefficiently. Now that I understand how the graphics pipeline works, I would do many of the same effects on the GPU to avoid bottlenecks.

This is an interactive narrative set in Los Angeles. The user goes through different scenes in LA, such as Santa Monica beach, a rooftop bar and Hollywood.

News magazine I worked on in high school!