​

//Typography Details

let font;

let fontSize;

let inputWord = [];

let theScale = 1;

​

//Audio

let song;

var slider;

var fft;

let st1 = [30];

​

//Defining Colours

let col3 = [249, 220, 220];

let col1 = [255, 167, 171];

let col2 = [28,180,235];

let cp = [col1, col2, col3];

​

function preload() {

  font = loadFont("Griffy-Regular.ttf");

  song = loadSound("gentype-lofi.mp3");

}

​

function setup() {

  fontSize = 0.9 * windowHeight;

  createCanvas(windowWidth, windowHeight);

  textFont(font);

  textSize(fontSize);

​

  x = 0;

  y = 0;

​

  inputWord = font.textToPoints("Calm", x, y, fontSize, {

    sampleFactor: 0.07,

    simplifyThreshold: 0,

  });

​

  slider = createSlider(0, 1, 0.15, 0.01); //Volume Control

  song.loop(); //Start music on load + loop when end

​

  fft = new p5.FFT();

}

​

function draw() {

  background(0);

  song.setVolume(slider.value());

  //Analysing audio

  fft.analyze();

  //Separating frequencies

  let bass = fft.getEnergy("bass");

  let mid = fft.getEnergy("mid");

​

​

  //print(spectrum); //Checking array

​

  translate(width / 2, height / 2);

  drawType(inputWord, theScale, bass, mid);

}

​

function drawType(inputWord, theScale, bass, mid) {

  var b = getBoundingBoxFrom(inputWord, theScale);

  translate(-b.cx, -b.cy);

​

  noFill();

  beginShape();

  //ellipseMode(CORNER);

  rectMode(CORNER);

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

    let x = inputWord[i].x * theScale;

    let y = inputWord[i].y * theScale;

    //For Mids

    fill(cp[2]);

    circle(x + 5, y + 5,  i%2 + mid/20);

​

    //For Bass

    push();

    noFill();

    stroke(cp[1]);

    strokeWeight(0.8);

    square(x, y + tan(0.05*bass), 4-sin((0.05*bass)));

    pop();

​

  }

  endShape();

}

​

/* HELPER FUNCTIONS */

​

function enterFullscreen() {

  var fs = fullscreen();

  if (!fs) {

    fullscreen(true);

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

function keyPressed() {

  if (key === "f" || key === "F") {

    enterFullscreen();

  }

  if (key === "s") {

    if (this._renderer.elt.svg !== undefined) {

      saveSVG(label + ".svg");

    } else {

      saveCanvas(label + ".png");

    }

  }

}

​

function getBoundingBoxFrom(letterPoints, theScale) {

  let x0 = 10000;

  let y0 = 10000;

  let x1 = -10000;

  let y1 = -10000;

  letterPoints.forEach((el) => {

    x0 = x0 > el.x * theScale ? el.x * theScale : x0;

    y0 = y0 > el.y * theScale ? el.y * theScale : y0;

    x1 = x1 < el.x * theScale ? el.x * theScale : x1;

    y1 = y1 < el.y * theScale ? el.y * theScale : y1;

  });

  w = x1 - x0;

  h = y1 - y0;

  cx = x0 + w / 2;

  cy = y0 + h / 2;

  return { x: x0, y: y0, x0, y0, x1, y1, w, h, cx, cy };

}

​

document.ontouchmove = function (event) {

  event.preventDefault();

};

​