const tileSize = 50;

const w = gridSize * tileSize;

const h = gridSize * tileSize;

​

const polygon = Shape.polygon2(350, 6, Math.PI / 2);

​

let distribution = 0.01;

​

let distSplines = [

  // minutes

  new Curve.DistributedSpline2(new Curve.ClosedSpline2(polygon), distribution),

  // seconds

    new Curve.DistributedSpline2(

    new Curve.ClosedSpline2(

      transform(

        polygon,

        // transform to direction vectors in local space

        [Vec2Array.dirVec2, new Vec2(0)],

        // multiple the direction vectors with a radius

        [Vec2Array.mulByNum, 150],

        // translate the vectors back to world space

        [Vec2Array.add, polygon]

      )

    ),

    distribution

  ),

  // milliseconds

  new Curve.DistributedSpline2(

    new Curve.ClosedSpline2(

      transform(

        polygon,

        // transform to direction vectors in local space

        [Vec2Array.dirVec2, new Vec2(0)],

        // multiple the direction vectors with a radius

        [Vec2Array.mulByNum, 275],

        // translate the vectors back to world space

        [Vec2Array.add, polygon]

      )

    ),

    distribution

  )

];

​

function setup() {

  createCanvas(w, h);

}

​

function draw() {

  background(220);

​

  translate(w / 2, h / 2);

  scale(1, -1);

​

  stroke(0);

  strokeWeight(1);

  // draw spline lines

  distSplines.forEach(ds => drawSplineLines(ds.spline))

  fill(0, 255, 0);

  distSplines.forEach(ds => drawSplineCircles(ds.spline, 10))

​

  const curveSplines = distSplines.map((distSpline) =>

    distSpline.getCurve(0.05)

  );

​

  fill(0, 0, 255);

  curveSplines.forEach(curve => drawSplineCircles(curve, 5))

  const curvePoints = [

    distSplines[0].getCurvePoint(1 - new Date().getMinutes() / 60),

    distSplines[1].getCurvePoint(1 - new Date().getSeconds() / 60),

    distSplines[2].getCurvePoint(1 - new Date().getMilliseconds() / 1000),

  ];

​

  curvePoints.forEach((pt) => {

    fill(255, 0, 0);

    circle(pt.x, pt.y, 10);

  });

}

​

function drawSplineLines(spline) {

  let prev = spline.get(spline.length - 1);

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

    const next = spline.get(i);

    line(prev.x, prev.y, next.x, next.y);

    prev = next;

  }

}

​

function drawSplineCircles(spline, radius) {

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

    const v = spline.get(i);

    circle(v.x, v.y, radius);

  }

}

​

function generatePoints() {

  const points = [];

​

  let hasRight = pr.nextBool();

  let start = new Vec2(

    hasRight ? pr.nextFloatRange(0, gridSize) : 0,

    !hasRight ? pr.nextFloatRange(0, gridSize) : 0

  );

​

  points.push(start);

  points.push(start);

  while (true) {

    hasRight = pr.nextBool();

​

    let ex = start.x;

    let ey = start.y;

​

    let xid = floor(ex);

    let yid = floor(ey);

​

    if (hasRight) {

      ex = xid + 1;

      ey = yid + pr.nextFloatRange(fract(start.y), 1);

    } else {

      ey = yid + 1;

      ex = xid + pr.nextFloatRange(fract(start.x), 1);

    }

​

    const end = new Vec2(ex, ey);

​

    points.push(end);

​

    if (end.x < 0 || end.x > gridSize) {

      break;

    }

​

    if (end.y < 0 || end.y > gridSize) {

      break;

    }

​

    start = end;

  }

  points.push(start);

  return points;

}

​

window.setup = setup;

window.draw = draw;

​