//and twelve steps (for hours). Some have additional or different marks at, say, 

//the quarter hour (4 divisions). 

//This sketch shows all whole-number divions of 60 or less:

//60, 30, 20, 15, 12, 10, 6, 5, 4, 3, 2

//60 is a "superior highly composite number": https://en.wikipedia.org/wiki/Superior_highly_composite_number

//and as such has been held in high regard as a kind of magic number

​

let d = 780,

    r = d/2,

    c1, 

    c2;

​

function setup() {

  createCanvas(800, 800);

  noLoop();

  c1 = color("#ff0000"),

  c2 = color("#0000ff");

​

}

​

function draw() {

  background(220);

  translate(width/2, height/2);

  rotate(PI);

  noFill();

  ellipse(0, 0, d, d);

  let r = 0.95*d/2,    //radius of tick marks

      ci = 0,          //color index will change between 0 and 1

      cs = 0.1;        //color change step

​

  //with a decreasing radius, increasing stroke weight and gradient color, 

  //draw concentric sets of tick marks (60, 30, 20, 15 ... etc.)

  stroke(lerpColor(c1, c2, ci+=cs));

  strokeWeight(1);

  drawTicks(r, r*=0.9, 60);

  stroke(200);

  strokeWeight(0.5);

  ellipse(0, 0, r*2, r*2);

  stroke(lerpColor(c1, c2, ci+=cs));

  strokeWeight(2);

  drawTicks(r*=0.95, r*=0.9, 30);

  stroke(200);

  strokeWeight(0.5);

  ellipse(0, 0, r*2, r*2);

​

  stroke(lerpColor(c1, c2, ci+=cs));

  strokeWeight(3);

  drawTicks(r*=0.95, r*=0.9, 20);

  stroke(200);

  strokeWeight(0.5);

  ellipse(0, 0, r*2, r*2);

  stroke(lerpColor(c1, c2, ci+=cs));

  strokeWeight(4);

  drawTicks(r*=0.95, r*=0.9, 15);

  stroke(200);

  strokeWeight(0.5);

  ellipse(0, 0, r*2, r*2);

  stroke(lerpColor(c1, c2, ci+=cs));

  strokeWeight(5);

  drawTicks(r*=0.95, r*=0.9, 12);

  stroke(200);

  strokeWeight(0.5);

  ellipse(0, 0, r*2, r*2);

​

  stroke(lerpColor(c1, c2, ci+=cs));

  strokeWeight(6);

  drawTicks(r*=0.95, r*=0.9, 10);

  stroke(200);

  strokeWeight(0.5);

  ellipse(0, 0, r*2, r*2);

​

  stroke(lerpColor(c1, c2, ci+=cs));

  strokeWeight(7);

  drawTicks(r*=0.95, r*=0.9, 6);

  stroke(200);

  strokeWeight(0.5);

  ellipse(0, 0, r*2, r*2);

​

  stroke(lerpColor(c1, c2, ci+=cs));

  strokeWeight(8);

  drawTicks(r*=0.95, r*=0.9, 5);

  stroke(200);

  strokeWeight(0.5);

  ellipse(0, 0, r*2, r*2);

​

  stroke(lerpColor(c1, c2, ci+=cs));

  strokeWeight(9);

  drawTicks(r*=0.95, r*=0.9, 4);

  stroke(200);

  strokeWeight(0.5);

  ellipse(0, 0, r*2, r*2);

​

  stroke(lerpColor(c1, c2, ci+=cs));

  strokeWeight(10);

  drawTicks(r*=0.95, r*=0.9, 3);

  stroke(200);

  strokeWeight(0.5);

  ellipse(0, 0, r*2, r*2);

  stroke(lerpColor(c1, c2, ci+=cs));

  strokeWeight(11);

  drawTicks(r*=0.95, r*=0.9, 2);

  stroke(200);

  strokeWeight(0.5);

  ellipse(0, 0, r*2, r*2);

}

​

//draws a number (t) or lines raidally between radii r1 and r2

function drawTicks(r1, r2, t) {

  push();

  let angleStep = TWO_PI / t;

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

    line(0, r1, 0, r2);

    rotate(angleStep);

  }

  pop();

}