Skip to content

Arc clock

A 24-hour clock, where each "hand" is a slowly growing arc

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  angleMode(DEGREES)
  strokeWeight(10)
  fill(10, 20, 34)
  stroke(35, 200, 34)
  textSize(15)
  textFont("monospace")
  textAlign(RIGHT, CENTER)
  text(hour(), 192, 25)
  text(minute(), 192, 50)
  text(second(), 192, 75)
  noFill()
  let a = -90
  stroke(10, 20, 34)
  arc(200, 200, 350, 350, -90.01, (hour()%12)/12*360 - 90)
  arc(200, 200, 300, 300, -90.01, minute()/60*360 - 90)
  arc(200, 200, 250, 250, -90.01, second()/60*360 -90)
}

(Originally seen at https://editor.p5js.org/bojidar-bg/sketches/yjzKpMmE1)

Experiments tagged p5 (8/85)

|← Experiments tagged clock (1/1) →|

Experiments on this site (8/85)