Description

Role: Full Stack Development

A web based percussion synthesizer designed for hypnotic kick drum and bassline loops.

This is an active project, video above may not reflect current state. View the project live here
‍
UI: The project began with the intention to design an interface that combined step sequencing and per-step parameter controls into one interface, resulting in the design of buttons where a user can drag on them to set parameters. All of the UI elements were made using Typescript, React, and Tailwind.

Backend: The audio engine uses C code compiled with Emscripten into WASM. The WASM module is then loaded and wrapped by typescript as an AudioWorklet. This core component in C provides the sound generation, sequencing, and audio recording functionality. Recorded audio buffers are converted to a WAV file byte stream and then passed back to Typescript and saved as a blob, allowing wave file recording on all browsers with no external libraries. Web Audio is used for some basic audio components like the high pass filtering and the delay effect, as well as creating the audio pipeline. Web MIDI is used to receive midi clock data for synchronization, however Safari does not support Web MIDI due to security concerns.

Tech Stack
‍
Typescript
ReactJS
Tailwind CSS
Web Audio
C + WASM

Links

GitHub
Play Me!

Description

Role: Audio Design and Development

A playable version of our generative artwork "microcosm". Microcosm uses a custom granular synthesizer built with Web Audio to time stretch audio clips generated at runtime. The microcosm playground allows a user to upload their own audio files or record audio files with the microphone which are then placed into the granular synthesizer engine.

The granular synthesizer has 4 layers, each with their own pitch shifting and time stretching settings. The 4 layers also have unique grain sizes, grain probabilities, filtering settings, and window shape settings.

The visual design and development was lead by Johan Ismael.

Tech Stack

Typescript
Web Audio
Three.js
GLSL
Tweakpane

Links

Play Me!

Description

Role: Full Stack Development

An interactive and generative audiovisual artwork used for the landing screen on my website. The horizontal grid denotes the start and stop point of different notes, as the mouse moves across one of the vertical dividers a new note is triggered. The rest of the audio is generated using custom made Web Audio synthesizers and a melody generated using Markov Chains.

The visuals are built using GLSL and Three.js. It was designed to ensure consistent performance on both mobile and desktop versions of my website.

Tech Stack

Typescript
Three.js
GLSL
Web Audio

Links

Play Me!
GitHub

Description + Role

Role: Audio Design and Development

Night Sea Studio is an audiovisual artwork studio started by Johan Ismael and myself in 2016. Since 2023, the project has focused on creating algorithmic artworks using web technologies.

For each project, the creative direction and conceptual ideation was a shared responsibility. Johan was the lead for the visual software development, I was the lead for the audio software development.

Due to the constrained nature of on-chain generative art releases, we would typically only include one library (Three.js), requiring that all audio code was written from scratch.

Tech Stack

Javascript
Typescript
GLSL
Web Audio
Three.js
‍
Links

All Projects
‍l.o Project Site
ratio on fx(hash)