p5.js, HTML, CSS, JavaScript

p5.js Sketches

A selection of ten p5.js JavaScript projects ("sketches") exploring interaction, generative systems, and data visualization, built into a custom dashboard with HTML. 

Interact with the embedded project below. Content may take a few seconds to load.

I produced these sketches across a course exploring computational and generative approaches to color, shape, interaction, and data, using p5.js, a creative coding JavaScript library. Featured sketches include a generative Moiré pattern, an FFT audio shape visualizer, and other experiments in live input and data-driven visuals.

To present these works without sending viewers out to the p5.js editor, I developed a gallery dashboard using HTML, CSS, and JavaScript that embeds each sketch alongside a description and key code snippet, with a link to the full editor for anyone who wants to dig deeper. 

I continue refining the dashboard's responsiveness and features, and exploring these concepts through new sketches as an ongoing creative practice.

View the full dashboard here.

Open the collection in the p5.js editor here.

Preview an expanded p5.js data visualization project using ml5.js here.

Previous
Previous

Lab Waste Graphics

Next
Next

Life Within