let font1, font2;

let mic;

let micLevel;

let maxOut = 0;

let a = 35.5;

let blt, blb, bt1, bt2, bb1, bb2, brt, brb;

let clt, clb, ct1, ct2, ct3, cb1, cb2, cb3;

let sX = 20;

let sX1 = 23;

let sY1 = 13;

let ypos = 40;

​

function preload() {

  song = loadSound("Mana Drop - Spear Pillar EP - 01 Dripp.mp3");

  font1 = loadFont("Yellix-Regular.ttf");

  font2 = loadFont("BandcampV3-Bold.otf");

  font3 = loadFont("BandcampV3.otf");

}

​

function setup() {

  createCanvas(1920 / 2, 1080 / 2);

  textSize(15);

  noStroke();

  rectMode(CENTER);

  //song.play();

  fft = new p5.FFT(0.9, 64);

  amp = new p5.Amplitude();

​

  //sliders

  slider8 = createSlider(0.2, 1, 0.5, 0.01);

  slider8.position(sX, 180);

  slider8.addClass("mySliders");

  sliderS = createSlider(1, 5, 5, 1); //default graphic

  sliderS.position(sX, 100);

  sliderS.addClass("mySliders");

  sliderH = createSlider(1, 10, 5, 1);

  sliderH.position(sX, 220);

  sliderH.addClass("mySliders");

  sliderV = createSlider(1, 10, 5, 1);

  sliderV.position(sX, 260);

  sliderV.addClass("mySliders");

​

  //Color sliders

  slider1 = createSlider(0, 255, 0);

  slider1.position(sX, 340);

  slider1.addClass("mySliders");

  slider2 = createSlider(0, 255, 0);

  slider2.position(sX, 380);

  slider2.addClass("mySliders");

  slider3 = createSlider(0, 255, 255);

  slider3.position(sX, 420);

  slider3.addClass("mySliders");

  //slider3.size(140, 10);

​

  //music play button

  button = createButton("Play");

  button.mouseClicked(togglePlaying);

  //button.style("color:blue");

  button.size(100, 30);

  button.position(20, 480);

  //  button.style("background-color", col1);

  //button.style("font-family", "font1");

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

​

  //text input

  input = createInput("Type Your Name");

​

  // //text to points

  // pts = font3.textToPoints(input, 100, 100, 240, {

  //   sampleFactor: 0.25,

  //   simplifyThreshold: 0,

  // });

}

​

function draw() {

  background(220);

  let spectrum = fft.analyze();

​

  const r = slider1.value();

  const g = slider2.value();

  const b = slider3.value();

  const n = slider8.value();

  const n0 = sliderS.value();

  const n1 = sliderH.value();

  const n2 = sliderV.value();

​

  //slider labels

  textFont(font1);

  textSize(11);

  fill(0);

  sliderLabel("Graphic", sX1, 2);

  sliderLabel("Magic n", sX1, 4);

  sliderLabel("Stroke", sX1, 5);

  sliderLabel("Size", sX1, 6);

  sliderLabel("Color R", sX1, 8);

  sliderLabel("Color G", sX1, 9);

  sliderLabel("Color B", sX1, 10);

​

  if (n0 === 1) {

    push();

    scale(n2 / 5);

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

      logomark(250 + n * 20 * i, r, g, b, n1);

      rect(30 * i * (n - 1) + 10, 50 * i + 80, 20);

      console.log(i);

    }

​

    pop();

  }

​

  //   if (shape === 1) {

  if (n0 === 2) {

    //shape1

    push();

    translate(width / 2 + 50, height / 2);

​

    beginShape();

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

      let angle = map(i, 0, spectrum.length * n, 0, 360);

      let amp = spectrum[i];

      let m1 = map(amp, 0, 256, 80, 50 * n2 + 20);

      let x = m1 * cos(angle);

      let y = m1 * sin(angle);

      stroke(r, g, b);

      strokeWeight(n1 / 2);

      line(0, 0, x, y);

      push();

      rotate(15 * n);

      stroke(r + 50, g + 50, b + 50);

      line(0, 0, y, x);

      pop();

    }

    pop();

  } else if (n0 === 3) {

    //shape2

    push();

    translate(200, 100);

    w = width / (64 / n2);

    let spectrum = fft.analyze();

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

      let amp = spectrum[i];

      console.log(amp);

      let y2 = map(amp, 1, 255, height / 2, 10);

      let gr1 = map(amp, 0, 100, 0, 255);

      let grB = gr1 + b;

      if ((grB > 255) | (grB < 0)) {

        grB = -grB;

      }

      fill(r, gr1 - g, gr1 - b / 10);

      rect(i * w, y2, w / -n1 - 2, height - y2);

      //rect(i * w, y2 * n, w / n1 - 2, height - n * 300);

    }

  } else if (n0 === 4) {

    //shape3

​

    let wave = fft.waveform();

    translate(160, 20);

    beginShape();

    fill(r, g, b);

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

      let index = floor(map(i, 0, width - 200, 0, wave.length));

      let x = i;

      let y = wave[index] * 2000 * n + height / 2;

      vertex(x * n1, y);

    }

    endShape();

  } else if (n0 === 5) {

    let vol = amp.getLevel();

    let diam = map(vol, 0, 0.3, 50, 300);

    diam2 = map(vol, 0, 0.2, 10, 30);

    textFont(font3);

    textSize(n2 * 10);

​

    fill(r, g, b);

    push();

    translate(n * 100, diam2);

    text(input.value(), width / 2 - 200, height / 2);

    pop();

​

    push();

    //noFill();

    //strokeWeight(n1);

    fill(diam - r, diam - g, b + diam2);

    ellipse(160 + n * 200, height / 2 - 80, diam, diam);

    pop();

    console.log(vol);

​

    // let t = 0;

    // t++;

    // let indexWord = 0;

    // let words = [input.value()];

    // for (let a1 = 0; a1 < n2; a1++) {

    //   for (let b1 = 0; b1 < words[indexWord].length; b1++) {

    //     let dx = 30 * sin(radians(t * 2 + b1 * 10));

    //     let letters = input.value()[indexWord].length * textAscent();

    //     text(words[indexWord][b1], 60 * b1, -4 * dx + (80 + dx) * a1);

    //   }

    // }

​

    // let alphabetArray1 = font3.textToPoints(

    //   words,

    //   n1*50,

    //   n*100,

    //   n2

    // );

    // strokeWeight(n1);

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

    //   rect(alphabetArray1[i].x, alphabetArray1[i].y, 8, amp.getLevel);

    // }

  }

}

​

function playSong() {

  if (song.isPlaying()) {

    song.pause();

  } else {

    song.play();

  }

}

​

function logomark(x, strokeR, strokeG, strokeB, strokeW) {

  noFill();

  stroke(strokeR, strokeG, strokeB);

  strokeWeight(strokeW);

​

  let blt1 = map(fft.getEnergy("highMid"), 0, 140, 117, 100);

  blt = map(fft.getEnergy("bass"), 0, 110, 313, 170);

  blb = map(fft.getEnergy(1000, 1024), 1, 200, 307, 313);

  bt1 = map(fft.getEnergy("mid"), 10, 50, 184, 168);

  bt2 = map(fft.getEnergy("mid"), 0, 50, 184, 175);

  bb1 = map(fft.getEnergy("lowMid"), 10, 120, 308, 318);

  bb2 = map(fft.getEnergy(800, 1024), 1, 100, 308, 326);

  brt = map(fft.getEnergy("highMid"), 0, 140, 204, 180);

  brb = map(fft.getEnergy(1000, 1024), 1, 200, 286, 289);

​

  clt = map(fft.getEnergy("highMid"), 0, 110, 204, 170);

  clb = map(fft.getEnergy(1000, 1024), 1, 200, 286, 291);

  ct1 = map(fft.getEnergy("mid"), 10, 50, 184, 175);

  ct2 = map(fft.getEnergy("mid"), 10, 50, 184, 168);

  ct3 = map(fft.getEnergy("mid"), 10, 60, 202, 188);

  cb1 = map(fft.getEnergy("lowMid"), 10, 150, 308, 319);

  cb2 = map(fft.getEnergy("lowMid"), 6, 110, 308, 319);

  cb3 = map(fft.getEnergy(800, 1024), 1, 120, 296, 306);

​

  //letter b

  line(x, 313, x, blt1); //left111

  line(x, blb, x, blt); //left

  line(x + a, 217, x + a, bt1); //top #L

  line(x + a * 2, 217, x + a * 2, bt2); //top #R

  line(x + a, 275, x + a, bb1); //bot #L

  line(x + a * 2, 275, x + a * 2, bb2); //bot #R

  line(x + a * 3, brt, x + a * 3, brb); //Right

​

  //letter c

  line(x + a * 4, clb, x + a * 4, clt); //left

  line(x + a * 5, 217, x + a * 5, ct1); //top 1

  line(x + a * 6, 217, x + a * 6, ct2); //top 2

  line(x + a * 7, 222, x + a * 7, ct3); //top 3

  line(x + a * 5, 275, x + a * 5, cb1); //bot 1

  line(x + a * 6, 275, x + a * 6, cb2); //bot 2

  line(x + a * 7, 275, x + a * 7, cb3); //bot 3

}

​

function togglePlaying() {

  if (!song.isPlaying()) {

    song.play();

    song.setVolume(0.3);

    //button.style("font-family", "font1");

    button.html("Pause");

  } else {

    song.pause();

    button.html("Play");

  }

}

​

function sliderLabel(content, xpos, order) {

  text(content, xpos, sY1 + order * ypos);

}

​