let beet, beet1, beet2, beet3;

let quadrant, soundName, textSz = 60;

​

// SOUNDS

// Create a Players object, load samples

var samples = new Tone.Players({

  "door": "samples/CARNAGE_door_sample.mp3",

  "kick": "samples/CARNAGE_kick_sample.mp3",

  "clap": "samples/CARNAGE_clap_sample.mp3",

  "tick": "samples/CARNAGE_tick_sample.mp3"

});

​

samples.toMaster();

​

// Create loop

Tone.Transport.scheduleRepeat(playBeat, "0.9s");

​

// Once all audio files have been loaded, start the Tone playhead

Tone.Buffer.on('load', play);

​

function play() {

  Tone.Transport.start();

}

​

// GRAPHICS

function setup() {

  beet = loadImage('beet-snark.png');

  beet1 = loadImage('beet-excite.png');

  beet2 = loadImage('beet-ok.png'); 

  beet3 = loadImage('beet-snark.png');

  createCanvas(windowWidth, windowHeight);

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

    for(let j = 0; j < 50; j++){

      shapes.push(new Bowtie(30*i, 30*j, 8));

    }

  } 

}

​

// Loop

function playBeat(time) {

  if (samples.loaded && mouseX != 0) {

    if(mouseX < width/2){

      // left half

      if(mouseY < height/2){

        samples.get("door").start(time);

        soundName = "door";

        beet = beet2;

        quadrant = 1;

      }else{

        samples.get("tick").start(time);

        soundName = "tick";

        beet = beet1;

        quadrant = 3;

      }

    }else{

      // right half

      if(mouseY < height/2){

        samples.get("clap").start(time);

        soundName = "clap";

        beet = beet3;

        quadrant = 2;

      }else{

        samples.get("kick").start(time);

        soundName = "kick";

        beet = beet2;

        quadrant = 4;

      } 

    }

  } 

}

​

function draw() {

  background(255, 204, 0);

  fill(0, 100, 255);

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

      shapes[i].update();

  }

  if(quadrant != 0){

    if(quadrant === 1){

      fill('rgba(100%,0%,100%,0.5)');

      rect(0, 0, width/2, height/2);

      textSize(textSz);

      fill('rgb(100%,100%,100%)');

      text(soundName, (width/2)-(textSz*2.2), (height/2)-20);

    }else if(quadrant === 2){

      fill('rgba(100%, 58%, 0%,0.5)');

      rect(width/2, 0, width/2, height/2);

      textSize(textSz);

      fill('rgb(100%,100%,100%)');

      text(soundName, (width/2)+2.2, (height/2)-20);

    }else if(quadrant === 3){

      fill('rgba(0%,100%, 100%,0.5)');

      rect(0, height/2, width/2, height/2);

      textSize(textSz);

      fill('rgb(100%,100%,100%)');

      text(soundName, (width/2)-98, (height/2)+60);

    }else if(quadrant === 4){

      fill('rgba(40%,0%,100%,0.5)');

      rect(width/2, height/2, width/2, height/2);

      textSize(textSz);

      fill('rgb(100%,100%,100%)');

      text(soundName, (width/2)+2.2, (height/2)+60);

    }

  }

  fill(255, 0, 100);

  noStroke();

  image(beet, mouseX-40, mouseY-40, 180, 180);

}

​

// Draw a Bowtie shape

function Bowtie(x, y, length){

  this.x = x;

  this.y = y;

  this.length = length;

  this.update = function() {

  let angle = atan2(mouseY-y, mouseX-x);

  push();

  translate(this.x, this.y);

  rotate(angle);

  beginShape();

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

    if(i%2 == 0){

     vertex(4*i,-this.length);

    }else{

     vertex(i*this.length, this.length);

    }

  }

  endShape(CLOSE);

  pop();

  }

}

​

​

​

​

​