let textstring = 'Jello';

// size of topography

let size = 120;

​

// giving p5js access to font file

function preload() {

  font = loadFont('AquinoDemo-511lj.ttf');

}

// Array that will later hold letter-boundary objects

let points = [];

​

function setup() {

  createCanvas(600, 600);

  textFont(font);

  textSize(size);

//   Making array of objects from the top letter-boundary 

  points1 = font.textToPoints(textstring, width/5, height/3, size, {sampleFactor: 0.1});

//   Making array of objects from the bottom letter-boundary 

  points2 = font.textToPoints(textstring, width/5, height/1.3, size, {sampleFactor: 0.1});

}

​

function draw() {

  background(51);

​

// loop for displaying all boundary points for both top and bottom text

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

    let p1 = points1[i];

    let p2 = points2[i];

​

//  making noise for movement of point

    let noiseValue = noise(frameCount * 0.001, i * 0.005);

//  calculating distance between mouse and point for both texts

    let distance1 = dist(mouseX, mouseY, p1.x, p1.y);

    let distance2 = dist(mouseX, mouseY, p2.x, p2.y);

    let pointsize1 = 6;

    let pointsize2 = 7;

//  increase point size when mouse is close to point

    if (distance1 <= 100){

      pointsize1 = 15;

    }

    if (distance2 <= 100){

      pointsize2 = 10;

    }

//  scaling up noise so that point movement is visible on screen

    let scaledNoise = (noiseValue - 0.5) * 110;

//  display point in top text

    push();

    fill(255, 0);

    stroke(255);

    ellipse(p1.x+ scaledNoise, p1.y + scaledNoise, pointsize1);

    pop();

//  display point in bottom text

    push();

    fill(255);

    noStroke();

    ellipse(p2.x+ scaledNoise, p2.y + scaledNoise, pointsize2);

    pop();

  }

}