Cod208 - Final #3

/* 

1 - DrumPad messages received from the MIDI keyboard using WebMIDI.

2 - Function written to check whether the Pads are open or closed based on DrumPad messages.

3 - Pad visuals drawn on the canvas.

4 - Visual representation of whether the pads are open or closed.

5 - Other messages from the keyboard (Wheels, Knobs, Faders) received.

6 - Inputs from Wheels, Knobs, and Faders saved to variables.

7 - Variables from Wheels, Knobs, and Faders visually displayed on the canvas.

8 - Individual fft waveform analysis completed.

9 - Individual waveform's from sounds that connected to pads displayed on canvas.

10 - Volume level of sound outputs displayed on canvas with circle.

11 - Each knob controls the volume of a sound individually.

*/

​

//Channel 10

let midiStatus = 0, midiKey = 0, midiPressure = 0;

let pad = new Array(8).fill(0);

​

//Channel 1

let messageType = 0, controlNumber = 0, controlValue = 0;

let pitchWheel = 64, modWheel = 0;

let knob = new Array(8).fill(0);

let fader = new Array(4).fill(0);

​

//Sounds

let loop1;

let loop2

let kick;

let snare; 

let claps;

let hihat;

let bass; 

let synth;

​

//Fonts

let font;

​

//Draw

let bSize;

let bOff;

let bStroke;

let color;

​

// Visual

let fftPad1, fftPad2, fftPad3, fftPad4, fftPad5, fftPad6, fftPad7, fftPad8;

​

let circleSize;

let levelMain;

​

function preload(){

  loop1 = loadSound("01_Loop1.wav");

  loop2 = loadSound("02_Loop2.wav");

  kick = loadSound("03_Kick.wav");

  snare = loadSound("04_Snare.wav");

  claps = loadSound("05_Claps.wav");

  hihat = loadSound("06_HiHat.wav");

  bass = loadSound("07_Bass1.wav");

  synth = loadSound("09_Synth1.wav");

  font = loadFont("Digital.ttf");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  // Enable WEBMIDI.js and trigger the onEnabled() function when ready

  WebMidi.enable().then(onEnabled).catch(err => console.error("WebMidi could not be enabled:", err));

  //Pads

  bSize = windowWidth / 12;

  bOff = (width - (bSize*8)) / 9;

  bStroke = bSize / 12;

  //FFT Analyze of Sounds Individually

  ampMain = new p5.Amplitude();

  fftPad1 = new p5.FFT();

  fftPad2 = new p5.FFT();

  fftPad3 = new p5.FFT();

  fftPad4 = new p5.FFT();

  fftPad5 = new p5.FFT();

  fftPad6 = new p5.FFT();

  fftPad7 = new p5.FFT();

  fftPad8 = new p5.FFT();

  fftPad1.setInput(loop1);

  fftPad2.setInput(loop2);

  fftPad3.setInput(kick);

  fftPad4.setInput(snare);

  fftPad5.setInput(claps);

  fftPad6.setInput(hihat);

  fftPad7.setInput(bass);

  fftPad8.setInput(synth);

}

​

​

function draw() {

  levelMain = ampMain.getLevel();

  background(0);

  let circleSize = map(levelMain, 0, 1, 300, 800);

  push();

  fill(255);

  noStroke();

  circle(width/2, height/2.5, circleSize)

  pop();

  padVisuals(bSize, bOff, bStroke, pad, knob);

  padVolume();

}

​

function padVisuals(bSize, bOff, bStroke, padArray, knobArray){

  //Waveform

  let wavePad1 = fftPad1.waveform();

  let wavePad2 = fftPad2.waveform();

  let wavePad3 = fftPad3.waveform();

  let wavePad4 = fftPad4.waveform();

  let wavePad5 = fftPad5.waveform();

  let wavePad6 = fftPad6.waveform();

  let wavePad7 = fftPad7.waveform();

  let wavePad8 = fftPad8.waveform();

  let waveForms = [wavePad1,wavePad2,wavePad3,wavePad4,wavePad5,wavePad6,wavePad7,wavePad8];

  //Pads

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

    let knob_r = map(knob[i], 0, 127, 0, 255);

    fill(knob_r, 0, 0);

    if(pad[i] === 0){

      stroke(120);

    }else{

      stroke(255);

    }

    let sqrX = bOff+(bSize*i)+bOff*i

    let sqrY = height-bSize-(bStroke*1.5)

    strokeWeight(bStroke);

    square(sqrX, sqrY, bSize, 10);

    //WaveForm

    push();

    noFill();

    stroke(255);

    if(pad[i] === 1){

      strokeWeight(1);

    }

    else{

      strokeWeight(0);

    }

    beginShape();

    for(let j=0; j<height-(bSize+(bStroke*1.5)); j++){

      let index = floor(map(j, 0, height-(bSize+(bStroke*1.5)), 0, waveForms[i].length));

      let waveY = j;

      let waveX = waveForms[i][index] * 150 + sqrX + bSize/2;

      vertex(waveX, waveY);

    }

    endShape();

    pop();

  }

  //Screen

  push();

  rectMode(CENTER);

  fill(0);

  stroke(200);

  strokeWeight(bStroke*0.25);

  rect(width/2, height-bSize-(bStroke*1.5)-(height/12), bSize, bSize/3, 10);

  pop();

  push();

  strokeWeight(0);

  fill(240);

  textAlign(CENTER, CENTER);

  textSize(bSize*0.2);

  textFont(font);

  text(floor(map(controlValue, 0, 127, 0, 100)), width/2, height-bSize-(bStroke*1.5)-(height/12))

  pop();

}

​

function padCheck(midiStatus, midiKey){

  if(midiStatus == 153){

      pad[midiKey-44] = 1 - pad[midiKey-44];

      console.log("Pad toggled to:" + pad[midiKey-44]);

      print(pad);

      padSound(pad, loop1, loop2, kick, snare, claps, hihat, bass, synth);

    }

}

​

function padSound(pad, ...sounds) {

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

    if (pad[i] === 1 && sounds[i]) {

      if (!sounds[i].isPlaying()) {

        sounds[i].loop();

      }

    } else { 

      if (sounds[i] && sounds[i].isPlaying()) {

        sounds[i].stop();

      }

    }

  }

}

​

function padVolume(){

  loop1.setVolume(map(knob[0], 0, 127, 0.05, 1));

  loop2.setVolume(map(knob[1], 0, 127, 0.05, 1));

  kick.setVolume(map(knob[2], 0, 127, 0.05, 1));

  snare.setVolume(map(knob[3], 0, 127, 0.05, 1));

  claps.setVolume(map(knob[4], 0, 127, 0.05, 1));

  hihat.setVolume(map(knob[5], 0, 127, 0.05, 1));

  bass.setVolume(map(knob[6], 0, 127, 0.05, 1));

  synth.setVolume(map(knob[7], 0, 127, 0.05, 1));

}

​

function sceneColor(){

}