let canvasW

let canvasH

let margin

let drawAreaW

let drawAreaH

let gutter

let coloumn

​

let recordHeight

let lyricsWide

let buttonHeight

let soundWide

let baseHeight

​

let fft

​

let b1, b2;

let type;

let back;

​

let re

​

​

//sound

let beat = 30

let soundButtons = [];

let soundValues = [{

  sound: 'okay.wav',

  text: '#1',

  beats: 8,

}, {

  sound: 'Perc-Maroc.wav',

  text: '#2',

  beats: 10,

}, {

  sound: 'Perc-Maroc.wav',

  text: '#3',

  beats: 8,

}, {

  sound: 'Perc-Maroc.wav',

  text: '#4',

  beats: 6,

}, {

  sound: 'Perc-Maroc.wav',

  text: '#5',

  beats: 13,

}, {

  sound: 'Perc-Maroc.wav',

  text: '#6',

  beats: 20,

}, {

  sound: 'Perc-Maroc.wav',

  text: '#7',

  beats: 6,

}, {

  sound: 'Perc-Maroc.wav',

  text: '#8',

  beats: 1,

}, {

  sound: 'Perc-Maroc.wav',

  text: '#9',

  beats: 9,

}, {

  sound: 'Perc-Maroc.wav',

  text: '#10',

  beats: 13,

}, {

  sound: 'Perc-Maroc.wav',

  text: '#11',

  beats: 20,

}, {

  sound: 'Perc-Maroc.wav',

  text: '#12',

  beats: 6,

}]

let loadedSounds = []

​

let x;

let y = 0

​

​

//lyrics

let lyricsButtons = [];

let lyricsValues = [{

  sound: 'What is sleep.m4a',

  text: 'WHAT IS SLEEP',

  beats: 5,

  duration: 223,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'WHY',

  beats: 30,

  duration: 100,

}, {

  sound: 'Why I passed out.m4a',

  text: 'I PASSED OUT',

  beats: 5,

  duration: 30,

}, {

  sound: 'What it’s 3.m4a',

  text: 'WUT IT’S 3?',

  beats: 30,

  duration: 31,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'LOST MY SOCK',

  beats: 30,

  duration: 100,

}, {

  sound: 'Out of bread.m4a',

  text: 'OUT OF BREAD',

  beats: 30,

  duration: 100,

}, {

  sound: 'Can I die now.m4a',

  text: 'CAN I DIE NOW',

  beats: 33,

  duration: 180,

}, {

  sound: 'Need vitamins.m4a',

  text: 'NEED VITAMINS',

  beats: 15,

  duration: 100,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'GIBBERISH',

  beats: 30,

  duration: 100,

}]

let loadedLyrics = []

​

let xl;

let yl = 0

​

​

// base 

let baseBeat = 60

let baseButtons = [];

let baseValues = [{

  sound: 'ka.wav',

  text: 'PLAIN BEATS',

  beats: 7,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'SONG #1',

  beats: 2,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'SONG #2',

  beats: 2,

}, {

  sound: 'Perc-Maroc.wav',

  text: 'SONG #3',

  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("icm3.jpg")

​

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

​

​

​

  // button dimensions

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

  lyricsWide = ((2 * gutter) + (3 * coloumn))

  buttonHeight = 0.07 * drawAreaH

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

  baseHeight = 0.1 * drawAreaH

​

​

​

  //sound

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

​

    soundButtons[i] = new sound(x, (canvasH - (margin + gutter + (2 * buttonHeight)) + 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) + (buttonHeight)

    }

    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) + (buttonHeight)

    }

​

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

​

  }

​

  // base

  yb = height - (margin + (5 * gutter) + (2 * buttonHeight) + (baseHeight))

​

  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)

  }

​

​

​

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

​

​

  //recorder

  re.place();

  // console.log(state)

​

  if (state == 1) {

    play = new p5.SoundFile();

    recorder.record(play);

  } else if (state == 2) {

    recorder.stop();

    play.rate(re.pit);

    console.log(re.pit)

​

  } else if (state == 3) {

    play.loop();

​

  }

​

  //   let k = buzz.value()

  //   frameRate(k) 

  //   console.log(frameRate())

​

​

  // 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", soundWide + "px");

    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", "none");

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

    console.log('AM I CALLED')

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

      console.log('yes i am')

      this.m.play();

​

    }

​

  }

​

  no() {

​

    this.button.style("border", "none");

    this.button.style("color", "#7493df");

    this.m.stop();

  }

​

}

​

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", lyricsWide + "px");

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

    this.button.style("border", "none");

​

​

​

    this.lip1 = false;

​

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

​

​

    this.slide.style('width', (lyricsWide - 16) + 'px');

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

    this.slide.style('border-radius', '25%');

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

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

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

  }

​

  place() {

​

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

​

​

    this.slide.position(this.x + 8, this.y + (buttonHeight) + (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", "none");

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

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

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

​

      this.m.rate(this.pit);

      this.m.play();

​

    }

​

  }

​

  no() {

​

    this.button.style("border", "none");

    this.button.style("color", "#7493df");

    this.slide.style('background', 'white');

    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", lyricsWide + "px");

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

    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", "#f1faa5");

​

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

​

    if (frameCount % baseBeat < this.b) {

​

      this.m.loop();

​

    }

​

  }

​

  no() {

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

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

​

    this.m.stop();

  }

​

}

​

function drawWave() {

  let waveform = fft.waveform();

​

  noFill();

  beginShape();

  strokeWeight(2)

  stroke(241, 250, 165);

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

​

    // rect(x, y, 15, 25, 10)

  }

  endShape();

}

​

function drawBack() {

  let spectrum = fft.analyze();

​

  noStroke();

  push()

  blendMode(OVERLAY);

  fill(0, 50);

​

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

    ellipse(x, height, 0.3 * gutter, h * 2)

  }

  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", lyricsWide + "px");

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

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

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

    this.button.style("border", 'none');

​

    this.button.id('record');

​

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

​

​

    this.slide.style('width', (lyricsWide - 16) + 'px');

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

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

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

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

    this.slide.style('border-radius', '25%');

​

  }

​

  place() {

​

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

    this.slide.position(this.x + 8, this.y + (recordHeight) + (gutter));

​

​

    this.pit = this.slide.value()

​

    this.button.mouseClicked(() => {

      state++;

      state %= 4;

    })

​

    if (state == 0) {

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

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

      this.slide.style('background', 'white');

      //   this.button.style("border", '1px solid #f56262');

​

      this.button.html("PRESS TO RECORD");

​

    } else if (state == 1) {

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

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

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

      //  this.button.style("border", '1px solid #f1faa5');

      this.button.html("RECORDING..");

    } else if (state == 2) {

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

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

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

      //this.button.style("border", '1px solid #f1faa5');

      this.button.html("SET SPEED, AND PRESS TO PLAY");

    } else if (state == 3) {

​

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

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

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

      //  this.button.style("border", '1px solid #f56262');

      this.button.html("GOT NEW SHIT");

    }

​

​

  }

​

}