https://www.youtube.com/watch?v=6Z-gVBKygRo

https://youtu.be/8TuCqWFhoP4

Inspired by the video Line Rider, combined to sound visualization we recently learned, I decided to make a bunny ski on a snowy mountain formed by the volume of a piece of music.

https://www.youtube.com/watch?v=RIz3klPET3o

The bunny came from one of my favorite mobile games, Tsuki.

1.mov

I drew the object bunny, and added a song into the sketch, getting the amplitude, assigning the value of present volume to the position - x and y coordination of the bunny.

for(var i = 0; i<volhistory.length;i++){
    var y = map(volhistory[i],0,0.05, height, 30);
    rect(i, y, 1, height-y);
    bunnyX = i;
    bunnyY = y;

https://editor.p5js.org/elodie33/sketches/6ra1bWWL4

https://editor.p5js.org/elodie33/sketches/6ra1bWWL4

However, the volume was changing so dramatically, it didn’t look like that the bunny was skiing on a snowy mountain. So I found a way to average the volume to make it go more smoothly.

I added up the last 20 values in the array, which would be the latest 20 values, and divided them by 20 to get the average.(I’m sure there’s a better way to do the average because now there is a long line of code and it takes a long time to load. Also it got stuck when adding up even just 25 values.)

let sum = volhistory[i]+volhistory[i-1]+volhistory[i-2]+volhistory[i-3]+volhistory[i-4]+volhistory[i-5]+volhistory[i-6]+volhistory[i-7]+volhistory[i-8]+volhistory[i-9]+volhistory[i-10]+volhistory[i-11]+volhistory[i-12]+volhistory[i-13]+volhistory[i-14]+volhistory[i-15]+volhistory[i-16]+volhistory[i-17]+volhistory[i-18]+volhistory[i-19];

let avg = sum/20;
let by = map(avg,0,0.5, height/2+130, 100);

Now it looks relatively smooth, the last question is to make the body of the bunny move according to the tilt angle of the “snowy mountain”.

a = atan2(by-pby, 1) /3;

I also divided the value by 3 to reduce the magnitude of shaking.

There is a function, atan2, that calculates the angle from a specified point to the coordinate origin as measured from the positive x-axis.

the a, in this case, would be 1, and b, would be (y - “previousY”).

So I did the average again to get previousY. I calculated from volhistory[i-3] insead of volhistory[i-1] to avoid shaking brought about by tiny changes.

let psum = volhistory[i-3]+volhistory[i-4]+volhistory[i-5]+volhistory[i-6]+volhistory[i-7]+volhistory[i-8]+volhistory[i-9]+volhistory[i-10]+volhistory[i-11]+volhistory[i-12]+volhistory[i-13]+volhistory[i-14]+volhistory[i-15]+volhistory[i-16]+volhistory[i-17]+volhistory[i-18]+volhistory[i-19]+ volhistory[i-20]+volhistory[i-21]+volhistory[i-22];

let pavg = psum/20;
let pby = map(pavg,0,0.5, height/2+130, 100);

a is the rotation angle of the bunny, in the object Bunny.