Interactive Music Player

let amplitude, level;

let scribble;

let sound;

let ellipseSize = 50;

let ellipseX, ellipseY;

let circle;

let rectSize = 50;

let rectX, rectY;

​

function preload() {

  song1 = loadSound("everest.mp3");

  song2 = loadSound("name.mp3");

  song3 = loadSound("forever.mp3");

  img1 = loadImage("photo1.jpg");

  img2 = loadImage("photo2.jpg");

  img3 = loadImage("photo3.jpg");

  img4 = loadImage("photo4.jpg");

}

​

function setup() {

  createCanvas(400, 400);

  createButton("Song 1").mousePressed(loadSong1);

  createButton("Song 2").mousePressed(loadSong2);

  createButton("Song 3").mousePressed(loadSong3);

  amplitude = new p5.Amplitude();

  scribble = new Scribble();

}

​

function draw() {

  let x = (width - img4.width) / 2;

  let y = (height - img4.height) / 2;

  background(img4, x, y);

  level = amplitude.getLevel();

​

  // song1 visual

  if (song1.isPlaying()) {

    // draw visual that reacts to the level of the song

    image(img1, x, y);

    fill(0);

    let level = amplitude.getLevel();

    let ellipseSizeMapped = map(level, 0, 1, 10, 100);

    scribble.scribbleEllipse(

      ellipseX,

      ellipseY,

      ellipseSizeMapped,

      ellipseSizeMapped

    );

​

    // Update the position of the ellipse based on the amplitude

    let x1 = map(level, 0, 1, 0, width);

    let y1 = map(level, 0, 1, 0, height);

    ellipseX = x1 + random(-10, 10);

    ellipseY = y1 + random(-10, 10);

  }

​

  // song2 visual

  if (song2.isPlaying()) {

  // draw visual that reacts to the level of the song

  let x = (width - img2.width) / 2;

  let y = (height - img2.height) / 2;

  image(img2, x, y);

  let level = amplitude.getLevel();

​

  // draw four ellipses with a space theme color around the image

  stroke(240, 240, 240); // set stroke color to white

  strokeWeight(2); // set stroke weight to 2 pixels

  noFill(); // disable fill for the ellipses

  let size = map(level, 0, 1, 50, 150); // ellipse size based on amplitude level

​

  // add random offsets to ellipse positions

  let xOffset = random(-20, 20);

  let yOffset = random(-20, 20);

​

  ellipse(x + img2.width / 2 + xOffset, y + img2.height / 2 + yOffset, size + 20, size + 20);

  ellipse(x + img2.width / 2 - 100 + xOffset, y + img2.height / 2 - 100 + yOffset, size, size);

  ellipse(x + img2.width / 2 + 100 + xOffset, y + img2.height / 2 - 100 + yOffset, size, size);

  ellipse(x + img2.width / 2 + xOffset, y + img2.height / 2 + 100 + yOffset, size, size);

}

​

  // song3 visual

  if (song3.isPlaying()) {

    // draw visual that reacts to the level of the song

    let x = (width - img3.width) / 2;

    let y = (height - img3.height) / 2;

    image(img3, x, y);

​

    rotateSpeed = 0.1;

    rectX = width / 2;

    rectY = height / 2;

    let level = amplitude.getLevel();

​

    // update rotation speed based on amplitude level

    let rotateSpeedMapped = map(level, 0, 1, 0, 0.5);

    rotateSpeed += (rotateSpeedMapped - rotateSpeed) * 0.1;

​

    // update rectangle size based on amplitude level

    let rectSizeMapped = map(level, 0, 1, 10, 100);

    rectSize += (rectSizeMapped - rectSize) * 0.1;

​

    // update rectangle position based on noise

    let noiseX = noise(frameCount * 0.01) * width;

    let noiseY = noise(frameCount * 0.02) * height;

    rectX += (noiseX - rectX) * 0.1;

    rectY += (noiseY - rectY) * 0.1;

​

    // draw rotating rectangles

    translate(rectX, rectY);

    rotate(frameCount * rotateSpeed);

    rect(-rectSize / 2, -rectSize / 2, rectSize, rectSize);

  }

}

​

function loadSong1() {

  if (song1.isPlaying()) {

    song1.stop();

  } else {

    song1.play();

  }

}

​

function loadSong2() {

  if (song2.isPlaying()) {

    song2.stop();

  } else {

    song2.play();

  }

}

​

function loadSong3() {

  if (song3.isPlaying()) {

    song3.stop();

  } else {

    song3.play();

  }

}

​