let a1Img;

let bImg;

let csharpImg;

let dImg;

let eImg;

let fsharpImg;

let gsharpImg;

let a2Img;

let baseImg;

​

//sounds

let a1Sound;

let bSound;

let csharpSound;

let dSound;

let eSound;

let fsharpSound;

let gsharpSound;

let a2Sound;

​

function preload(){

    a1Img = loadImage('images/1-A.png');

    bImg = loadImage('images/2-B.png');

    csharpImg = loadImage('images/3-CSharp.png');

    dImg = loadImage('images/4-D.png');

    eImg = loadImage('images/5-E.png');

    fsharpImg = loadImage('images/6-FSharp.png');

    gsharpImg = loadImage('images/7-GSharp.png');

    a2Img = loadImage('images/8-A.png');

    baseImg = loadImage('images/base.png');

    a1Sound = loadSound('sounds/1-A.mp3');

    bSound = loadSound('sounds/2-B.mp3');

    csharpSound = loadSound('sounds/3-CSharp.mp3');

    dSound = loadSound('sounds/4-D.mp3');

    eSound = loadSound('sounds/5-E.mp3');

    fsharpSound = loadSound('sounds/6-FSharp.mp3');

    gsharpSound = loadSound('sounds/7-GSharp.mp3');

    a2Sound = loadSound('sounds/8-A.mp3');

}

​

//top image transparency

let a1Transparency = 128;

let bTransparency = 128;

let csharpTransparency = 128;

let dTransparency = 128;

let eTransparency = 128;

let fsharpTransparency = 128;

let gsharpTransparency = 128;

let a2Transparency = 128;

​

function setup() {

  createCanvas(800, 400);

}

​

function draw() {

  background(220);

  //a1

  textSize(32);

  text('a',90,190)

  tint(255, a1Transparency)

  image(a1Img,55,10,90,150);

  noTint();

  image(baseImg,55,10,90,150);

  //b

  textSize(32);

  text('b',290,190)

  tint(255, bTransparency)

  image(bImg,255,10,90,150);

  noTint();

  image(baseImg,255,10,90,150);

  //csharp

  textSize(32);

  text('c#',490,190)

  tint(255, csharpTransparency)

  image(csharpImg,455,10,90,150);

  noTint();

  image(baseImg,455,10,90,150);

  //d

  textSize(32);

  text('d',690,190)

  tint(255, dTransparency)

  image(dImg,655,10,90,150);

  noTint();

  image(baseImg,655,10,90,150);

  //e

  textSize(32);

  text('e',90,390)

  tint(255, eTransparency)

  image(eImg,55,210,90,150);

  noTint();

  image(baseImg,55,210,90,150);

  //fsharp

  textSize(32);

  text('f#',290,390)

  tint(255, fsharpTransparency)

  image(fsharpImg,255,210,90,150);

  noTint();

  image(baseImg,255,210,90,150);

  //gsharp

  textSize(32);

  text('g#',490,390)

  tint(255, gsharpTransparency)

  image(gsharpImg,455,210,90,150);

  noTint();

  image(baseImg,455,210,90,150);

  //a2

  textSize(32);

  text('a',690,390)

  tint(255, a2Transparency)

  image(a2Img,655,210,90,150);

  noTint();

  image(baseImg,655,210,90,150);

}

​

//sound and animation triggers

function keyPressed(){

  if (key == '1'){

    a1Sound.play();

    a1Transparency = 255;

  } else if (key == '2'){

    bSound.play();

    bTransparency = 255;

  } else if (key == '3'){

    csharpSound.play();

    csharpTransparency = 255;

  } else if (key == '4'){

    dSound.play();

    dTransparency = 255;

  } else if (key == '5'){

    eSound.play();

    eTransparency = 255;

  } else if (key == '6'){

    fsharpSound.play();

    fsharpTransparency = 255;

  } else if (key == '7'){

    gsharpSound.play();

    gsharpTransparency = 255;

  } else if (key == '8'){

    a2Sound.play();

    a2Transparency = 255;

  }

}

​

//return image transparency to default state

function keyReleased(){

  if (key == '1'){

    a1Transparency = 128;

  } else if (key == '2'){

    bTransparency = 128;

  } else if (key == '3'){

    csharpTransparency = 128;

  } else if (key == '4'){

    dTransparency = 128;

  }else if (key == '5'){

    eTransparency = 128;

  } else if (key == '6'){

    fsharpTransparency = 128;

  } else if (key == '7'){

    gsharpTransparency = 128;

  } else if (key == '8'){

    a2Transparency = 128;

  }

}