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;

​

//3D

let c = 0;

let changeShape = 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

let numLayers = 90;

let layers = [];

let index1 = 0;

let index2 = numLayers/3; // 30

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

​

// colorTracker

var colors;

var trackingData;

​

//Music Pad Tones setup

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);

​

//Text Font & Show

let myFont;

function preload() {

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

  //shader

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

}

mouseAdding = 0;

​

​

//Main Setup

function setup() {

  smooth();

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

  cnv.mousePressed(userStartAudio);

  //shader

  shaderTexture = createGraphics(windowWidth, windowHeight, WEBGL);

  shaderTexture.noStroke();

  //vae player setup

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

​

  //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);

  }

  capture.position(0,0)

  capture.style('opacity',0.0)//

  /*

  //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(); 

  */

  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();//push01

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

  //VAE Music

  if(run){

  if (!(vaePlayer.isPlaying())&&frameCount%20==0) {

    music_vae

      .sample(1, vae_temperature)

      .then((samples) => {

        vaePlayer.start(drum, drumSpeed)

      });

    }

  }

  //Text         

  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);    

      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, 125);   

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

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

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

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

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

      textSize(16);

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

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

  }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);

  }

​

  //background Grids

   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();//push02  

  //colorTracker

  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){

      }

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

      }

    }

  }  

  pop();//pop02  

  */

  noStroke();

​

  //FFT visualization  

  push();//push03

  noFill();

  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();//pop03

​

​

  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();//push04

  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();//pop04

  }

  pop();//pop01

  if(materialOn){

  normalMaterial();

  noStroke();}

  else{

  stroke(255);

  noFill();

  }

  push();//push05

  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();//pop05

​

  push();//push06

  if(mouseIsPressed){

  mousePressed();

  }

  pop();//pop06

}

​

​

function mousePressed() {

  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();

    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);    

  }

}

    pop();

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

function keyPressed() {

  //playVAE();

  //drumSpeed = drumSpeed - drumSpeedStep;

  //if(drumSpeed <= 30 || drumSpeed >= 400){

  //  drumSpeedStep = - drumSpeedStep;

  //}

  if(key == 'g' || 'G'){

  music_vae

    .sample(1, vae_temperature)

    .then((samples) => {

      drum = samples[0];

      //download();

    })

  }

​

  if(key == ' '){

     run = !run;  

  }

  if(key == 'b'){

     shaderOn = !shaderOn;  

  }  

​

  if(key == 'f'){

     FFTOn = !FFTOn;  

  }  

  if(key == 'w'){

     WaveOn = !WaveOn;  

  } 

  if(key == 's'){

     shapeOn = !shapeOn;  

  }    

  if(key == 'j'){

     changeShape = changeShape + 1;  

  } 

  if(key == 'm'){

     materialOn = !materialOn; 

  }

  /*

  if(key == 'c'){

     colorTROn = !colorTROn; 

  }*/    

  if(key == 'a'){

    let fs = fullscreen();

    fullscreen(!fs);

  }

  if(key == 'r'){

    //setup();

    mouseAdding = 0;

    changeShape = 0;

    run = false;

    shaderOn = false;

    FFTOn = true;

    WaveOn = true;

    shapeOn = true;

    materialOn = true;

    colorTROn = false;

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

  }

}

​

function playVAE() {

  if (vaePlayer.isPlaying()) {

    vaePlayer.stop();

    return;

  }

​

  music_vae

    .sample(1, vae_temperature)

    .then((samples) => {

      drum = samples[0];

    })

  /*

     music_vae

    .sample(1, vae_temperature)

    .then((samples) => {

    vaePlayer.start(drum,drumSpeed)

  });*/

}

​