var faceY; 
var faceX;
var b;
var rand;

var numX = [];
var numY = [];
var tickX = [];
var tickY = [];
var midX;
var midY;

function setup() {
  createCanvas(550, 550);
  faceX = random(width / 2 - 10, width / 2 + 10);
  faceY = random(height / 2 - 10, height / 2 + 10);
}

function draw() {
  background(245);

  var clock1 = makeClock(faceX, faceY, 6, 3);
  b = map(noise(millis() * 0.001), 0, 1, -1, 1);
  noFill();
}

function makeClock(x, y, r, face) {
  clock = makeTurtle(x, y);
  clock.penUp();
  circ(clock, x, y, r, face);
  clock.setColor("black");
  drawTime(x, y);
  drawNums(clock, x, y, face);
}

function circ(ttl, x, y, r, face) {
  ttl.goto(x, y - r * 25);
  ttl.penDown();
  ttl.setColor(200);

  var perimeter = r * 200;
  for (var i = 0; i < perimeter; i++) {
    rand = map(noise(i + b * 0.2), 0, 1, -r * 1, r * 1.1);
    ttl.right(radians(r * 3) + rand * 0.4);
    ttl.forward(1);
    
     if (i % (perimeter / 60) == 0) { 
      tickX[i / (perimeter/60)] = ttl.x;
      tickY[i / (perimeter/60)] = ttl.y;
     }
  }
  ttl.penUp();
}

function drawNums(ttl, x, y, face) {
  for (var i = 0; i < 12; i++) {
    rand = b * 2 * i;
    numX[i] = tickX[(i) * 5] + rand;
    numY[i] = tickY[(i) * 5] + rand;
    numbers(ttl, i, numX[i], numY[i], face);
  }
}

function drawTime(x, y) {
  var s = second();
  var m = minute(); 
  var h = (hour() % 12) * 5;
  var time = [s, m, h];

  midX = numX[9] + (numX[3] - numX[9]) / 2;
  midY = numY[0] + (numY[6] - numY[0]) / 2;

  for (var i = 0; i < 3; i++) {
    stroke(210 - 80 * i);
    var handLength = 1;
    if (i == 2) handLength = 0.6;
    var px = lerp(midX, tickX[time[i]], handLength);
    var py = lerp(midY, tickY[time[i]], handLength);
    line(midX, midY, px, py);
  }
  ellipse(midX, midY, 5, 5);
  
}

function numbers(ttl, num, x, y, face) {
  
  if (num == 0) {
    numbers(ttl, 1, x, y, face);
    numbers(ttl, 2, x + face * 4, y, face);
  }
  if (num == 1) {
    ttl.goto(x, y);
    ttl.face(90);
    ttl.penDown();
    lineLength = 6 * face;
    for (var i = 0; i < lineLength; i++) {
      rand = map(noise(i), 0, 1, -3, 3);
      ttl.forward(1);
      ttl.right(rand);
    }
    ttl.penUp();
  }

  if (num == 2) {
    ttl.goto(x, y);
    ttl.face(0);
    ttl.penDown();
    lineLength = 2 * face;
    for (var i2 = 0; i2 < lineLength + face; i2++) {
      if (i2 < lineLength) {
        rand = map(noise(i2 + b), 0, 1, -face, face);
        ttl.right(360 / (2 * lineLength) + rand);
        ttl.forward(face + rand);
      } else {
        ttl.face(0);
        ttl.forward(lineLength);
      }
    }
    ttl.penUp();
  }

  if (num == 3) {
    ttl.goto(x, y);
    ttl.face(0);
    ttl.penDown();
    lineLength = face * 5;
    for (var i3 = 0; i3 < lineLength / 2; i3++) {
      rand = map(noise(i3 + b), 0, 1, -1.5, 1.5);
      ttl.right(360 / (lineLength) + rand);
      ttl.forward(face / 2 + rand);
    }
    ttl.face(0);
    for (var j3 = lineLength / 2; j3 < lineLength; j3++) {
      rand = map(noise(j3 + b), 0, 1, -1.5, 1.5);
      ttl.right(360 / (lineLength) + rand);
      ttl.forward(face / 2 + rand);
    }
    ttl.penUp();
  }

  if (num == 4) {
    ttl.goto(x + face, y + face * 5);
    ttl.face(180);
    ttl.penDown();
    lineLength = face * 2.5 + rand;
    for (var i4 = 0; i4 < lineLength; i4++) {
      rand = map(noise(i4 + b), 0, 1, -2.5, 2.5);
      ttl.right(rand);
      ttl.forward(lineLength * 0.2);
    }
    ttl.goto(x, y);
    ttl.face(90);
    for (i4 = 0; i4 < lineLength * 2; i4++) {
      rand = map(noise(i4 + b), 0, 1, -2.5, 2.5);
      ttl.right(rand);
      ttl.forward(lineLength / 5);
    }
    ttl.penUp();
  }

  if (num == 5) {
    ttl.goto(x + face, y);
    ttl.face(180);
    ttl.penDown();
    lineLength = face * 5;
    ttl.forward(lineLength);
    ttl.face(90);
    ttl.forward(lineLength / 2);
    ttl.face(0);
    for (var i5 = 0; i5 < lineLength; i5++) {
      rand = map(noise(i5 + b), 0, 1, -1.5, 2.5);
      ttl.right(360 / (lineLength * 1.5) + rand);
      ttl.forward(face / 2 + rand);
    }
    ttl.penUp();
  }

  if (num == 6) {
    ttl.goto(x, y - face * 2);
    ttl.face(120);
    ttl.penDown();
    lineLength = face * 4 + rand;
    ttl.forward(lineLength * 1.5);
    ttl.face(120);
    for (var i6 = 0; i6 < lineLength; i6++) {
      rand = map(noise(i6 + b), 0, 1, -1.5, 3.5);
      ttl.left(360 / (lineLength) + rand);
      ttl.forward(face / 2 + rand);
    }
    ttl.penUp();
  }

  if (num == 7) {
    ttl.goto(x - face * 5, y);
    ttl.face(0);
    ttl.penDown();
    lineLength = face * 4;
    ttl.forward(lineLength);
    ttl.face(120);
    for (var i7 = 0; i7 < lineLength; i7++) {
      rand = map(noise(i7 + b), 0, 1, -2.5, 2.5);
      ttl.forward(abs(rand * 2));
      ttl.right(rand);
    }
    ttl.penUp();
  }

  if (num == 8) {
    ttl.goto(x - face, y);
    ttl.face(180);
    ttl.penDown();
    lineLength = face * 4;
    for (var i8 = 0; i8 < lineLength; i8++) {
      rand = map(noise(i8 + b), 0, 1, -1.5, 1.5);
      ttl.right(360 / (lineLength) + rand);
      ttl.forward(face + rand);
    }
    for (var j8 = 0; j8 < lineLength; j8++) {
      ttl.left(360 / (face * 3.5) + rand);
      ttl.forward(face + rand);
    }
    ttl.penUp();
  }

  if (num == 9) {
    ttl.goto(x, y);
    ttl.face(90);
    ttl.penDown();
    lineLength = face * 4;
    for (var i9 = 0; i9 < lineLength; i9++) {
      rand = map(noise(i9 + b), 0, 1, -1.5, 3.5);
      ttl.right(360 / (5 * face) + rand);
      ttl.forward(face / 2 + rand);
    }
    ttl.face(90);
    ttl.forward(lineLength * 2);
    ttl.penUp();
  }

  if (num == 10) {
    numbers(ttl, 1, x, y, face);
    ttl.goto(x + face * 5, y + face);
    ttl.face(0);
    ttl.penDown();
    lineLength = face * 4 + rand;
    for (var i10 = 0; i10 < lineLength; i10++) {
      rand = map(noise(i10 + b), 0, 1, -1.5, 1.5);
      ttl.right(360 / (lineLength) + rand);
      ttl.forward(face + rand);
    }
    ttl.penUp();
  }

  if (num == 11) {
    numbers(ttl, 1, x, y, face);
    numbers(ttl, 1, x + face * 2, y, face);
  }

}

/////////////////////////////////////////////////////////////////
function turtleLeft(d) {
  this.angle -= d;
}

function turtleRight(d) {
  this.angle += d;
}

function turtleForward(p) {
  var rad = radians(this.angle);
  var newx = this.x + cos(rad) * p;
  var newy = this.y + sin(rad) * p;
  this.goto(newx, newy);
}

function turtleBack(p) {
  this.forward(-p);
}

function turtlePenDown() {
  this.penIsDown = true;
}

function turtlePenUp() {
  this.penIsDown = false;
}

function turtleGoTo(x, y) {
  if (this.penIsDown) {
    stroke(this.color);
    strokeWeight(this.weight);
    line(this.x, this.y, x, y);
  }
  this.x = x;
  this.y = y;
}

function turtleDistTo(x, y) {
  return sqrt(sq(this.x - x) + sq(this.y - y));
}

function turtleAngleTo(x, y) {
  var absAngle = degrees(atan2(y - this.y, x - this.x));
  var angle = ((absAngle - this.angle) + 360) % 360.0;
  return angle;
}

function turtleTurnToward(x, y, d) {
  var angle = this.angleTo(x, y);
  if (angle < 180) {
    this.angle += d;
  } else {
    this.angle -= d;
  }
}

function turtleSetColor(c) {
  this.color = c;
}

function turtleSetWeight(w) {
  this.weight = w;
}

function turtleFace(angle) {
  this.angle = angle;
}

function makeTurtle(tx, ty) {
  var turtle = {
    x: tx,
    y: ty,
    angle: 0.0,
    penIsDown: true,
    color: color(128),
    weight: 1,
    left: turtleLeft,
    right: turtleRight,
    forward: turtleForward,
    back: turtleBack,
    penDown: turtlePenDown,
    penUp: turtlePenUp,
    goto: turtleGoTo,
    angleto: turtleAngleTo,
    turnToward: turtleTurnToward,
    distanceTo: turtleDistTo,
    angleTo: turtleAngleTo,
    setColor: turtleSetColor,
    setWeight: turtleSetWeight,
    face: turtleFace
  };
  return turtle;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js