// This Final Sketch cleans up all unused code + adds colour

​

// Sketch also adjusts sound input sensitivity

// Also adds another particle text to points for treble.

​

let label = "gen-type-session-4-mini-project-final-ryan-tan";

​

// Type Settings

var contents = "Hello!";

let fontSan;

let fontSerif; // This is to give the option to explore swapping fonts down the road.

let genType;

let fontSize;

let theScale = 1;

let bounds;

​

// Audio Settings

var fft;

let st1;

let mic;

​

// Colours

// The colours swap based on the intensity of the mids and bass

let midCol1;

let midCol2;

let bassCol1;

let bassCol2;

​

// Load the fonts

function preload() {

  fontSan = loadFont("Inter-VariableFont_slnt,wght.ttf");

}

​

function setup() {

  fontSize = 0.65 * windowHeight;

  createCanvas(windowWidth, windowHeight);

  textFont(fontSan);

​

  // Set up Mic Input

  mic = new p5.AudioIn();

  mic.start();

​

  // Set up Fast Fourier Transform

  fft = new p5.FFT();

  fft.setInput(mic);

  midCol1 = color(18, 194, 233);

  midCol2 = color(150, 79, 89);

  bassCol2 = color(255, 255, 0);

  bassCol1 = color(255, 0, 255);

}

​

function draw() {

  // Preparing all Audio stuff first

  // FFT Stuff

  // Analysing Audio

  fft.analyze();

​

  // Breaking Audio down

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

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

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

​

  // Treble will control the darkness of the background

  // No real reason, just after experimenting, saw that this combination works best

  let bgColMain = map(treble, 0, 255, 20, 0);

  background(bgColMain);

​

  let x = 0;

  let y = 0;

​

  // textToPoints in draw function to allow for change in input

  genType = fontSan.textToPoints(contents, 0, 0, fontSize, {

    sampleFactor: 0.1,

    simplifyThreshold: 0,

  });

​

  // Header

  push();

  textSize(18);

  fill("white");

  text("This sketch is best viewed in fullscreen mode on desktop", 20, 40);

  textSize(12);

  fill(255,0,0);

  text("This sketch requires microphone input", 20, 65);

  pop();

  // Instructions for Sketch

  push();

  translate(0,80);

  textSize(12);

  fill("white");

  text("Double click to erase and type your own word", 20, 30);

  fill("rgb(188,188,188)");

  text("Press Shift to save as PNG", 20, 50);

  text("Press Alt or Option to enter FullScreen mode", 20, 70);

  pop();

​

  noStroke();

  drawType(genType, bass, mid);

}

​

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

  translate(width * 0.05, 0.88 * height);

​

  // Bass Particles

  // Swap between multiple colours

  let interBass = map(bass, 100, 180, 0.2, 1);

  let bassColor = lerpColor(bassCol1, bassCol2, interBass);

  push();

  // Set transparency for bass particles -> Higher Bass = more transparent

  let transparencyBass = map(bass, 0, 255, 50, 200);

  transparencyBass = constrain(transparencyBass, 50, 200);

  fill(bassColor, transparencyBass);

​

  // Set jiggle for Bass Particles

  let jiggleBass = map(bass, 100, 255, 0.5, 100);

​

  // Draw the bass particles

  beginShape();

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

    let x = inputWord[i].x + jiggleBass * randomGaussian();

    let y = inputWord[i].y + jiggleBass * randomGaussian();

​

    ellipse(x, y, 5, 5);

  }

  endShape();

  pop();

​

​

​

  // Mid Particles

  // Swap between multiple colours

  let interMid = map(mid, 100, 150, 0.8, 0.2);

  let midColor = lerpColor(midCol1, midCol2, interMid);

  push();

  // Set transparency for Mid particles -> Mid treble = less transparent

  let transparencyMid = map(mid, 0, 255, 50, 200);

  transparencyMid = constrain(transparencyMid, 200, 50);

  fill(midColor, transparencyMid);

​

  // Set jiggle for Mid Particles

  let jiggleMid = map(mid, 100, 255, 1, 75);

​

  // Draw the treble particles

  beginShape();

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

    let x = inputWord[i].x + jiggleMid * randomGaussian();

    let y = inputWord[i].y + jiggleMid * randomGaussian();

​

    ellipse(x, y, 5, 5);

  }

  endShape();

  pop();

}

​

// -----------------------------------------------------------------

// ---------------        HELPER FUNCTIONS         -----------------

// -----------------------------------------------------------------

​

// Double click resets input

function doubleClicked() {

  contents = "";

}

​

// Key Press for inputs and commands

function keyPressed() {

  if (

    key === "CapsLock" ||

    key === "Tab" ||

    key === "Enter" ||

    key === "Backspace" ||

    key === "Meta" ||

    key === "Control" ||

    key === "Escape"

  ) {

    contents += "";

  } else if (key === "Shift") {

    saveCanvas(label + ".png");

    contents += "";

  } else if (key === "Alt") {

    enterFullscreen();

  } else {

    contents += key;

  }

}

​

// Enter Full Screen

function enterFullscreen() {

  var fs = fullscreen();

  if (!fs) {

    fullscreen(true);

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​