let ww = 0;

    let hh = 0;

let t = 'Magenta'

let rate = 10;

let pointDelay = 0

let input;

function preload() {

  font = loadFont('Heckendon-Hairline.otf');

}

​

let points;

let bounds;

function setup() {

  createCanvas(windowWidth, windowHeight)

  noStroke()

  fill(255, 255, 255, 255);

​

  points = font.textToPoints(t, 0, 0, 10, {

    sampleFactor: 30,

    simplifyThreshold: 0

  });

  bounds = font.textBounds(t, 0, 0, 10);

  input = createInput('Magenta')

  input.input(myInputEvent);

​

}

​

function myInputEvent() {

  t = input.value();

}

​

function draw() {

  background(255, 0, 255);

  //for (let i = 0; i < 250; i++) {

  //  fill(255, 0, random(255), 10)

  //diameter = random(0, width/2)

  // ellipse(random(-width, width), random(-height, height), diameter, diameter) 

  //}

  fill(255)

  //beginShape();

  pointDelay = 0;

  if ( keyIsPressed ) {

   rate = map(mouseX, 0, width, -15, 15) 

  }

  translate(-bounds.x * width / bounds.w, -bounds.y * height / bounds.h);

  translate(300, -50)

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

    let p = points[i];

    if (keyIsPressed === true) {

    rate = map(mouseX, 0, width, -20, 20)

    }

    let theX = p.x * height*.75 *(bounds.w/bounds.h) / bounds.w +

        sin(rate * p.y / bounds.h + millis() / 1000) * width / 20 + pointDelay

    let theY = p.y * height*.75 / bounds.h

     let d= dist(mouseX, mouseY-height, theX, theY) 

​

     rrr = map ( d, 0, 5000, 5, 200) 

​

    ellipse(

      theX,

      theY,

      ww+rrr,

      hh+rrr

    );

    pointDelay += 0.0

​

  }

  //endShape(CLOSE);

}