Junkyard

Overview

A collection of websites and interaction experiments I coded by hand, exploring event promotion, data visualization, 3D scenes, and animation on the web.

A promotional website for CCA Graphic Design Senior Show 2019, designed for desktop and mobile.

The main-page patterns are randomized on reload. I implemented responsive exhibition information, participant listings, and individual work pages.

p5.js · jQuery

A data visualization based on NOAA climate data. Drag or swipe to rotate the 3D graphs.

I organized regional data into spherical graphs, adjusting normalized vertex positions with temperature values.

Three.js · jQuery

An experiment with shapes and sound that responds to pointer movement and clicks.

I connected mouse-move and click events to sound and p5.js animation.

p5.js

A web animation that creates waves by varying the height of an array of cubes.

Time, offset, and cube index feed a sine function that controls each cube’s Y scale.

Three.js

A Blender scene rendered on the web, with a view that responds to pointer movement.

I set up model loading, cameras, lighting, and rendering, linked the camera to pointer position, and animated the lights.

Three.js · Blender

A web interaction study that uses horizontal scrolling to explore artwork and exhibition information.

Scroll-driven parallax controls the movement of the exhibition content.

JavaScript

An animated factory scene built in HTML and CSS, with click interactions.

Clicking structures and characters reveals text associated with each object.

HTML / CSS · jQuery