Sound as media

For this project I wanted to create a code that visualizes a song, something like karaoke slides. I chose the beginning of Porcelain by MOBY (which up until this point I was sure was gibberish and not a real words). I planned my visual in illustrator:

The plan was to create an amplitude that will describe the music and words that will be shown in the moments that they appear in the song.

First I uploaded the song:

Then I followed this video:

https://www.youtube.com/watch?v=NCCHQwNAN6Y&feature=youtu.be&list=PLRqwX-V7Uu6aFcVjlDAkkGIixw70s7jpW The video shows how to create an ellipse amplitude, this is how it looked in my sketch

It worked! the ellipse changed according to the song, but I wanted a different shape.

With the help of this video:

https://www.youtube.com/watch?v=jEwAMgcCgOA&feature=youtu.be&list=PLRqwX-V7Uu6aFcVjlDAkkGIixw70s7jpW


I changed the code and added an if statement with splice in order that the amplitude will continue after it gets to the end of the canvas.


Then I uploaded the font and wrote the code for the words.

I decided to try and color the words by the beat


I thought I will see the right beat in the console and define it in the code. But every time I defined and reloaded the sketch the beats have changed. So I decided to change my plan and write the current time that the word is playing in the song by hand (which isn't the smartest plan I have to say)... it didn't worked.

For some reason the current time was 0 all the time. That was weird...

I read in the internet to try to find out what was the problem, and apparently it is because of p5 upgrade, I needed to change the html version. After I changed it, it worked and I defined the current time by hand. I got what I planned but I feel like there is abetter way to do it.

Result:



Sketch:

https://editor.p5js.org/ds6298/sketches/fogkMVHuP

20 views0 comments

Recent Posts

See All