Clap Beats

A10. Clap Beats

Jianhao Ma, Shihao (Tiger) Zhang

Links:https://editor.p5js.org/roger1mjh/sketches/rJMbn4UG

Video Demo:

Inspiration:

Originally, we were thinking about using poseNet and camera to make a gesture interactive random beats generator with Markov Chains. However, we thought that almost every IMA student knows how to do gesture control in P5, and we have done similar projects before. Therefore, we switched to sound control. The idea is: the tempo of the beat is determined by the frequency users clap their hands. 

Design Decisions:

Image result for asparagus lofi drum kit
The music style we aimed for is Lo-Fi. At first, I imported 26 tracks of samples and categorized them into five arrays. We tried to incorporate some visual designs like changing colors and shapes based on the last track played and the array it belongs to. Sadly, Shihao was sick when we moved on to that part so we just left it as future works.

How does it work?

So the core part of the project is to measure the tempo of users' clapping and map it to bpm. I set a threshold for the variable that stores the value returned by getLevel method. Once the volume exceeds certain decibel, a new data of the time(millis) it happens is pushed into an array. When the array has four values, a math calculation is executed to get the average difference of those values. Once the array.length exceeds four, the shift method I coded will delete the first value of the array. The average difference returned previously will be formatted and mapped to a new bpm value.

Difficulties

Honestly, a lot. At first I imported too many tracks. It makes the browser too laggy after I've been working on it for hours. I essentially deleted over half of them. Coding the Markov Chain for over twenty tracks is tedious. Although, I used array as short cuts, the final result is still over 300 lines of codes. Debugging and optimizing is the most painful part. I honestly don't know how I get it to work(in most cases). Just testing out all the possible approaches I could think of to make the program slimmer. 

Instruction

  1. Adjust the volume down
  2. make sure the environment is quite enough
  3. play the beats for over 5 secs
  4. start clapping your hands, close to the mic, keep it clear and steady for over 7 claps
  5. change your tempo gradually and gently

Comments

Post a Comment

Popular posts from this blog

Assigment 4

Image
 Image Transfer on P5 Response to Dr. Fiebrink's Speech: There's one part in this speech that intrigues me the most, which is using Machine Learning in creative works does not need to be smart and delicate. It is OK to be dumb and funny, because that's what an unmatured technology genuinely looks like, and it can still be creative. The Edges to Cat example is so fun to play with that I'm kind of addict to it.  Attempt to do Image Transfer on P5 with Pose Regression I watched the videos posted and was most interested in the pose regression example. But the RGB value shift looks not "machine learningly" enough, because it's possible to make some similar project without neural network. Therefore I tried to make one with image transfer. Firstly, I need to load image in data format in P5. I decided to try pixels first, because they retrieve and store image data directly. Then I console logged the "pixels" object in draw, to test out how much the data ...
Read more

Assignment 2A

Image
2A: Excavating AI, Teachable Machine Project Jianhao Ma Moral Machines The reading "Excavating AI" brings up an idea that the tasks of training AI should not just be making them smarter, but to apply political consideration and moral standard as well, especially when related to people. I would not care about such idea years ago, because I thought that technical breakthroughs is the one and foremost priority in emerging technology industries, why bother? However, when the application of machine learning started entering our lives, I changed my mind. Everyday, there are many information processed/filtered by machine learning tools being fed to us, textual or non textual. They could be the advertisement you watch on social media, the pop-up news on your phone. In other words, many of the lower products of machine learning are mediums. Therefore, they have the inherent nature of being political biased and ideologically influential. The fantasy that "technologies should be un...
Read more

A9 - Draw my Drum Machine

Image
My Box Sequencer and Circle Visualization A Dumb GIF illustration: I just followed the steps we learned in class and stylized the box sequencer a little bit by shrinking the size, add strokes, and changing colors. Those were the easy part. Then I recalled that Luisa encouraged me to try making a circular sequencer with arc(x,y,w,h,start,stop). I felt confident about it because I've used arc several times in P5. However, when I actually coded it, I found it's more complicated than I thought.  The first difficulty assigning orders. At first the bigger arc overlapped the smaller ones and hided them underneath. I fixed that through changing the w and h from adding up to decreasing down.  The second challenge was the mousePressed function. It's doing not simple math with mouseX, mouseY, and w anymore. In order to make it work, I have to create a class of arcs and assign the arcs that represent each drum note to objects of that class. It's too much labor to do ...
Read more