Author: Aste Mayaya

I have always considered music to be an essential part of my life. Whenever I want to get something done or need to lift my mood, I turn to music. So, for the self-portrait assignment, I decided to design a portrait that interacts with music. The life and happiness of my portrait depend on music: when there is no music, it reflects a very bad mood, and the heart stops beating. I used different shapes to draw the portrait, but drawing the heart was particularly challenging. Initially, I tried using the Heart equation, but it was difficult. Fortunately, I found an easier method online. To make the portrait react to music, I used p5.AudioIn to capture my computer’s microphone input, which I then used to alter parts of the portrait as the amplitude changes. If the user presses the mouse, the background color changes to simulate disco lights. The final design is decent but still needs some improvements.  

NOTE: Seems like I can’t use the mic on WordPress. Run the code on the P5 editor

The following part of the code is interesting but challenging to implement. To create the disco light effect, I needed to incorporate a time delay. Unfortunately, I couldn’t find a direct way to implement the delay. After some research, I discovered that I could use frameCount to achieve the delay and, consequently, the disco lights.

//function to turn on the disco light (One second cycle)
function discoLight() {
  let level = map(mic.getLevel(), 0, 1, 50, 255);

  if (frameCount % 60 < 10) {
    background(level, 0, 0);
  } else if (frameCount % 60 < 20) {
    background(0, level, 0);
  } else if (frameCount % 60 < 30) {
    background(0, 0, level);
  } else if (frameCount % 60 < 40) {
    background(level,0 , level);
  }
  else if (frameCount % 60 < 50) {
    background(0, level, level);
  }
  else if (frameCount % 60 < 60) {
    background(level, level, level);
  }
}

Overall, working with p5 has been an interesting learning experience. I faced some challenges, especially with the coordinate system. I was so used to working with the standard coordinate system, so adjusting to the inverted system was somewhat difficult. However, I believe that with time, I will overcome these challenges. The portrait may require further enhancements: future work might involve analyzing the sound so that the mouth moves when someone sings or talks, instead of merely reacting to the beat. Since some parts move relative to the music level and I haven’t tested the code with very loud sounds, I’m concerned that certain elements might move further than expected, causing disorientation of the entire portrait. To address this, I plan to map the sound input so that everything works smoothly regardless of the amplitude. Additionally, another improvement could be ensuring that every part of the portrait remains proportional to the whole. This way, whenever I change one element, the entire portrait adjusts accordingly without becoming disoriented.