var animal; //animal image

var space; //space sound

​

var stepW; //animal moving step

var stepH;

​

var sampler;

var notes = ['C1', 'D1', 'E1', 'F1', 'G1', 'A1', 'B1', 'C2'];

var keys = ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k'];

​

var para; //paragraph dom

var sel; //dropdown menu to select animals

var selectedAnimal; 

var selected = false;

var animalIsSinging = false;

​

// function preload() {

//   space = loadSound('animalImage/space.mp3');

// }

​

function setup() {

  var cnv = createCanvas(1080 * 0.9, 720 * 0.9);

  cnv.position((windowWidth - width) / 2, 70);

    stepW = width / notes.length;

  stepH = height / notes.length;

​

  imageMode(CENTER);

  universe = loadImage('universe-1.jpg');

  //initialize animal as blank(when no selection is being made);

  animal = loadImage('blank.png');

  // if (space.isLoaded) {

  //   space.loop();

  // }

    para = createP('Select your animal below  Try press key asdfghjk');

  para.position((windowWidth - width) / 2, 70+height);

  textAlign(CENTER);

  //dropdown menu to select animal

  sel = createSelect();

  sel.position((windowWidth - width) / 2, 70+height );

  sel.option('select an animal');

  sel.option('dog');

  sel.option('cat');

  sel.option('cow');

  sel.option('sheep');

  sel.option('chicken');

  sel.option('crow');

  sel.changed(selectAnimal);

}

​

function draw() {

  image(universe, width / 2, height / 2, universe.width * 4 / 5, universe.height * 4 / 5);

  //display selected animal

  if (selected == true) {

    image(animal, width / 2, height / 2);

  }

  //animate animal while play notes

  if (animalIsSinging == true) {

    for (i = 0; i < 8; i++) {

      if (keyPressed && key == keys[i]) {

        translate(stepW / 2 + i * stepW, height - stepH / 2 - i * stepH);

        rotate(i * 2 * PI / 4);

        scale(pow(0.9, i));

        image(animal, 0 + 0, 0);

      }

    }

  }

}

​

​

//play notes

function keyPressed() {

  selected = false;

  animalIsSinging = true;

  let note;

  for (i = 0; i < 8; i++) {

    if (key == keys[i]) {

      note = notes[i];

    }

  }

​

  if (note && sampler.loaded) {

    // Sampler will repitch the closest sample

    sampler.triggerAttack(note);

  }

}

​

function keyReleased() {

  sampler.triggerRelease();

}

​

​

function selectAnimal() {

  selected = true;

  animalIsSinging = false;

  selectedAnimal = sel.value(); //string 

​

  //overwrite animal image each time new animal is selected

  animal = loadImage( selectedAnimal + '.png');

​

  sampler = new Tone.Sampler({

    "F1": selectedAnimal + '.wav'

  });

​

  sampler.envelope = {

    attack: 0.2,

    decay: 0,

    sustain: 1,

    release: 0.1

  }

  sampler.toMaster();

}