Project |
Category
/
Tools
|
---|---|
Metal sampler |
Web design and development, sound design
Website: OpenGL Shading Language (GLSL), JavaScript (Three.js, Tone.js, p5.js), HTML, CSS
Audio: studio recordings with Sennheiser MKH 8040 Microphone, post-processing with Reaper DAW |
Deciphering illegible inscriptions at The Met |
Web design and development, machine learning
JavaScript (Three.js, Tone.js, Tensorflow.js, p5.js), HTML, CSS
|
Columbia GSAPP End of Year Show |
Digital content strategy, editing
Adobe Creative Suite, Figma
|
Columbia GSAPP Abstract 2018 - 2022 |
Content strategy, editing
Adobe Creative Suite
|
Metal sampler is an interactive website featuring collection of 600 audio samples sourced from 6 distinct metal surfaces—brass, steel, copper, aluminum, and two types of bronze. Each surface was hammered 100 times, with a percussive strike recorded after each physical modification. This deliberate hammering process introduces tension and stress into the physical structure of the metal plates, resulting in nuanced changes to their sonic properties.
The goal of the project is to imagine the metal as a sonically malleable material.
1 month (completed during a residency at the Recurse Center)
Website:
OpenGL Shading Language (GLSL), JavaScript (Three.js, Tone.js, p5.js), HTML, CSS
Audio:
Studio recordings with Sennheiser MKH 8040 Microphone, Post-processing with Reaper DAW

Metal sampler was designed with the following objectives in mind:
- Ensuring clarity in the association between audio samples and their corresponding materials.
- Highlighting the contrast between conventional, static metals surfaces and dynamic, fluid-like entities, akin to bubbling liquids.
- Offering a simple and playful interface, enabling users to browse through the surprisingly dark and eerie sounds without needing to adjust additional parameters such as sample length, crossfades, or sample count.
Metal sampler offers users two simple options for browsing sounds: they can organize samples by material or experience them in a random shuffle. As a user moves the cursor across the grid, samples are triggered, leaving behind a red trail that mimics a fading line being drawn. This feature not only indicates which samples are currently playing but also introduces a playful, game-like element to the experience.
The design includes a collapsible menu and adjusts the metallic plate to fit the browser window. This approach highlights the interplay of light on the evolving surface patterns and colors as the user browses samples. By enhancing the correlation between sound and surface, this design effectively communicates the concept of a malleable, liquid-like material.

There are over 3,000 instances of text classified as illegible in the The Metropolitan Museum of Art's digital collections due to a variety of factors — fading, damage, or simply indecipherable handwriting. This interactive website employs a machine learning model trained on a dataset of handwritten letters (EMNIST) to generate predictions. Users apply bounding boxes onto a binary version of the extracted text to discern individual letters, which are then passed to a classifier.
🚧 Ongoing 🚧
JavaScript (Three.js, Tone.js, Tensorflow.js, p5.js), HTML, CSS
This project was conceived with the following objectives:
- Clarifying the connection between the extracted text and the archive to ensure transparency in their association.
- Allowing user input to determine an initial parameter for the predictions of each word, thereby contributing to increased variability in the output.
- Turning an often disregarded facet of the archive into a resource for navigating the collection.
In my previous role at Columbia University’s Graduate School of Architecture, Preservation and Planning (GSAPP), I served as the digital editor of the School's annual showcase of student work, the End of Year Show, from 2020–2023. I sourced, formatted, and edited the featured content and worked closely with the graphic designers and developers to produce this website.
Scroll below for links and design credits.

Site map illustrating the organization of 2,000 unique student works by program and studio sequence across 19 pages.
Website design & development: Linked by Air
→ view the digital edition

Website design & development: Linked by Air
→ view the digital edition

Website design & development: Linked by Air
→ view the digital edition

Website design & development: Linked by Air
Work selection curated by GSAPP Exhibitions
→ view the digital edition

In my previous role at Columbia University’s Graduate School of Architecture, Preservation and Planning (GSAPP), I served as the editor of the School's annual publication of student work, Abstract, from 2018–2022. I sourced, formatted, and edited the featured content and working closely with the graphic designers to produce this ~200-400 page snapshot of a single academic year.
Scroll below for links and design credits.
→ view the digital edition
→ view the digital edition
→ view the digital edition
→ view publication details online
→ view publication details online