​

//assign variables for the music and its amplitude

let song;

let amp;

​

//assign variables for random rects

let rectX;

let rectY;

let rectWidth;

let rectHeight;

​

let lineX;

let lineY;

​

//create array to hold all the random rects

let rects = [];

​

//load music

function preload() {

  song = loadSound("clip5.MP3");

}

​

function setup() {

  createCanvas(960, 600);

​

  //create video

  video = createVideo("eye.mov");

  video.size(640, 380);

  video.loop();

  video.hide();

​

  //access amplitude varible with p5 amplitude

  amp = new p5.Amplitude();

  song.play();

}

​

function draw() {

  background("rgb(0,0,0)");

​

  //assign varible to get the volume of the amplitude

  let vol = amp.getLevel();

​

  //add video to canvas with size visualizing the music's amplitude

  imageMode(CENTER);

  image(video, 480, 300, 640 * 0.6 + vol * 400, 380 * 0.6 + vol * 400);

​

  //draw the center coordinate axis

  noFill();

  stroke("rgb(0,201,0)");

  strokeWeight(1);

  line(30, 40, 930, 40);

  line(40, 30, 40, 570);

  line(30, 560, 930, 560);

  line(920, 30, 920, 570);

​

  //draw all the decorating shapes

  ellipse(480, 300, 100 + vol * 800);

​

  smallRect(480, 90);

  smallRect(250, 400);

  smallRect(730, 400);

​

  sectionLine(480, 35, 480, 65);

  sectionLine(43, 300, 73, 300);

  sectionLine(890, 300, 920, 300);

  sectionLine(480, 534, 480, 564);

​

  //use array to show rectangles

  for (let i = 0; i < rects.length; i++) {

    rects[i].displayRect();

    rects[i].displayText();

​

    //remove rect after half a second

    if (rects[i].isDone()) {

      rects.splice(i, 1);

    }

  }

​

  //use helper function to draw hash marks

  mark();

​

  // rectMode(CENTER)

  // stroke("red")

  // rect(480, 300, 300 + vol * 500, 200 + vol * 500);

}

​

//use keyPressed function to push random position and width height into array

function keyPressed() {

  //key code 7

  if (keyCode === 55) {

    //assign random positions, width, and height for rectangle

    rectWidth = random(20, 50);

    rectHeight = random(20, 50);

    rectX = random(30, 480 - rectWidth);

    rectY = random(30, 300 - rectHeight);

    //push variables into the rect array

    rects.push(new rectangles(rectX, rectY, rectWidth, rectHeight));

  }

  //key code 9

  if (keyCode === 57) {

    //assign random positions, width, and height for rectangle

    rectWidth = random(20, 50);

    rectHeight = random(20, 50);

    rectX = random(480, 930 - rectWidth);

    rectY = random(30, 300 - rectHeight);

    rects.push(new rectangles(rectX, rectY, rectWidth, rectHeight));

  }

  //key code 1

  if (keyCode === 49) {

    //assign random positions, width, and height for rectangle

    rectWidth = random(20, 50);

    rectHeight = random(20, 50);

    rectX = random(30, 480 - rectWidth);

    rectY = random(300, 570 - rectHeight);

    rects.push(new rectangles(rectX, rectY, rectWidth, rectHeight));

  }

  //key code 3

  if (keyCode === 51) {

    //assign random positions, width, and height for rectangle

    rectWidth = random(20, 50);

    rectHeight = random(20, 50);

    rectX = random(480, 930 - rectWidth);

    rectY = random(300, 570 - rectHeight);

    rects.push(new rectangles(rectX, rectY, rectWidth, rectHeight));

  }

}

​

//helper function to draw the hash marks

function mark() {

  for (let i = 0; i < 17; i++) {

    line(40, 60 + i * 30, 45, 60 + i * 30);

    textSize(8);

    text(i, 25, 62 + i * 30);

  }

​

  for (let i = 0; i < 29; i++) {

    line(60 + i * 30, 555, 60 + i * 30, 560);

    textSize(8);

    text(i, 58 + i * 29.9, 573);

  }

}

​

//helper function to draw small rects

function smallRect(x, y) {

  noFill();

  stroke("rgb(0,201,0)");

  strokeWeight(0.8);

  rectMode(CENTER);

  rect(x, y, 13);

}

​

//helper function to draw section lines

function sectionLine(x, y, x1, y1) {

  noFill();

  stroke("rgb(0,201,0)");

  strokeWeight(0.8);

  line(x, y, x1, y1);

}

​

//make a class to hold all the functions of the random rects

class rectangles {

  constructor(x, y, w, h, x1, y1) {

    this.rectX = x;

    this.rectY = y;

    this.rectWidth = w;

    this.rectHeight = h;

    this.showTime = millis();

    this.duration = 500;

  }

  //function to show the rect on screen

  displayRect() {

    noFill();

    stroke("rgb(0,201,0)");

    strokeWeight(0.8);

    push();

    rectMode(CENTER);

    rect(this.rectX, this.rectY, this.rectWidth, this.rectHeight);

    pop();

    line(480, 300, this.rectX, this.rectY);

  }

​

  //function to show the text of positions

  displayText() {

    textSize(10);

    text(

      `${this.rectX.toFixed(3)},${this.rectY.toFixed(3)}`,

      this.rectX + this.rectWidth * 0.6,

      this.rectY + this.rectHeight * 0.7

    );

  }

  //function calculating shown time

  isDone() {

    return millis() - this.showTime >= this.duration;

  }

}

​