----- Coding Tutorial by Patt Vira ----- 

Name: 

Video Tutorial: 

​

Connect with Patt: @pattvira

https://www.pattvira.com/

----------------------------------------

*/

​

// Clock variables

let font; let fontPath; let fontSize = 130; 

let xPos = 25; let yPos = 250;

let samplePathSize = 15;

let path; let points = []; 

let msg; 

​

// Grid variables 

let cols; let rows; let size = 10;

let grid = [];

let clock = [];

let distFromClock = 8;

​

// Color variables

let hueValue = 0; 

let bgColor = 50;

​

function setup() {

  createCanvas(800, 400);

  colorMode(HSB, 255);

  cols = width/size;

  rows = height/size; 

  for (let i=0; i<cols; i++) {

    grid[i] = [];

    clock[i] = [];

    for (let j=0; j<rows; j++) {

      grid[i][j] = 0;

      clock[i][j] = new Rect(i*size, j*size);

    }

  }

}

​

function draw() {

  // background(hueValue, 255, 255);

  background(bgColor);

  let h = hour();

  let m = minute();

  let s = second();

  let h_msg; let m_msg; let s_msg;

  if (h.toString().length == 1) {

    h_msg = "0"+h.toString();

  } else {

    h_msg = h.toString();

  }

  if (m.toString().length == 1) {

    m_msg = "0"+m.toString();

  } else {

    m_msg = m.toString();

  }

  if (s.toString().length == 1) {

    s_msg = "0"+s.toString();

  } else {

    s_msg = s.toString();

  }

  msg = h_msg + " : " + m_msg + " : " + s_msg;

  setupFont();

  hueValue += 5;

  let distance;

  for (let i=0; i<cols; i++) {

    for (let j=0; j<rows; j++) {

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

        for (let l=0; l<points[k].length; l++){

          distance = dist(points[k][l].x, points[k][l].y, i*size, j*size);

​

          if (distance < distFromClock) {

            grid[i][j] = 1;

            clock[i][j].isLetter = true;

          } 

        }

      }

      noFill();

      if (grid[i][j] == 1) {

        stroke(255);

      } else {

        noStroke();

      }

      rect(i*size, j*size, size, size); 

      clock[i][j].display();

    }

  }

  // displayPoints();

  update();

  if (hueValue > 255) {

    hueValue = 0;

  }

}

​

function displayPoints() {

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

    for (let l=0; l<points[k].length; l++) {

      stroke(255);

      noFill();

      rect(points[k][l].x, points[k][l].y, 10, 10);

    }

  }

}

​

function update() {

    let nextGen = [];

    for (let i=0; i<cols; i++) {

      nextGen[i] = [];

      for (let j=0; j<rows; j++) {

​

          let n = neighboringStates(grid, i, j);

          if (grid[i][j] == 1 && n < 2) {

            nextGen[i][j] = 0;

          } else if (grid[i][j] == 1 && (n == 2 || n ==3 )) {

            nextGen[i][j] = 1;

          } else if (grid[i][j] == 1 && n > 3) {

            nextGen[i][j] = 0;

          } else if (grid[i][j] == 0 && n == 3) {

            nextGen[i][j] = 1;

          } else {

            nextGen[i][j] = grid[i][j];

          }

        }

​

​

    }

    grid = nextGen;

}

function neighboringStates(grid, x, y) {

    let sum = 0;

    for (let i=-1; i<2; i++) {

      for (let j=-1; j<2; j++) {

        let xIndex = (x + i + cols) % cols;

        let yIndex = (y + j + rows) % rows;

        sum += grid[xIndex][yIndex];

      }

    }

    sum -= grid[x][y];

    return sum;

  }

​

​

function setupFont() {

  opentype.load("fonts/LEMONMILK-Regular.otf", function(err, f) {

    if (err) {

      console.log(err);

    } else {

      font = f;

    }

    fontPath = font.getPath(msg, xPos, yPos, fontSize);

    path = new g.Path(fontPath.commands);

    path = g.resampleByLength(path, samplePathSize);

    let next = [];

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

      if (path.commands[i].type == "M") {

        next.push([]);

      }

      if (path.commands[i].type != "Z") {

        next[next.length-1].push(createVector(path.commands[i].x, path.commands[i].y));

      }

    }

    points = next;

  });

}