let font;

let sound;

​

function preload() {

  font = loadFont("Lato-Black.ttf");

  sound = loadSound('ocean.mp3');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  sound.play();

  initSound(0.1);

  // Generate text points with randomized positions

  points = generateRandomTextPoints("w", 400);

}

​

function draw() {

  background(230, 6);

  push();

  translate(width / 2, height / 2);

  drawLetterFor(points, 2);

  pop();

}

​

function drawLetterFor(thePoints, theScale) {

  const b = getBoundingBoxFrom(points, theScale);

​

  // stroke(255, 10);

  noStroke();

  fill(0, 5);

​

  push();

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

  let frequencyValues = readFrequencies();

  beginShape();

  for (let i = 1; i < thePoints.length; i += 1) {

    let x = thePoints[i].x * theScale + sin((frameCount + i) * 0.01) * 50;

    let y = thePoints[i].y * theScale + cos((frameCount + i) * 0.01) * 20;

​

    let len = frequencyValues.length;

    let frequencyAtIndex = frequencyValues[i % len];

    let frequencyAmplified = frequencyAtIndex * 100;

    let w = 1 + frequencyAmplified;

    let maxOffset = 10;

    ellipse(x + tan(frameCount * i * 0.1) * maxOffset , y + tan((frameCount + i * 1) * 0.1) * 2, w + cos((frameCount + i * 0.1) * 0.01) * 10);

  }

  endShape();

​

  pop();

}

​

function generateRandomTextPoints(text, size) {

  let textPoints = font.textToPoints(text, 0, 0, size, {

    sampleFactor: 1,

    simplifyThreshold: 0,

  });

  // Add random offset to each point

  for (let point of textPoints) {

    point.x += random(-1, 1);

    point.y += random(-10, 10);

  }

  return textPoints;

}

​

​

​

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

// 

// Key-input

// 

// if you want to use the SVG export

// option, go to setup and enable SVG mode

// no need to make any changes below.

​

​

​

let isShowGrid = false;

​

// enter fullscreen

​

function keyPressed() {

  if (key === "s") {

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

      saveSVG(label + ".svg");

    } else {

      saveCanvas(label + ".png");

    }

  }

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

    enterFullscreen();

  }

}

​

​

function enterFullscreen() {

  var fs = fullscreen();

  if (!fs) {

    fullscreen(true);

  }

}

​

/* full screening will change the size of the canvas */

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

​

​

​

​