let fontSize = 360;

let stretchLength = 30;

let negStrechLength = -stretchLength;

let text = "&";

let points = [];

​

function preload() {

  font = loadFont('./ReplicaProTT-Bold.ttf')

}

​

function setup() {

  createCanvas(500, 500)  

  stroke(255)

  strokeWeight(1)

  // Load a piece of text as points

  points = font.textToPoints(text, 0, 0, fontSize, {sampleFactor: .1})

}

​

​

function draw() {

  background('#121212')

  translate(125, 400)

  for (let pt of points) {

    // Extrude each point by the stretch length

      let mouseXRange = map(mouseX, 0, width, negStrechLength, stretchLength);

      let mouseYRange = map(mouseY, 0, height, stretchLength, negStrechLength);

    let extrudedPt = {

      x: pt.x + mouseXRange,

      y: pt.y - mouseYRange,

    }

​

    // Draw the extruded point and line at a lower opacity

    fill('rgba(0,160,240, 1)')

    stroke('rgba(0,160,240, 1)')

    ellipse(extrudedPt.x, extrudedPt.y, 3)

    fill('rgba(0,160,240, .5)')

    stroke('rgba(0,160,240, .5)')

    line(pt.x, pt.y, extrudedPt.x, extrudedPt.y)

​

    // Draw the normal point

    fill('rgba(0,160,240, .25)')

    stroke('rgba(0,160,240, .25)')

    ellipse(pt.x, pt.y, 3)

  }

}