​

let points;

let bounds;

let font;

​

function preload() {

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

  sound = loadSound("aphextwinvibes.mp3");

​

}

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  textFont(font);

  initSound(0.8);

​

  const n = '聲';

  const s = 900;

  points = font.textToPoints(n, 0, 0, s, {

    sampleFactor: 2,

    simplifyThreshold: 0.0

  });

  bounds = font.textBounds(n, 0, 0, s);

  console.log(bounds)

}

​

function draw() {

  background(0);

  scale(0.6)

  translate(600,500);

  drawLetterShape();

    drawLetterVertex();

}

​

function drawLetterVertex() {

  stroke(0,100);

  strokeWeight(2)

  noFill();

  push();

  translate(-bounds.w/2, bounds.h/2);

  beginShape();

  let x = 0;

  let y = 0;

  let n = points.length;

  let angle = 2 / (n);

  for (let i = 0; i < n; i += 1) {

    x = points[i].x + sin((frameCount + i*0.02) * 1) * 0.010;

    y = points[i].y;

    vertex(x, y);

  }

  endShape(CLOSE);

  pop();

}

​

function drawLetterShape() {

    let frequencyValues = readFrequencies();

​

  stroke(50, 205, 50);

  noFill();

  push();

  translate(-bounds.w/2, bounds.h/2);

  let x = 0;

  let y = 0;

  let n = points.length;

  let res = 2;

  for (let i = 0; i < n; i += res) {

     let len = frequencyValues.length; // total frequencies available

    let frequencyAtIndex = frequencyValues[i % len];

    let frequencyAmplified = frequencyAtIndex * 200;

    let w = 20 + frequencyAmplified;

    x = points[i].x + sin((frameCount + i) * 1) * 40;

    y = points[i].y;

    push();

    translate(x, y);

   // rotate((frameCount + i) * 1);

    ellipse(10, w/20, w+3, w/2);

    pop();

  }

  pop();

}

​

​

function readFrequencies(theRes=10) {

  let fftResolution = theRes;// take every nth frequency

  let fftValues = analyzeAudioInput(fftResolution)

  return fftValues;

}

​

function readSoundLevel(theMin = 0.5, theMax = 0.9) {

  let spectrum = fft.analyze();

  const nyquist = 22050;

​

  // get the centroid

  let spectralCentroid = fft.getCentroid();

​

  // the mean_freq_index calculation is for the display.

  let mean_freq_index = spectralCentroid / (nyquist / spectrum.length);

  let centroidplot = map(log(mean_freq_index), 0, log(spectrum.length), 0, 1);

  // extract preferred centroid bands

  let vmin = theMin;

  let vmax = theMax;

  let v0 = map(max(vmin, min(centroidplot, vmax)), vmin, vmax, 0, 1);

​

  // returns centroid

  return v0;

}

​

​

// call function initSound in setup()

// to setup mic input and fft analysis.

function initSound(theSmoothing=1) {

  // make the microphone available

  mic = new p5.AudioIn();

  mic.start();

  // create a new FFT analyzer with

  // the microphone as input.

  fft = new p5.FFT(theSmoothing);

  fft.setInput(mic);

  // have a look at the documentation at

  // https://p5js.org/reference/#/p5.FFT

  // for a more comprehensive overview of

  // methods to analyse sound with p5js.

}

​

// call function analyzeAudioInput in dra()

// to continuously read audio in and apply 

// the fft. this function will return an 

// array ofthe fft-analysis results.

function analyzeAudioInput(theSteps=10) {

  // fft returns an array of values

  // between 0 and 255, however we are 

  // normalising these values below. 

  let spectrum = fft.analyze(); 

  let fftValues = [];

  let steps = theSteps;

  let start = 0;

  let end = spectrum.length;

  for (let i = start; i < end; i = i + steps) {

    // we could do some calculations here if needed

    // we can reduce the resolution of values by 

    // increasing the value for variable steps 

    // eg. from 4 to 10 which will only add every 

    // 10th spectrum-value to array value (in case 

    // we want to work with a lower resolution 

    // of numbers)

    fftValues.push(map(spectrum[i],0,255,0,1));

  }

  return fftValues;

}

​

​

​

​

​

///////////////////////////////////////////////////////////////

// 

// BoundingBox

// 

// calculates the boundingbox for a letter

function getBoundingBoxFrom(thePoints, theScale) {

  let x0 = 10000;

  let y0 = 10000;

  let x1 = -10000;

  let y1 = -10000;

  thePoints.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 };

}

​

///////////////////////////////////////////////////////////////

// 

// Grid

// 

// overlays the canvas with a grid (by default 10x10)

// the grid can be (de)activated with setting isShowGrid

// or using key g

function showGrid(isShow, theNumOfGridCellsPerAxis = 10) {

  if (isShow) {

    noStroke();

    fill(0, 40);

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

      let x = int(map(i, 0, theNumOfGridCellsPerAxis, 0, width - 1));

      rect(x, 0, 1, height);

    }

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

      let y = int(map(i, 0, theNumOfGridCellsPerAxis, 0, height - 1));

      rect(0, y, width, 1);

    }

  }

}

function mousePressed() {

  // Play the sound when the mouse is pressed

  sound.play();

}