Task:
Following the prompts, create your own version of the drum machine.
Final Result:
Youtube demo:
P5 Link: https://editor.p5js.org/alexwang/present/F7PYnW0L
Process:
I took inspiration from the default drum sequencer in the Fruity Loops DAW, where the blocks are divided as sixteenth notes. However, I changed the colors of the blocks to be more visually appealing, and also added some basic animations for highlighting current note. There is a tempo slider with a smooth color fading when clicked and released, as well as labels indicating instruments and time. This is a pretty simple and common design so there is not much to say but I think my twist with the color changes can help users mentally connect the sound they hear with different colors I chose, which is why I decided to use bright exiting colors paired with a dark interface.
Potential Improvements:
I feel like there can be multiple improvements made with this design, mostly with the display of notes. I am working with a smaller canvas compared to a full sized DAW, so it is hard for me to add more instruments or steps as the screen is simply too small to handle so much notes, since I am going as specific as sixteenth notes I do not want to squeeze the notes together or have small and hard to click blocks.