Sticky Waffle is a virtual synthesizer keyboard and visualizer combination. Users can play it like a normal piano and are able to modify the settings for both the visualizer and synthisizer parts.

Design Decisions

We wanted the user to have fun by allowing them the freedom to make music. On the computer this experience is best accomplished utilizing the keyboard. We made it so the keyboard becomes an actual music keyboard (much in the style of GarageBand and other such applications).

Visually we wanted something that responded directly to what the user was doing. The visualizer only responds when there are sounds being made. There is some ability for the user to choose their own color schemes.

We wanted the focus of the experience to be about making music and enjoying the resulting visualizations, as such we made a conscious decision to fade out the interface's opacity so that it would not distract from the experience.

Technical Decisions

We followed a module design pattern to implement our Javascript so that the synth and visualizer are their own separate objects. The objects run on the same update loop which is called within main.js

Modernizr was used to load in assets


We worked hard putting the finished touches on this piece. The virtual keyboard at the bottom of the screen was added to improve usability. Making the keys light up as they were pressed was also a nice feature we implemented to get people to enjoy using the keyboard. The color transitions of the visualizer and its consitency with the virtual keyboard was also a nice design touch.


The following projects and tutorials were used, looked at, and inspired the creation of the project