let textString = "Circles";

function preload() {

  font = loadFont("assets/Franklin Goth Ext Condensed.ttf");

}

​

let points;

let bounds;

let textSize = 200;

​

function setup() {

  background(0);

  createCanvas(600, 600);

  let boundingBox = font.textBounds(textString, 0, 0, textSize);

​

  points = font.textToPoints(

    textString,

    width / 2 - boundingBox.w / 2,

    height / 2 + boundingBox.h / 2,

    textSize,

    {

      sampleFactor: 0.4,

      simplifyThreshold: 0,

    }

  );

​

  noFill();

  stroke(255, 0, 0, 75);

}

​

function draw() {

  background(255);

​

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

    // make some noise (wut wut)

    let moveIt = (noise(frameCount * 0.01 + i * 0.01) - 0.5) * 10;

    let x = points[i].x;

    let y = points[i].y + moveIt;

​

    // dividing makes it invert it's action, sort of

    let diam = 2500 / dist(x, y, mouseX, mouseY);

    diam = constrain(diam, 7, 70);

​

    ellipse(x, y, diam, diam);

  }

}

​