Dynamic Sitemaps in Next.js

Touchpad

Project Image

A few years ago, when I was first learning about browser APIs and JavaScript, I build an audio synthesizer web tool using the Web Audio API called AquaSonic. One of the cool features of this synth was a touchpad interface that could bend pitch and control frequency cutoff based on the X-Y position of the touch.

Check out AquaSonic on Netlify

I decided it would be an interesting exercise to revist this interface with an OOP+TypeScript approach.

I went through several iterations of this interface in the short span I worked on it, each time trying to implement principles of Clean Coding to separate concerns, reduce redundancies, and provide room for expansion where possible. I like the class that came from it, and I'm not sure if I will ever use it but I think it could have some very cool applications for survey responses on a 2-dimensional matrix, or compound control of two settings at once, or even touch control interfaces like AquaSonic if I'm feeling bored in the future!

View the CodePen

Steven Hutchison

Full Stack Web Developer

UX Designer

Let's Connect