let canvasH

let margin

let drawAreaW

let drawAreaH

let gutter 

let coloumn 

​

let b1, b2;

let type; 

let back;

​

let bor;

let wid;

​

//sound

let beat = 30

let x;

let y = 0

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 = []

​

​

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

let xl;

let yl = 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)

  }

}

​

​

function setup() {

 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)

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

  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)

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

  }

​

​

}

​

function draw() {

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

    }

  }

   // lyrics

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

    lyricsButtons[i].place();

    if(lyricsButtons[i].lip1) {  

      lyricsButtons[i].music();

    }

    else {

      lyricsButtons[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.lip1 = false;

  }

​

  place() {

​

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

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

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

  this.button.mouseClicked(()=> {

    this.lip1 = !this.lip1;

  })

  }

  music() {   

      console.log('AM I CALLED')

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

       console.log('yes i am')

      this.m.play();

       }

  }

}

​

// 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.lip1 = false;

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

  }

​

  place() {

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

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

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

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

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

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

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

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

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

​

    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("colour", "#0000ff");

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

        this.m.rate(this.pit);

      this.m.play();

       }

  }

   no() {

    this.m.stop();

  }

}

​

​