Web Audio API · Canvas API

Audio Visualizer

Real-time music visualizer with frequency analysis, bar & circle renderers, EQ controls, colour effects, custom file upload, and fullscreen mode.

Web Audio API Canvas API ES Modules JavaScript
Procedural Generation · Canvas

Algorithmic Botany

Sine-wave-driven procedural plant generation — curves and branches grown mathematically across the canvas with interactive parameter controls.

Canvas API Sine Waves JavaScript
Procedural Generation · Canvas

Algorithmic Botany 2

Phyllotaxis spiral generation — the same golden-angle math that governs sunflower seeds, rendered as interactive dot fields with live controls.

Canvas API Phyllotaxis JavaScript
CSS Framework · Responsive UI

Bulma Coffee Example

A responsive layout built with the Bulma CSS framework — demonstrating component-driven UI, grid systems, and clean typography at scale.

Bulma CSS HTML Responsive
Canvas API · Animation

JS Canvas Screensaver

Animated canvas screensaver drawing rectangles, arcs, and lines with play/pause/clear controls. Click anywhere in paused mode to spraypaint shapes.

Canvas API Animation Loop JavaScript
Module Bundling · Webpack

Webpack Greeter

ES modules bundled with Webpack — separated into greeter logic, UI handler, and entry point, then compiled into a single optimised output.

Webpack ES Modules JavaScript
Mapbox GL JS · GeoJSON

RIT Coffee Finder

Interactive map of coffee spots near RIT campus using Mapbox GL JS — custom markers, GeoJSON data loading, and programmatic camera transitions.

Mapbox GL JS GeoJSON JavaScript
DOM Manipulation · JS

Technobabble Generator

Generates randomised sci-fi technobabble by composing vocabulary sets — an exercise in DOM manipulation, randomness, and array composition.

JavaScript DOM API Arrays