let fontSize = 150;

let rad = 15

let cnv;

​

function preload() {

  font = loadFont('Radial-Semibold.otf');

}

​

function centerCanvas() {

  let cnv = createCanvas(600, 850);

  let posterX = (windowWidth - width) / 2;

  let posterY = (windowHeight - height) / 2;

  cnv.position(posterX, posterY);

}

​

function setup() {

  //center canvas within browser window with no cursor (dom script added to html head as well)

  // cnv = createCanvas(600, 800);

  centerCanvas();

  noCursor();

​

  x = 18

  y = height / 3 + 30

​

  //text to point setup for each word

  milton = font.textToPoints('MILTON', x, y, fontSize, {

    sampleFactor: .117

  })

​

  glaser = font.textToPoints('GLASER', x, y, fontSize, {

    sampleFactor: .11

  })

​

  //calculate number of points so they are the same between "MILTON" and "GLASER"

  print(milton.length, glaser.length)

​

  //random colors

  for (let i of milton) {

    i.color = color(

      random(255),

      random(255),

      random(255),

      random(200, 255)

    )

  }

}

​

function draw() {

  background(0);

​

  //random fill

  for (let i of milton) {

    fill(i.color)

    noStroke()

    ellipse(i.x, i.y, rad)

  }

​

  //morphs 'MILTON' into 'GLASER' on mouseIsPressed

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

​

    // ellipse(milton[i].x, milton[i].y, rad)

​

    if (mouseIsPressed) {

      if (milton[i].x <= glaser[i].x) {

        milton[i].x++;

      }

​

      if (milton[i].x >= glaser[i].x) {

        milton[i].x--;

      }

​

      if (milton[i].y <= glaser[i].y) {

        milton[i].y++;

      }

​

      if (milton[i].y >= glaser[i].y) {

        milton[i].y--;

      }

    }

  }

​

  // date at bottom

  fill(255, 100)

  textAlign(CENTER)

  textSize(14)

  text("1929 – 2020", width / 2, height - 50)

  // custom cursor

  fill(255, 0, 150, 155)

  ellipse(mouseX, mouseY, rad)

}

​

function windowResized() {

  centerCanvas();

}