let img2

let snd

​

function preload(){

  snd = ['do.mp3', 're.mp3','mi.mp3', 'fa.mp3', 'sol.mp3', 'la.mp3', 'si.mp3']

  img = loadImage('lines.png')

  img2 = loadImage('note.png')

  return snd

}

​

​

myNote1 = {

  x: 300,

  y: 420,

  w: 52, 

  h: 50,

  tl: 50,

  tr: 18,

  br: 50,

  bl: 18,

  col: "white",

  hoverCol: "lightgrey",

  playingCol: "red",

  isHovering:true,

  isPlaying: false,

  //img: null,

  snd: null, 

}

​

myNote2 = {

  x: 400,

  y: 396,

  w: 52, 

  h: 50,

  tl: 50,

  tr: 18,

  br: 50,

  bl: 18,

  col: "white",

  hoverCol: "lightgrey",

  playingCol: "orange",

  isHovering:true,

  isPlaying: false,

  //img: null,

  snd: null, 

}

​

myNote3 = {

  x: 500,

  y: 372,

  w: 52, 

  h: 50,

  tl: 50,

  tr: 18,

  br: 50,

  bl: 18,

  col: "white",

  hoverCol: "lightgrey",

  playingCol: "yellow",

  isHovering:true,

  isPlaying: false,

  //img: null,

  snd: null, 

}

​

myNote4 = {

  x: 600,

  y: 348,

  w: 52, 

  h: 50,

  tl: 50,

  tr: 18,

  br: 50,

  bl: 18,

  col: "white",

  hoverCol: "lightgrey",

  playingCol: "green",

  isHovering:true,

  isPlaying: false,

  //img: null,

  snd: null, 

}

​

myNote5 = {

  x: 700,

  y: 325,

  w: 52, 

  h: 50,

  tl: 50,

  tr: 18,

  br: 50,

  bl: 18,

  col: "white",

  hoverCol: "lightgrey",

  playingCol: "lightblue",

  isHovering:true,

  isPlaying: false,

  //img: null,

  snd: null, 

}

​

myNote6 = {

  x: 800,

  y: 300,

  w: 52, 

  h: 50,

  tl: 50,

  tr: 18,

  br: 50,

  bl: 18,

  col: "white",

  hoverCol: "lightgrey",

  playingCol: "blue",

  isHovering:true,

  isPlaying: false,

  //img: null,

  snd: null, 

}

​

myNote7 = {

  x: 900,

  y: 275,

  w: 52, 

  h: 50,

  tl: 50,

  tr: 18,

  br: 50,

  bl: 18,

  col: "white",

  hoverCol: "lightgrey",

  playingCol: "purple",

  isHovering:true,

  isPlaying: false,

  //img: null,

  snd: null, 

}

​

let notes_list = [myNote1, myNote2, myNote3, myNote4, myNote5, myNote6, myNote7]

​

function setup() {

  createCanvas(1000, 600);

  image(img2, 0, 100, 350, 390);

  let sounds = preload()

  notes_list.forEach(function (note, i) {

    note.snd = loadSound(sounds[i])

  })

}

​

function draw() {

  background(img);

  notes_list.forEach((note) => {

    isPlaying(note)

    drawSquare(note)

    checkHover(note)

  })

}

​

function isPlaying(note) { 

  if (note.snd.isPlaying()) { 

    note.isPlaying = true

  } else { 

    note.isPlaying = false

  }

}

​

​

function drawSquare(note) {

  if(note.isHovering && !note.isPlaying){

      fill(note.hoverCol)

    }else if(note.isPlaying){

      fill(note.playingCol)

    }else{

      fill(note.col)

  }

  rect(note.x, note.y, note.w, note.h, note.tl,

  note.tr, note.br,note.bl)

  strokeWeight(7)

}

​

function checkHover(note){

  if(mouseX > note.x && mouseX < note.x + note.w && mouseY > note.y && mouseY < note.y + note.h){

    note.isHovering = true

  }else{

    note.isHovering = false

  }

}

​

function mousePressed(){

  notes_list.forEach((note) => {

    if (note.isHovering  && !note.isPlaying) { 

      note.snd.play()

      note.isPlaying = true

    } else { 

      note.isPlaying = false 

    }

  })

}

​

​

​

​

​

​