Skip to content

Random clock

An analog clock with randomized arcs and lines behind.

let seed = 0

function setup() {
  createCanvas(windowWidth, windowHeight);
  angleMode(DEGREES)
  seed = random(1000000)
}

let tzo = (new Date()).getTimezoneOffset()


function draw() {
  randomSeed(seed)
  background(random(210, 255), random(210, 255), random(210, 255));
  
  let t = Date.now() / 1000 - tzo * 60
  
  translate(width/2, height/2)
  
  stroke(0)
  fill(255)
  circle(0, 0, random(100, 300))
  
  for (let i = 23; i >= 0; i --) {
    let s = random(1, 1.2) * (1.04 ** i)
    rotate(sin(t * 360 / random([2,4,5,12,14, 0.5]) / (i + 1) + random(360)) * random(-15, 15) + i * 360/24)
    if (random() < 0.7) {
      stroke(100, 200)
      line(-random(60) * s, 0, random(60) * s, 0)
    } else {
      noStroke()
      fill(150, 100)
      arc(0, 0, s * 100, s * 100, 0, random([90, 90, 90, 90, 180, 270]), PIE)
    }
  }
  
  resetMatrix()
  translate(width/2, height/2)
  stroke(0)
  fill(0)
  push()
  rotate(t / 60 % 1 * 360 - 90)
  line(-random(100), 0, random(50, 200), 0)
  pop()
  push()
  rotate(t / 60 / 60 % 1 * 360 - 90)
  {
    let r = -random(75)
    triangle(r, 0.5, r, -0.5, random(100, 200), 0)
  }
  pop()
  push()
  rotate(t / 60 / 60 / 12 % 1 * 360 - 90)
  {
    let r = -random(75)
    triangle(r, 1, r, -1, random(100, 200), 0)
  }
  pop()
  
  circle(0, 0, 5)
  
}

(Originally seen at https://editor.p5js.org/bojidar-bg/sketches/SRkt9W9VB and https://mastodon.social/@bojidar_bg/113873986303073337)

Experiments tagged p5 (23/85)

Experiments on this site (23/85)