let canvasW

let canvasH

let margin

let drawAreaW

let drawAreaH

let gutter

let coloumn

​

let cal

let fft 

​

let b1, b2;

let type;

let back;

​

let re

​

​

//sound

let beat = 30

let soundButtons = [];

let soundValues = [{

  sound: 'okay.wav',

  text: 'hey',

  beats: 8,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'lala',

  beats: 10,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'noo',

  beats: 8,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'fuck',

  beats: 6,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'die',

  beats: 13,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'ok',

  beats: 20,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'mf',

  beats: 6,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'fun',

  beats: 1,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'dead',

  beats: 9,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'wee',

  beats: 13,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'bdf',

  beats: 20,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'fff',

  beats: 6,

}]

let loadedSounds = []

​

let x;

let y = 0

​

​

//lyrics

let lyricsButtons = [];

let lyricsValues = [{

  sound: 'okay.wav',

  text: 'hey',

  beats: 5,

  duration: 120,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'lala',

  beats: 30,

  duration: 100,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'lala',

  beats: 30,

  duration: 100,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'sf',

  beats: 30,

  duration: 100,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'ffe',

  beats: 30,

  duration: 100,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'dwes',

  beats: 30,

  duration: 100,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'sf',

  beats: 30,

  duration: 100,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'ffe',

  beats: 30,

  duration: 100,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'dwes',

  beats: 30,

  duration: 100,

}]

let loadedLyrics = []

​

let xl;

let yl = 0

​

​

// base 

let baseBeat = 60

let baseButtons = [];

let baseValues = [{

  sound: 'ka.wav',

  text: 'hey',

  beats: 7,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'lala',

  beats: 2,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'lala',

  beats: 2,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'lala',

  beats: 2,

}];

let loadedBase = []

​

let xb;

let yb;

​

//recorder

let mic;

let recorder;

let play;

let state = 0;

​

​

function preload() {

  //font

  type = loadFont('VT323-Regular.ttf');

  back = loadImage("AltJ-04.png")

​

  //sound

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

    if (soundValues[i].sound)

      loadedSounds[i] = loadSound(soundValues[i].sound)

  }

​

  //lyrics

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

    if (lyricsValues[i].sound)

      loadedLyrics[i] = loadSound(lyricsValues[i].sound)

  }

​

  //base

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

    if (baseValues[i].sound)

      loadedBase[i] = loadSound(baseValues[i].sound)

  }

}

​

​

function setup() {

   fft = new p5.FFT();

  //  buzz= createSlider(0, 60, 20, 1)

​

  createCanvas(windowWidth, windowHeight);

  console.log("windowWidth", windowWidth)

​

​

  canvasW = windowWidth

  canvasH = windowHeight

  console.log("canvasHeight", canvasH)

  console.log("canvaswidth", canvasW)

​

  margin = 0.045 * canvasW

  console.log("margin", margin)

​

  drawAreaW = canvasW - (2 * margin)

  drawAreaH = canvasH - (2 * margin)

  console.log("drawAreaH", drawAreaH)

  console.log("drawAreaW", drawAreaW)

​

  gutter = 0.00909 * drawAreaW

  coloumn = 0.075 * drawAreaW

​

  console.log("gutter", gutter)

  console.log("coloumn", coloumn)

​

​

  b1 = color(190, 235, 233);

  b2 = color(211, 217, 240);

​

​

  x = margin

  console.log("x", x)

​

  xl = margin + (3 * coloumn) + (3 * gutter)

​

  console.log("xl", xl)

​

  xb = margin

  console.log("xb", xb)

​

  //sound

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

​

    soundButtons[i] = new sound(x, (canvasH - (margin + gutter + (2 * (0.07 * drawAreaH))) + y), loadedSounds[i], soundValues[i].beats, soundValues[i].text)

​

​

    if (x > width - (margin + (2 * coloumn) + (5 * gutter))) {

      x = margin - ((2 * coloumn) + (2 * gutter)) // x= margin

      y = y + (gutter) + (0.07 * drawAreaH)

    }

    x = x + (2 * coloumn) + (2 * gutter)

​

​

  }

​

​

​

  //lyrics

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

    lyricsButtons[i] = new lyrics(xl, margin + yl, loadedLyrics[i], lyricsValues[i].beats, lyricsValues[i].text, lyricsValues[i].duration)

​

​

    if (xl >= width - (margin + (3 * coloumn) + (gutter * 4))) {

      //   xl = margin + (3*coloumn) + (3*gutter) 

      xl = margin + (3 * coloumn) + (3 * gutter) - ((3 * coloumn) + (3 * gutter))

      yl = yl + (4 * gutter) + (0.07 * drawAreaH)

    }

​

    xl = xl + (3 * coloumn) + (3 * gutter)

​

  }

​

  // base

  yb = height - (margin + (5 * gutter) + (2 * 0.07 * drawAreaH) + (0.1 * drawAreaH))

​

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

    baseButtons[i] = new base(xb, yb, loadedBase[i], baseValues[i].beats, baseValues[i].text)

​

    xb = xb + (3 * coloumn) + (3 * gutter)

  }

​

  // record button height

  console.log("cal", ((8 * gutter) + (3 * 0.07 * drawAreaH)))

  cal = ((8 * gutter) + (3 * 0.07 * drawAreaH))

​

  // recorder

   mic = new p5.AudioIn();

  recorder = new p5.SoundRecorder();

  recorder.setInput(mic);

  mic.start();

 re = new reco (margin, margin)

}

​

function draw() {

 image(back, 0, 0, canvasW, canvasH)

  drawWave()

  drawBack()

​

  re.place();

   if (re.lip1) {

      re.music();

    } 

​

  //   let k = buzz.value()

  //   frameRate(k) 

  //   console.log(frameRate())

​

  //background

  // setGradient(0, 0, width, height, b1, b2);

​

​

  // sounds

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

    soundButtons[i].place();

    if (soundButtons[i].lip1) {

      soundButtons[i].music();

    } else {

      soundButtons[i].no();

    }

  }

​

  // lyrics

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

    lyricsButtons[i].place();

​

    if (lyricsButtons[i].lip1) {

      lyricsButtons[i].music();

    } else {

      lyricsButtons[i].no();

    }

  }

​

​

  // base

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

    baseButtons[i].place();

​

    if (baseButtons[i].lip1) {

​

      baseButtons[i].music();

​

    } else {

      baseButtons[i].no();

    }

  }

}

​

class sound {

​

  constructor(oneX, oneY, oneM, oneB, oneW) {

    // positionX, positionX, music, beats, words on buttons

    this.x = oneX;

    this.y = oneY;

    this.m = oneM;

    this.b = oneB;

    this.w = oneW;

    this.button = createButton(this.w);

    this.button.style("width", "14.46%");

    this.button.style("font-size", "16px");

​

    this.lip1 = false;

​

  }

​

  place() {

​

    this.button.position(this.x, this.y);

​

​

​

    this.button.mouseClicked(() => {

      this.lip1 = !this.lip1;

    })

  }

​

  music() {

​

    this.button.style("border", "1px solid #0000ff");

    this.button.style("color", "#0000ff");

    console.log('AM I CALLED')

    if (frameCount % beat == this.b) {

      console.log('yes i am')

      this.m.play();

​

    }

​

  }

​

  no() {

​

    this.button.style("border", "1px solid #333333");

    this.button.style("color", "#333333");

    this.m.stop();

  }

​

}

​

// function setGradient(x, y, w, h, c1, c2) {

//   noFill();

//   for (let i = x; i <= x + w; i++) {

//     let inter = map(i, x, x + w, 0, 1); //add volume (var)  -- last parameter (0-1)

//     let c = lerpColor(c1, c2, inter);

//     stroke(c);

//     line(i, y, i, y + h);

//   }

// }

​

class lyrics {

​

  constructor(oneX, oneY, oneM, oneB, oneW, oneD) {

    // positionX, positionX, music, beats, words on buttons, how long

    this.x = oneX;

    this.y = oneY;

    this.m = oneM;

    this.b = oneB;

    this.w = oneW;

    this.d = oneD

​

​

    this.button = createButton(this.w);

​

    this.button.style("width", "22%");

    this.button.style("font-size", "16px");

    this.button.style("border", "1px solid #333333");

​

​

​

    this.lip1 = false;

​

    this.slide = createSlider(1, 4, 1, 0.1);

​

​

    this.slide.style('width', '22%');

    this.slide.style('height', '1px');

    this.slide.style('-webkit-appearance', 'none');

    this.slide.style('background', '#333333');

    this.slide.style('outline', 'none');

  }

​

  place() {

​

    this.button.position(this.x, this.y);

​

​

    this.slide.position(this.x, this.y + (0.07 * drawAreaH) + (gutter));

    this.pit = this.slide.value()

​

    this.button.mousePressed(() => {

      this.lip1 = !this.lip1;

      // this.button.style("width", "280px");

​

​

​

    })

  }

​

  music() {

    //console.log('AM I CALLED')

    this.button.style("border", "1px solid #0000ff");

    this.button.style("color", "#0000ff");

    this.slide.style('background', '#0000ff');

    if (frameCount % this.d == this.b) {

​

      this.m.rate(this.pit);

      this.m.play();

​

​

​

    }

​

  }

​

  no() {

​

    this.button.style("border", "1px solid #333333");

    this.button.style("color", "#333333");

    this.slide.style('background', '#333333');

    this.m.stop();

  }

​

}

​

​

class base {

​

  constructor(oneX, oneY, oneM, oneB, oneW) {

    // positionX, positionX, music, beats, words on buttons

    this.x = oneX;

    this.y = oneY;

    this.m = oneM;

    this.b = oneB;

    this.w = oneW;

    this.button = createButton(this.w);

​

    this.button.id('base');

​

    this.button.style("width", "22%");

    this.button.style("height", "10%");

    this.button.style("font-size", "16px");

    //  this.button.style("background", "#0000ff");

    // this.button.style("color", "white");

​

​

    this.lip1 = false;

​

​

  }

​

  place() {

​

    this.button.position(this.x, this.y);

​

​

    this.button.mouseClicked(() => {

      this.lip1 = !this.lip1;

​

    })

  }

​

  music() {

    //console.log('AM I CALLED')

    this.button.style("background-color", "#333333");

​

​

    if (frameCount % baseBeat < this.b) {

​

      this.m.loop();

​

    }

​

  }

​

  no() {

    this.button.style("background-color", "#0000ff");

​

    this.m.stop();

  }

​

}

​

function drawWave(){

  let waveform = fft.waveform();

  noFill();

  beginShape();

  strokeWeight(1.5)

  stroke(0,0,255);

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

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

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

    vertex(x,y);

  }

  endShape();

}

​

function drawBack(){

  let spectrum = fft.analyze();

  noStroke();

 push()

blendMode(OVERLAY);

  fill(0,0, 0, 2);

​

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

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

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

    circle(x-h, (height-(gutter*40))+(h*0.8), h, h )

  }

    pop()

}

​

​

class reco {

​

  constructor(oneX, oneY) {

    // positionX, positionX, words on buttons

    this.x = oneX;

    this.y = oneY;

    this.button = createButton("record");

    this.button.style("width", "22%");

    this.button.style("font-size", "16px");

     this.button.style("height", cal + 'px');

    this.button.style("color", 'white');

    this.button.style("border", '1px solid #0000ff');

​

    this.lip1 = false;

​

  }

​

  place() {

​

    this.button.position(this.x, this.y);

​

​

​

    this.button.mouseClicked(() => {

      this.lip1 = !this.lip1;

    })

  }

​

  music() {

​

   state++;

  // There are only 3 states

  state %= 3;

  // Record the sample in state 1

  if (state == 1) {

    play = new p5.SoundFile();

    recorder.record(play);

  // Stop recording in state 2

  } else if (state == 2) {

    recorder.stop();

  // Loop the sample in state 3

  } else {

    play.loop();

​

  }

    }

​

​

​

}