let chaffinchImg;

let woodpigeonImg;

let hawfinchImg;

let barredwarblerImg;

let goldenorioleImg;

let woodlarkImg;

let corncrakeImg;

let commoncraneImg;

let bgImg;

​

//sounds

let chaffinchSound;

let woodpigeonSound;

let hawfinchSound;

let barredwarblerSound;

let goldenorioleSound;

let woodlarkSound;

let corncrakeSound;

let commoncraneSound;

let wavesSound;

​

//sound controls

let chaffinchLooping = false;

let woodpigeonLooping = false;

let hawfinchLooping = false;

let barredwarblerLooping = false;

let goldenorioleLooping = false;

let woodlarkLooping = false;

let corncrakeLooping = false;

let commoncraneLooping = false;

​

//waves

let wavesImg;

let x1 = 0;

let x2;

let scrollSpeed = 1.5;

​

//transparency

let chaffinchTransparency = 128;

let woodpigeonTransparency = 128;

let hawfinchTransparency = 128;

let barredwarblerTransparency = 128;

let goldenorioleTransparency = 128;

let woodlarkTransparency = 128;

let corncrakeTransparency = 128;

let commoncraneTransparency = 128;

​

function preload(){

  chaffinchImg = loadImage("COMMON-CHAFFINCH.png");

  woodpigeonImg = loadImage("COMMON-WOODPIGEON.png");  

  hawfinchImg = loadImage("COMMON-HAWFINCH.png");

  barredwarblerImg = loadImage("COMMON-BARREDWARBLER.png");

  goldenorioleImg = loadImage("COMMON-GOLDENORIOLE.png");

  woodlarkImg = loadImage("COMMON-WOODLARK.png");

  corncrakeImg = loadImage("COMMON-CORNCRAKE.png");

  commoncraneImg = loadImage("COMMON-COMMONCRANE.png");

  bgImg = loadImage("background.jpg");

  wavesImg = loadImage("waves.png");

  chaffinchSound = loadSound("chaffinch2.mp3");

  woodpigeonSound = loadSound("woodpigeon2.mp3");  

  hawfinchSound = loadSound("hawfinch2.mp3");

  barredwarblerSound = loadSound("barredwarbler2.mp3");

  goldenorioleSound = loadSound("goldenoriole2.mp3");

  woodlarkSound = loadSound("woodlark.mp3");

  corncrakeSound = loadSound("corncrake.mp3");

  commoncraneSound = loadSound("commoncrane.mp3");

  wavesSound = loadSound("waves.wav");

}

​

function setup() {

  createCanvas(600, 600);

  x2 = width;

​

  wavesSound.play();

  wavesSound.loop();

  bgImg.filter(BLUR, 12);

}

​

function draw() {

  background(220);

  push();

  tint(255,255);

  image(bgImg,0,0,width,height);

  image(wavesImg, x1, 200, 857, 600);

  image(wavesImg, x2+257, 200, 857, 600);

  pop();

  x1 -= scrollSpeed;

  x2 -= scrollSpeed;

  if (x1 < -850){

    x1 = width;

  }

  if (x2 < -850){

    x2 = width;

  }

  //chaffinch

  fill(0);

  textSize(20);

  noStroke();

  text('chaffinch',55,180)

  fill (120,220,200);

  stroke(51);

  text('press a',63,200)

  tint(255, chaffinchTransparency)

  image(chaffinchImg,20,40,150,150);

  //wood pigeon

  fill(0);

  textSize(20);

  noStroke();

  text('wood pigeon',175,180)

  fill (120,220,200);

  stroke(51);

  text('press s',200,200)

  tint(255, woodpigeonTransparency);

  image(woodpigeonImg,160,40,150,150);

  //hawfinch

  fill(0);

  textSize(20);

  noStroke();

  text('hawfinch',325,180)

  fill (120,220,200);

  stroke(51);

  text('press d',330,200)

  tint(255, hawfinchTransparency);

  image(hawfinchImg,320,60,90,90);

  //barred warbler

  fill(0);

  textSize(20);

  noStroke();

  text('barred',455,180)

  text('warbler',490,200)

  fill (120,220,200);

  stroke(51);

  text('press f',478,220)

  tint(255, barredwarblerTransparency);

  image(barredwarblerImg,450,60,90,90);

  //golden oriole

  fill(0);

  textSize(20);

  noStroke();

  text('golden',45,370)

  text('oriole',85,390)

  fill (120,220,200);

  stroke(51);

  text('press g',55,410)

  tint(255, goldenorioleTransparency);

  image(goldenorioleImg,25,240,110,110);

  //wood lark

  fill(0);

  textSize(20);

  noStroke();

  text('wood lark',175,370)

  fill (120,220,200);

  stroke(51);

  text('press h',185,390)

  tint(255, woodlarkTransparency);

  image(woodlarkImg,155,240,150,150);

  //corncrake

  fill(0);

  textSize(20);

  noStroke();

  text('corn crake',315,370)

  fill (120,220,200);

  stroke(51);

  text('press j',332,390)

  tint(255, corncrakeTransparency);

  image(corncrakeImg,320,260,90,90);

  //common crane

  fill(0);

  textSize(20);

  noStroke();

  text('common',450,370)

  text('crane',500,390)

  fill (120,220,200);

  stroke(51);

  text('press k',475,410)

  tint(255, commoncraneTransparency);

  image(commoncraneImg,440,240,120,120);

}

​

//sound and animation triggers

​

function keyPressed(){

  if (key == 'a'){

    if(!chaffinchLooping){

      chaffinchSound.play();

      chaffinchSound.loop();

      chaffinchLooping = true;

      chaffinchTransparency = 255;

    } else {

      chaffinchSound.stop();

      chaffinchLooping = false;

      chaffinchTransparency = 128;

    }

  } 

  if (key == 's'){

    if(!woodpigeonLooping){

      woodpigeonSound.play();

      woodpigeonSound.loop();

      woodpigeonLooping = true;

      woodpigeonTransparency = 255;

    } else {

      woodpigeonSound.stop();

      woodpigeonLooping = false;

      woodpigeonTransparency = 128;

    }

  }

  if (key == 'd'){

    if(!hawfinchLooping){

      hawfinchSound.play();

      hawfinchSound.loop();

      hawfinchLooping = true;

      hawfinchTransparency = 255;

    } else {

      hawfinchSound.stop();

      hawfinchLooping = false;

      hawfinchTransparency = 128;

    }

  }

  if (key == 'f'){

    if(!barredwarblerLooping){

      barredwarblerSound.play();

      barredwarblerSound.loop();

      barredwarblerLooping = true;

      barredwarblerTransparency = 255;

    } else {

      barredwarblerSound.stop();

      barredwarblerLooping = false;

      barredwarblerTransparency = 128;

    }

  }

  if (key == 'g'){

    if(!goldenorioleLooping){

      goldenorioleSound.play();

      goldenorioleSound.loop();

      goldenorioleLooping = true;

      goldenorioleTransparency = 255;

    } else {

      goldenorioleSound.stop();

      goldenorioleLooping = false;

      goldenorioleTransparency = 128;

    }

  }

  if (key == 'h'){

    if(!woodlarkLooping){

      woodlarkSound.play();

      woodlarkSound.loop();

      woodlarkLooping = true;

      woodlarkTransparency = 255;

    } else {

      woodlarkSound.stop();

      woodlarkLooping = false;

      woodlarkTransparency = 128;

    }

  }

  if (key == 'j'){

    if(!corncrakeLooping){

      corncrakeSound.play();

      corncrakeSound.loop();

      corncrakeLooping = true;

      corncrakeTransparency = 255;

    } else {

      corncrakeSound.stop();

      corncrakeLooping = false;

      corncrakeTransparency = 128;

    }

  }

  if (key == 'k'){

    if(!commoncraneLooping){

      commoncraneSound.play();

      commoncraneSound.loop();

      commoncraneLooping = true;

      commoncraneTransparency = 255;

    } else {

      commoncraneSound.stop();

      commoncraneLooping = false;

      commoncraneTransparency = 128;

    }

  }

}