The progress on the midterm so far has been quite significant. I have realized that understanding and utilizing the p5.sound library is more challenging than I initially thought. The language of audio, with terms related to sample rate and frequency, took me some time to grasp, and I’m still unsure if I fully understand it. At this point, I have created the layout for the drum machine, which is interactive and responds to user clicks. I have included three sections for hi-hat, clap, and bass samples in the “drums” p5.part using the addPhrase method. I tried adding more samples, but for some reason, the audio keeps getting distorted on my browser. I looked it up online, and it seems to be a common issue with p5.js on the Chrome browser, so I am attributing it to that for now. I might test it with a different browser later but for now I am happy with having three rows of drum beats.
Currently, I have two versions of my project to display. One version has a background canvas, while the other version uses individual PNG files of the drum parts instead of circles to give visual cue as to which specific drum phrase is triggered. I made 2 functions: drawMatrix() and canvasPressed() for updating the grid on the canvas for when users deselect and add a 16th note phrase to the drum loop.
Press space to hear the beat.(open the sketch link)
https://editor.p5js.org/Saiki/full/m6MkI9vMD
Drum Icon Version (you can de-select/add beats in this version)
https://editor.p5js.org/Saiki/sketches/Mtr3z9iJ8
I have encountered some difficulties when implementing OOP (Object-Oriented Programming) into my code. I attempted to use a class called “Pattern” to create different drum phrases. However, when working with p5.part and p5.phrase, it did not function properly.
Additionally, I still need to add a start screen to my drum machine. I have implemented a BPM (Beats Per Minute) control slider, which I will provide captions for to make its purpose more obvious. For now, I am content that my project is functional, and I will now focus on refining the details to create a cohesive experience.