xxxxxxxxxx
975
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;
//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;
//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
var feedbackDelay = new Tone.PingPongDelay({
"delayTime": "8t",
"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" : "8t",
"feedback" : 0.25,
"wet" : 0.25
}).toMaster();
var snare = new Tone.NoiseSynth({
"volume" : -5,
"envelope" : {
"attack" : 0.001,
"decay" : 0.2,
"sustain" : 0
},
"filterEnvelope" : {
"attack" : 0.001,
"decay" : 0.1,
"sustain" : 0
}
}).connect(feedbackDelay);
//bass!
var autoWah = new Tone.AutoWah(120, 10, -20).toMaster();
var bass = new Tone.MonoSynth({
"volume" : -10,
"envelope" : {
"attack" : 0.1,
"decay" : 0.3,
"release" : 2,
},
"filterEnvelope" : {
"attack" : 0.001,
"decay" : 0.01,
"sustain" : 0.5,
"baseFrequency" : 200,
"octaves" : 2.6
}
}).connect(autoWah);
var chord;
var feedbackDelay = new Tone.PingPongDelay({
"delayTime" : "32n",
"feedback" : 0.9,
"wet" : 0.1,
}).toMaster();
var synth = new Tone.PolySynth(6, Tone.Synth, {
"oscillator" : {
"partials" : [0, 2, 3, 4],
}
}).connect(feedbackDelay);
//lead
var leadDelay = new Tone.PingPongDelay("4n", 0.2).toMaster();
var tremolo = new Tone.Tremolo(2, 0.75).connect(leadDelay);
var lead = new Tone.MonoSynth({
detune : 0 ,
oscillator : {
type : 'square'
} ,
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();
createCanvas(windowWidth, windowHeight, WEBGL);
//shader
shaderTexture = createGraphics(710, 400, 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.hide();
//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);
}
}
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){
/*
//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, width, 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,windowWidth,windowHeight);
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);
}
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();
}
}
//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 = [];
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();
//
*/
}
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,100);
noStroke();
rectMode(CENTER);
rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);
} else if (yPos > 1 && yPos < 2) {
kick.triggerAttackRelease('C3', '8n');
fill(255,100,0,100);
noStroke();
rectMode(CENTER);
rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);
} else if (yPos > 2 && yPos < 3) {
kick.triggerAttackRelease('G2', '8n');
fill(255,100,100,100);
noStroke();
rectMode(CENTER);
rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);
} else {
kick.triggerAttackRelease('C1', '8n');
fill(255,0,100,100);
noStroke();
rectMode(CENTER);
rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);
}
} else if (xPos > 1 && xPos < 2) {
//BASS
if (yPos < 1) {
bass.triggerAttackRelease('E2', '8n');
fill(255,255,0,100);
noStroke();
rectMode(CENTER);
rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);
} else if (yPos > 1 && yPos < 2) {
bass.triggerAttackRelease('C2', '8n');
fill(200,255,0,100);
noStroke();
rectMode(CENTER);
rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);
} else if (yPos > 2 && yPos < 3) {
bass.triggerAttackRelease('G1', '8n');
fill(0,255,0,100);
noStroke();
rectMode(CENTER);
rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);
} else {
bass.triggerAttackRelease('C1', '8n');
fill(0,255,120,100);
noStroke();
rectMode(CENTER);
rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);
}
} else if (xPos > 2 && xPos < 3) {
//CHORDS
if (yPos < 1) {
chord = ['C4', 'E4', 'G4'];
fill(0,255,255,100);
noStroke();
rectMode(CENTER);
rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);
} else if (yPos > 1 && yPos < 2) {
chord = ['G3', 'C4', 'E4'];
fill(0,100,255,100);
noStroke();
rectMode(CENTER);
rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);
} else if (yPos > 2 && yPos < 3) {
chord = ['E3', 'G3', 'C4'];
fill(100,100,255,100);
noStroke();
rectMode(CENTER);
rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);
} else {
chord = ['C3', 'E3', 'G3'];
fill(200,0,255,100);
noStroke();
rectMode(CENTER);
rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);
}
synth.triggerAttackRelease(chord, '8n');
} else {
//LEAD
if (yPos < 1) {
lead.triggerAttackRelease('A4', '4n');
fill(255,0,200,100);
noStroke();
rectMode(CENTER);
rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);
} else if (yPos > 1 && yPos < 2) {
lead.triggerAttackRelease('G4', '4n');
fill(255,0,150,100);
noStroke();
rectMode(CENTER);
rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);
} else if (yPos > 2 && yPos < 3) {
lead.triggerAttackRelease('E4', '4n');
fill(255,0,100,100);
noStroke();
rectMode(CENTER);
rect(windowWidth/2,windowHeight/2,windowWidth,windowHeight);
} else {
lead.triggerAttackRelease('C4', '4n');
fill(255,0,50,100);
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 mousePressed() {
/*
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);
var xPos = map(mouseX, 0, width, 0, 4);
var yPos = map(mouseY, 0, height, 0, 4);
if (xPos < 1) {
//DRUMS
if (yPos < 1) {
snare.triggerAttackRelease();
} else if (yPos > 1 && yPos < 2) {
kick.triggerAttackRelease('C3', '8n');
} else if (yPos > 2 && yPos < 3) {
kick.triggerAttackRelease('G2', '8n');
} else {
kick.triggerAttackRelease('C1', '8n');
}
} else if (xPos > 1 && xPos < 2) {
//BASS
if (yPos < 1) {
bass.triggerAttackRelease('E2', '8n');
} else if (yPos > 1 && yPos < 2) {
bass.triggerAttackRelease('C2', '8n');
} else if (yPos > 2 && yPos < 3) {
bass.triggerAttackRelease('G1', '8n');
} else {
bass.triggerAttackRelease('C1', '8n');
}
} else if (xPos > 2 && xPos < 3) {
//CHORDS
if (yPos < 1) {
chord = ['C4', 'E4', 'G4'];
} else if (yPos > 1 && yPos < 2) {
chord = ['G3', 'C4', 'E4'];
} else if (yPos > 2 && yPos < 3) {
chord = ['E3', 'G3', 'C4'];
} else {
chord = ['C3', 'E3', 'G3'];
}
synth.triggerAttackRelease(chord, '8n');
} else {
//LEAD
if (yPos < 1) {
lead.triggerAttackRelease('A4', '4n');
} else if (yPos > 1 && yPos < 2) {
lead.triggerAttackRelease('G4', '4n');
} else if (yPos > 2 && yPos < 3) {
lead.triggerAttackRelease('E4', '4n');
} else {
lead.triggerAttackRelease('C4', '4n');
}
}
}
function keyPressed() {
//playVAE();
//drumSpeed = drumSpeed - drumSpeedStep;
//if(drumSpeed <= 30 || drumSpeed >= 400){
// drumSpeedStep = - drumSpeedStep;
//}
if(key == '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 == 'm'){
materialOn = !materialOn;
}
}
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)
});*/
}
function download() {
if (!drum) {
alert('You must generate a trio before you can download it!');
} else {
saveAs(new File([mm.sequenceProtoToMidi(drum)], 'drum.mid'));
}
}
//
function gamepadHandler(event, connecting) {
let gamepad = event.gamepad;
if (connecting) {
//print("Connecting to controller " + gamepad.index)
controllers[gamepad.index] = gamepad
} else {
delete controllers[gamepad.index]
}
}
function drawGamepad() {
var gamepads = navigator.getGamepads();
for (let i in controllers) {
let controller01 = gamepads[0];
let controller02 = gamepads[1];
let controller03 = gamepads[2];
let controller04 = gamepads[3];
//controller01
if(controller01 !== null){
if (controller01.buttons) {
let but01 = buttonPressed(controller01.buttons[0]);
let but02 = buttonPressed(controller01.buttons[1]);
buttonList01.push(but01);
buttonList01.push(but02);
}
if (controller01.axes) {
let axes = controller01.axes
let val01;
let val02;
val01 = controller01.axes[0];
val02 = controller01.axes[1];
val011 = lerp(val011, val01, lerpValue);
val012 = lerp(val012, val02, lerpValue);
valueList01.push(val011);
valueList01.push(val012);
}
}
//controller02
if(controller02 !== null){
if (controller02.buttons) {
let but01 = buttonPressed(controller02.buttons[0]);
let but02 = buttonPressed(controller02.buttons[1]);
buttonList02.push(but01);
buttonList02.push(but02);
}
if (controller02.axes) {
let axes = controller02.axes
let val01;
let val02;
val01 = controller02.axes[0];
val02 = controller02.axes[1];
val021 = lerp(val021, val01, lerpValue);
val022 = lerp(val022, val02, lerpValue);
valueList02.push(val021);
valueList02.push(val022);
}
}
//controller03
if(controller03 !== null){
if (controller02.buttons) {
let but01 = buttonPressed(controller03.buttons[0]);
let but02 = buttonPressed(controller03.buttons[1]);
buttonList03.push(but01);
buttonList03.push(but02);
}
if (controller03.axes) {
let axes = controller03.axes
let val01;
let val02;
val01 = controller03.axes[0];
val02 = controller03.axes[1];
val031 = lerp(val031, val01, lerpValue);
val032 = lerp(val032, val02, lerpValue);
valueList03.push(val031);
valueList03.push(val032);
}
}
//controller04
if(controller04 !== null){
if (controller04.buttons) {
let but01 = buttonPressed(controller04.buttons[0]);
let but02 = buttonPressed(controller04.buttons[1]);
buttonList04.push(but01);
buttonList04.push(but02);
}
if (controller04.axes) {
let axes = controller04.axes
let val01;
let val02;
val01 = controller04.axes[0];
val02 = controller04.axes[1];
val041 = lerp(val041, val01, lerpValue);
val042 = lerp(val042, val02, lerpValue);
valueList04.push(val041);
valueList04.push(val042);
}
}
}
}
function buttonPressed(b) {
if (typeof(b) == "object") {
return b.pressed; // binary
}
return b > 0.9; // analog value
}