If you have no experience with P5.JS, just hit the play button on top to play. And the stop button to stop.

​

After that, some instructions will show to tell you how to play.

​

More project, check: http://archgary.com/

*/

​

music_vae = new mm.MusicVAE('https://storage.googleapis.com/magentadata/js/checkpoints/music_vae/drums_2bar_lokl_small');

music_vae.initialize();

​

vae_steps = 200;

vae_temperature = 3;

​

let drum;

let drumSpeed = 125;

let drumSpeedStep = 2;

​

//wii

let colour 

let controllers = []

let buttonList01 = [];

let valueList01 = [];

let val011 = 0;

let val012 = 0;

let buttonList02 = [];

let valueList02 = [];

let val021 = 0;

let val022 = 0;

let buttonList03 = [];

let valueList03 = [];

let val031 = 0;

let val032 = 0;

let buttonList04 = [];

let valueList04 = [];

let val041 = 0;

let val042 = 0;

let lerpValue = 0.5;

​

let c = 0;

let changeShape = 0;

​

//text

mouseAdding = 0;

​

​

//FFT Analysis

let band;

band = 64;

let w;

let spectrumRadius = 200;

let waveformRadius = 420;

​

//Switch

let run = false; //runAI_Temple

let shaderOn = false;

let FFTOn = true;

let WaveOn = true;

let shapeOn = true;

let materialOn = true;

let colorTROn = false;

​

//WebCam

let vScale = 20;

let capture;

let captureX = 0;

​

//shader

let camShader;

let graphic;

let theShader;

let shaderTexture;

//shaderLayer

// how many past frames should we store at once

// the more you store, the further back in time you can go

// however it's pretty memory intensive so don't push it too hard

let numLayers = 90;

// an array where we will store the past camera frames

let layers = [];

// three indices representing a given momeny in time

// index1 is current

// index2 is 30 frames behind

// index3 is 60 frames behind

let index1 = 0;

let index2 = numLayers/3; // 30

let index3 = numLayers/3 * 2; // 60

​

// colorTracker

var colors;

var trackingData;

​

var feedbackDelay = new Tone.PingPongDelay({

  "delayTime": "32t",

  "feedback": 0.25,

  "wet": 0.25

}).toMaster();

    //kick!

    var kick = new Tone.MembraneSynth({

            "envelope" : {

                "sustain" : 0,

                "attack" : 0.02,

                "decay" : 0.8

            },

            "octaves" : 10

        }).toMaster();

​

//snare

        var feedbackDelay = new Tone.PingPongDelay({

            "delayTime" : "32t",

            "feedback" : 0.25,

            "wet" : 0.25

        }).toMaster();

​

        var snare = new Tone.NoiseSynth({

            "volume" : -5,

            "envelope" : {

                "attack" : 0.001,

                "decay" : 0.1,

                "sustain" : 0

            },

            "filterEnvelope" : {

                "attack" : 0.001,

                "decay" : 0.1,

                "sustain" : 0

            }

        }).connect(feedbackDelay);

​

        var snare02 = new Tone.NoiseSynth({

            "volume" : 5,

            "envelope" : {

                "attack" : 0.001,

                "decay" : 0,

                "sustain" : 0

            },

            "filterEnvelope" : {

                "attack" : 0.1,

                "decay" : 0.1,

                "sustain" : 0

            }

        }).connect(feedbackDelay);

//synth

    var synth = new Tone.MembraneSynth(

      {

        pitchDecay : 0.05 ,

        octaves : 10 ,

        envelope : {

        attack : 0.001 ,

        decay : 0.1 ,

        sustain : 1 ,

        release : 1.4 ,

        }

      });

​

//bass!

    var distSound = new Tone.Distortion(0.8).toMaster();

    var feedbackDelay = new Tone.PingPongDelay({

            "delayTime" : "32n",

            "feedback" : 0.1,

            "wet" : 2,

        }).toMaster();

    var bass = new Tone.MonoSynth({

            "volume" : -10,

            "envelope" : {

                "attack" : 0.1,

                "decay" : 1,

                "release" : 2,

            },

            "filterEnvelope" : {

                "attack" : 1,

                "decay" : 0.001,

                "sustain" : 0.5,

                "baseFrequency" : 200,

                "octaves" : 2.6

            }

        }).connect(feedbackDelay);

//chord

​

        var chorus = new Tone.Chorus(4, 2.5, 0.5).toMaster();

        var feedbackDelay = new Tone.PingPongDelay({

            "delayTime" : "16n",

            "feedback" : 0.9,

            "wet" : 5,

        }).toMaster();

    var chord;

        var synth = new Tone.PolySynth(1, Tone.Synth, {

            "oscillator" : {

                //"partials" : [0, 2, 3, 4],    

                "type"  : 'sine'

            }

        }).connect(feedbackDelay).connect(chorus);

​

//lead

var leadDelay = new Tone.PingPongDelay("32n", 0.8).toMaster();

var tremolo = new Tone.Tremolo(2, 0.9).connect(leadDelay);

var lead = new Tone.MonoSynth({

    detune  : 0 ,

    oscillator  : {

    type  : 'sine'

    }  ,

    filter  : {

    Q  : 6 ,

    type  : 'lowpass' ,

    rolloff  : -24

    }  ,

    envelope  : {

    attack  : 0.1 ,

    decay  : 0.1 ,

    sustain  : 0.5 ,

    release  : 1

    }  ,

    filterEnvelope  : {

    attack  : 0.6 ,

    decay  : 0.2 ,

    sustain  : 0.5 ,

    release  : 2 ,

    baseFrequency  : 200 ,

    octaves  : 87 ,

    exponent  : 2

    }

}).connect(tremolo);

​

let myFont;

function preload() {

  myFont = loadFont('DIN Alternate Bold.ttf');

  //shader

  camShader = loadShader('effect.vert', 'effect.frag');

}

​

function setup() {

  smooth();

  let cnv = createCanvas(windowWidth, windowHeight, WEBGL);

  cnv.mousePressed(userStartAudio);

  //shader

  shaderTexture = createGraphics(windowWidth, windowHeight, WEBGL);

  shaderTexture.noStroke();

  vaePlayer = new mm.Player(); //vae

//wii

  colour = color('green')

  window.addEventListener("gamepadconnected", function(e) {

    gamepadHandler(e, true);

    /*

    console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",

      e.gamepad.index, e.gamepad.id,

      e.gamepad.buttons.length, e.gamepad.axes.length);

    */

  });

  window.addEventListener("gamepaddisconnected", function(e) {

    /*

    console.log("Gamepad disconnected from index %d: %s",

      e.gamepad.index, e.gamepad.id);

    colour = color(120, 0, 0)

    gamepadHandler(e, false);

    */

  });  

  //FFT

  mic = new p5.AudioIn();

  mic.start();

  fft = new p5.FFT(0,band);

  fft.setInput(mic);

  w = windowWidth/band;

​

  //WebCam

  capture = createCapture(VIDEO);

  capture.size(windowWidth, windowHeight);

​

​

  //shaderLayer

  // this layer will use webgl with our shader

  shaderLayer = createGraphics(windowWidth, windowHeight, WEBGL);

​

  // create a ton of createGraphics layers

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

    let l = createGraphics(windowWidth, windowHeight);

    layers.push(l);

  }

  //colorTracker

​

  capture.position(0,0) //move the capture to the top left

  capture.style('opacity',0.0)// use this to hide the capture later on   

  capture.id("myVideo"); //give the capture an ID so we can use it in the tracker below.

  // colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);

  colors = new tracking.ColorTracker(['yellow']);

  tracking.track('#myVideo', colors); // start the tracking of the colors above on the camera in p5

  //start detecting the tracking

  colors.on('track', function(event) { //this happens each time the tracking happens

      trackingData = event.data // break the trackingjs data into a global so we can access it with p5

  });

}

​

​

function draw() {

  background(0);

  //FFT set

  let spectrum = fft.analyze();  

​

  /*test with Cam

  push();

  translate(-windowWidth/2, -windowHeight/2);   

  let w = capture.width;

  let h = capture.height;

  copy(capture,w/2, 0,100,h, captureX,0,100,h);

​

  captureX = captureX + 1;

​

    if(captureX > windowWidth){

       captureX = 0;

     }  

  pop(); 

  */

  push();

​

  pop();

  if(shaderOn){

  push();  

  if(spectrum[2]>70){

  //translate(windowWidth, 0);

  scale(-1, 1);    

​

  /*  

  //webShader

  // shader() sets the active shader with our shader

  shaderTexture.shader(camShader);

  // lets just send the cam to our shader as a uniform

  camShader.setUniform('tex0', capture);

  camShader.setUniform('resolution', [width, height]);//flyeyes    

  // rect gives us some geometry on the screen

  //camShader.setUniform('mouseX', mouseX/width);//threshold   

  shaderTexture.rect(0,0,width,height); 

  texture(shaderTexture);

  rectMode(CENTER);

  rect(0,0,windowWidth,windowHeight);

  */ 

  //shaderLayer

  // draw the camera on the current layer 

  layers[index1].image(capture, 0, 0, capture.width, capture.height);

​

  // shader() sets the active shader with our shader

  shaderLayer.shader(camShader);

​

  // send the camera and the two other past frames into the camera feed

  camShader.setUniform('tex0', layers[index1]);

  camShader.setUniform('tex1', layers[index2]);

  camShader.setUniform('tex2', layers[index3]);

​

​

  // rect gives us some geometry on the screen

  shaderLayer.rect(0,0, width, height);

  texture(shaderLayer);

  rectMode(CENTER);

  rect(0,0,width, height);   

  index1 = (index1 + 1) % layers.length;

  index2 = (index2 + 1) % layers.length;

  index3 = (index3 + 1) % layers.length;     

  }

  pop();

  }

​

  push();

  translate(-windowWidth/2,-windowHeight/2);

  if(run){

  if (!(vaePlayer.isPlaying())) {

    music_vae

      .sample(1, vae_temperature)

      .then((samples) => {

        vaePlayer.start(drum, drumSpeed)

      });

    }

  }

  /*

  if (drum==null){

      fill(255);

      textFont(myFont);

      textAlign(CENTER);

      textSize(48);

      text("Press to Start", width/2, height/2-100); 

  }else if(!drum || buttonList01[1] == null){

      fill(255);    

      textFont(myFont);

      textAlign(CENTER);

      textSize(18);

      text("Press to Change", width/2, height/2-100); 

  }*/

  if(mouseAdding > 1){

      fill(255);    

      textFont(myFont);

      textAlign(CENTER);

      textSize(18);

      text("1st = Press 'g' to generate/switch", width/2, height/2-140); 

      text("2nd = Press space to play/pause", width/2, height/2-120);

      text("3rd = Drag/Click to make sound", width/2, height/2+100);    

      text("4th = Press c to detect yellow object", width/2, height/2+120);    

      textFont(myFont);

      textAlign(LEFT);

      textSize(12);

      text("1. Press 'g' = Generate/Switch AI tempo", 10, 50);  

      text("2. Press space = Play/Pause", 10, 75);   

      text("3. Drag/Click to make sound", 10, 100);       

      text("*. Press 'c' = ColorTracking On/off", 10, 125);      

      text("*. Press 'f' = FFT On/off", 10, 150);   

      text("*. Press 'w' = Wave On/off", 10, 175);      

      text("*. Press 'b' = Shader On/off", 10, 200); 

      text("*. Press 's' = Shape On/off", 10, 225);   

      text("*. Press 'j' = Switch Shape", 10, 250); 

      text("*. Press 'm' = Wireframe On/off", 10, 275);  

      textSize(16);

      text("*. Press 'a' = Fullscreen On/Off", 10, 330);       

      text("*. Press 'r' = reset", 10, 350);  

  }else{

      fill(255);

      textFont(myFont);

      textAlign(CENTER);

      textSize(48);

      text("Click to Start", width/2, height/2-100); 

      textSize(18);

      text("fullscreen = Press 'a' = fullscreen", width/2, height/2-80);      

      text("fullscreen = Press 'a' = fullscreen", width/2, height/2+100);

  }

​

​

   for(let i=0; i<=width; i+=width/10){

       for(let j=0; j<=height; j+=height/10){

         stroke(255);

         strokeWeight(1);

         push();

         translate(i,j);

         line(-5,0,5,0);

         line( 0,-5,0,5);         

         pop();

       } 

   }

​

  push();  

  //colorTracker

   //console.log(trackingData); 

  translate(windowWidth, 0);

  scale(-1, 1);

  if(trackingData){ //if there is tracking data to look at, then...

    for (var i = 0; i < trackingData.length; i++) { //loop through each of the detected colors

       //console.log( trackingData[i] )     

        strokeWeight(3);

      stroke(0,255,255);

      if(colorTROn){   

       //console.log( trackingData[i] )    

      let newTrackX = map(trackingData[0].x, 0, capture.width, 0, width);

      let newTrackY = map(trackingData[0].y, 0, capture.height, 0, height);

​

      rect(newTrackX,newTrackY,trackingData[0].width,trackingData[0].height);

      if(frameCount%3 == 0){

      wiiControl(true,false,-(newTrackX-windowWidth),newTrackY);             }

      //rect(trackingData[0].x,trackingData[0].y,trackingData[0].width,trackingData[0].height);

      //wiiControl(true,false,-(trackingData[0].x-windowWidth),trackingData[0].y);

      }

    }

  }  

  pop();  

​

​

  //wii

  drawGamepad(); 

  noStroke();

  //controller01

  let wiiBut0101 = buttonList01[0];

  let wiiBut0102 = buttonList01[1];

  if(wiiBut0101){

    strokeWeight(2);

    stroke(255);

    fill(255,0,100);  

  }else if(wiiBut0102){

    strokeWeight(2);

    stroke(255);

    fill(0,200,255);

    background(200,255,255,100)

  }else{

    noFill();

    strokeWeight(2);

    stroke(255);

  }

  if(valueList01[0] !== null){

  let wiiXco01 = valueList01[0]+1;

  let wiiYco01 = valueList01[1]+1;  

  wiiXco01 = map(wiiXco01,0,2,0,width);

  wiiYco01 = map(wiiYco01,0,2,0,height);

  ellipse(wiiXco01,wiiYco01,150);

          wiiControl(wiiBut0101,wiiBut0102,wiiXco01,wiiYco01);

  }

  //controller02

  let wiiBut0201 = buttonList02[0];

  let wiiBut0202 = buttonList02[1];

  if(wiiBut0201){  

    strokeWeight(2);

    stroke(255);    

    fill(0,100,255);

  }else if(wiiBut0202){    

    strokeWeight(2);

    stroke(255);

    fill(0,200,255);

    background(200,255,255,100)    

  }else{

    noFill();

    strokeWeight(2);

    stroke(255);

  }

  if(valueList02[0] !== null){

  let wiiXco02 = valueList02[0]+1;

  let wiiYco02 = valueList02[1]+1;  

  wiiXco02 = map(wiiXco02,0,2,0,width);

  wiiYco02 = map(wiiYco02,0,2,0,height);

  ellipse(wiiXco02,wiiYco02,150); 

 wiiControl(wiiBut0201,wiiBut0202,wiiXco02,wiiYco02);

  } 

  //controller03

  let wiiBut0301 = buttonList03[0];

  let wiiBut0302 = buttonList03[1];

  if(wiiBut0301){   

    strokeWeight(2);

    stroke(255);   

    fill(0,255,100);

  }else if(wiiBut0302){   

    strokeWeight(2);

    stroke(255);    

    fill(0,200,255);

    background(200,255,255,100)

  }else{

    noFill();

    strokeWeight(2);

    stroke(255);

  }

  if(valueList03[0] !== null){

  let wiiXco03 = valueList03[0]+1;

  let wiiYco03 = valueList03[1]+1;  

  wiiXco03 = map(wiiXco03,0,2,0,width);

  wiiYco03 = map(wiiYco03,0,2,0,height);

  ellipse(wiiXco03,wiiYco03,150); 

 wiiControl(wiiBut0301,wiiBut0302,wiiXco03,wiiYco03); 

  }

  //controller04

  let wiiBut0401 = buttonList04[0];

  let wiiBut0402 = buttonList04[1];

  if(wiiBut0401){

    strokeWeight(2);

    stroke(255);    

    fill(255,200,0);

  }else if(wiiBut0402){    

    strokeWeight(2);

    stroke(255);    

    fill(0,200,255);

    background(200,255,255,100)

  }else{

    noStroke();    

    noFill();

    strokeWeight(2);

    stroke(255);

  }

  if(valueList04[0] !== null){

  let wiiXco04 = valueList04[0]+1;

  let wiiYco04 = valueList04[1]+1;  

  wiiXco04 = map(wiiXco04,0,2,0,width);

  wiiYco04 = map(wiiYco04,0,2,0,height);

  ellipse(wiiXco04,wiiYco04,150); 

 wiiControl(wiiBut0401,wiiBut0402,wiiXco04,wiiYco04);  

  }

​

  //FFT visualization

​

  /*

  beginShape();

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

    stroke(2);

    stroke(255);

    vertex(i*w, map(spectrum[i], 0, 255, height, 0));    

    //point(i, map(spectrum[i], 0, 255, height, 0));    

    //let h = -height + map(spectrum[i], 0, 255, height, 0);

    //noStroke();

    //fill(255,0,0);

    //rect(x, height, windowWidth / spectrum.length, h )

  }

  endShape();  

  */

​

  push();

  if(FFTOn){  

  let d = 360/band;

  translate(windowWidth/2, windowHeight/2);

  beginShape();

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

    strokeWeight(2);

    stroke(255);

    //let x = map(i*d, 0, 360, 0, 360);

    let x = i*d;

    let r = map(spectrum[i], 0, 255, spectrumRadius, 0)

    vertex(r*cos(radians(x)), r*sin(radians(x)));

  }

  endShape(CLOSE);  

  }    

  pop();

​

​

  let waveform = fft.waveform();

  if(WaveOn){

  /*  

  noFill();

  beginShape();

  stroke(20);

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

    let x = map(i, 0, waveform.length, 0, width);

    let y = map( waveform[i], -1, 1, 0, height);

    vertex(x,y);

  }

  endShape();

  */

  push();

  let e= 360/band;

  translate(windowWidth/2, windowHeight/2);  

  noFill();

  beginShape();

  strokeWeight(5);    

  stroke(255,200,0);

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

    //let x = map(i*e, 0, 360, 0, 360);

    let x = i*e

    let r = map( waveform[i], -1, 1, 0, waveformRadius);

    vertex(r*cos(radians(x)), r*sin(radians(x)));

  }

  endShape(CLOSE);  

  pop();

  }

  buttonList01 = [];

  valueList01 = [];

  buttonList02 = [];

  valueList02 = [];  

  buttonList03 = [];

  valueList03 = [];

  buttonList04 = [];

  valueList04 = []; 

  trackingData = []; 

  pop();

  if(materialOn){

  normalMaterial();

  noStroke();}

  else{

  stroke(255);

  noFill();

  }

  push();

  rotateZ(frameCount * 0.1);

  rotateX(frameCount * 0.1);

  rotateY(frameCount * 0.1);

  if(shapeOn){

  if(changeShape % 4 == 0){

  //box(map(spectrum[3],0,255,50,400));

  //webCam

  //texture(capture);

  box(70);    

  }else if(changeShape % 4 == 1){

  cone(70, 70);           

  }else if(changeShape % 4 == 2){

  torus(50, 20, 16, 10);

  }else{

  sphere(70, 20);

  }

  }

  pop();

  /*

  //webCam  

  push();

  imageMode(CENTER);

  image(capture, 0, 0, windowWidth, windowHeight);

  pop();

  //

  */

  push();

  if(mouseIsPressed){

  mouseDragged();

  }

  pop();

​

​

}

​

​

​

​

function wiiControl(wiiButton01, wiiButton02, wiiX, wiiY){

  var  xPos = map(wiiX, 0, width, 0, 4);

  var  yPos = map(wiiY, 0, height, 0, 4);

if(wiiButton01){

if (xPos < 1) {

    //DRUMS

  if (yPos < 1) {

      snare.triggerAttackRelease();

      fill(255,200,0,50);

      noStroke();

      rectMode(CENTER);

      rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);   

  } else if (yPos > 1 && yPos < 2) {

      snare02.triggerAttackRelease();

      fill(255,100,0,50);

      noStroke();

      rectMode(CENTER);

      rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);    

  } else if (yPos > 2 && yPos < 3) {

    kick.triggerAttackRelease('G1', '2n');

      fill(255,100,100,50);

      noStroke();

      rectMode(CENTER);

      rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);    

  } else {

      kick.triggerAttackRelease('A1', '2n');

      fill(255,0,100,50);

      noStroke();

      rectMode(CENTER);

      rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);    

  }

} else if (xPos > 1 && xPos < 2) {

  //CHORDS

  if (yPos < 1) {

    chord = ['C4', 'F4', 'G4'];

    fill(0,255,255,50);

    noStroke();

    rectMode(CENTER);

    rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);    

  } else if (yPos > 1 && yPos < 2) {

    chord = ['G3', 'C4', 'Eb4'];

    fill(0,100,255,50); 

    noStroke();

    rectMode(CENTER);

    rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);    

  } else if (yPos > 2 && yPos < 3) {

    chord = ['E4', 'D3', 'C4'];

    fill(100,100,255,50);

    noStroke();

    rectMode(CENTER);

    rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);    

  } else {

    chord = ['C4', 'E3', 'G4'];

    fill(200,0,255,50);

    noStroke();

    rectMode(CENTER);

    rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);    

  }

    synth.triggerAttackRelease(chord, '2n');  

} else if (xPos > 2 && xPos < 3) {

//BASS

  if (yPos < 1) {

      bass.triggerAttackRelease('E4', '2n');

      fill(255,255,0,50);

      noStroke();

      rectMode(CENTER);

      rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);    

  } else if (yPos > 1 && yPos < 2) {

      bass.triggerAttackRelease('C2', '2n');

      fill(200,255,0,50);

      noStroke();

      rectMode(CENTER);

      rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);    

  } else if (yPos > 2 && yPos < 3) {

        bass.triggerAttackRelease('G3', '2n');

      fill(0,255,0,50);   

      noStroke();

      rectMode(CENTER);

      rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);    

  } else {

      bass.triggerAttackRelease('C4', '2n');

      fill(0,255,120,50);

      noStroke();

      rectMode(CENTER);

      rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);    

  }

​

} else {

​

//LEAD

  if (yPos < 1) {

    lead.triggerAttackRelease('A4', '4n');

    fill(255,0,200,50);   

    noStroke();

    rectMode(CENTER);

    rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);    

  } else if (yPos > 1 && yPos < 2) {

    lead.triggerAttackRelease('G4', '4n');

    fill(255,0,150,50);  

    noStroke();

    rectMode(CENTER);

    rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);    

  } else if (yPos > 2 && yPos < 3) {

    lead.triggerAttackRelease('E4', '4n')

    fill(255,0,100,50); 

    noStroke();

    rectMode(CENTER);

    rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);    

  } else {

    lead.triggerAttackRelease('C4', '4n');

    fill(255,0,50,50); 

    noStroke();

    rectMode(CENTER);

    rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);    

  }

}

}

  if(wiiButton02){

    music_vae

    .sample(1, vae_temperature)

    .then((samples) => {

      drum = samples[0];

      //download();

​

    })

    changeShape = changeShape + 1;

  }

}

​

function mouseDragged() {

  //translate(-windowWidth/2,-windowHeight/2)

  /*

  if (mouseButton === CENTER) {

    snare.triggerAttackRelease();

  }

​

  if (mouseButton === LEFT) {

    kick.triggerAttackRelease('A#1', '8n');

  }*/

  //var  xPos = map(mouseX, 0, width, 0, 4);

  //var  yPos = map(mouseY, 0, height, 0, 4);

  mouseAdding = mouseAdding + 1;

​

  var  xPos = map(mouseX, 0, width, 0, 4);

  var  yPos = map(mouseY, 0, height, 0, 4);

  push();

  translate(-windowWidth/2,-windowHeight/2);

  fill(0,255,255,100);

  strokeWeight(2);

  stroke(255);

  circle(mouseX, mouseY, 200);

​

​

if (xPos < 1) {

    //DRUMS

  if (yPos < 1) {

      snare.triggerAttackRelease();

      fill(255,200,0,50);

      noStroke();

      rectMode(CENTER);

      rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);   

  } else if (yPos > 1 && yPos < 2) {

      snare02.triggerAttackRelease();

      fill(255,100,0,50);

      noStroke();

      rectMode(CENTER);

      rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);    

  } else if (yPos > 2 && yPos < 3) {

    kick.triggerAttackRelease('G1', '2n');

      fill(255,100,100,50);

      noStroke();

      rectMode(CENTER);

      rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);    

  } else {

      kick.triggerAttackRelease('A1', '2n');

      fill(255,0,100,50);

      noStroke();

      rectMode(CENTER);

      rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);    

  }

} else if (xPos > 1 && xPos < 2) {

  //CHORDS

  if (yPos < 1) {

    chord = ['C4', 'F4', 'G4'];

    fill(0,255,255,50);

    noStroke();

    rectMode(CENTER);

    rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);    

  } else if (yPos > 1 && yPos < 2) {

    chord = ['G3', 'C4', 'Eb4'];

    fill(0,100,255,50); 

    noStroke();

    rectMode(CENTER);

    rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);    

  } else if (yPos > 2 && yPos < 3) {

    chord = ['E4', 'D3', 'C4'];

    fill(100,100,255,50);

    noStroke();

    rectMode(CENTER);

    rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);    

  } else {

    chord = ['C4', 'E3', 'G4'];

    fill(200,0,255,50);

    noStroke();