let font;

let i = 0;

let colors = [51, 51];

let points;

let bounds;

​

function preload() {

  font = loadFont("Roboto-Light.ttf");

}

​

function setup() {

  createCanvas(600, 600);

  textAlign(CENTER);

  let boundingBox = font.textBounds(str, 0, 0, 150);

  points = font.textToPoints(str, width/2 - boundingBox.w/2, height/2 - boundingBox.h/2, 150);

}

​

function draw() {

  background(0);

  if (frameCount % 10 == 0) {

    if (colors[0] > 255) {

      i = 1;

    } else if (colors[0] < 0) {

      i = 0;

    }

    if (i == 0) {

      colors[0] += 10;

      colors[1] += 10;

    } else {

      colors[0] -= 10;

      colors[1] -= 10;

    }

  }

  fill(0, colors[0], colors[1]);

  textSize(125);

  textFont(font);

  text(hour() + ":" + minute() + ":" + second(), width/2, height/2 + 100);

  noFill();

  stroke(0,255,255);

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

    let x = points[i].x;

    let y = points[i].y;

    ellipse(x,y,20,20);

  }

}

​