Wasted Time.

Live animation.

Description.

Creative coding clock example made with p5.js.

I wanted to try to make a clock with my code.
A clock should be a live animation. So I used p5.js this time.

I used to feel that time reading difficulty makes my brain sharp.



So I made a clock that has a viewpoint from the minute hand for time reading difficulty.
It's my brain sharpener.

p5.js example code (Javascript).

Please feel free to use it, if you like it.
To see other works based on my code is my pleasure. And my honor.

I used a font 'TitilliumWeb-Bold' from Google Fonts. You can use your own font.

let myFont;
function preload() {
  myFont = loadFont('TitilliumWeb-Bold.ttf');
}

function setup() {
  createCanvas(640, 640, WEBGL);
  colorMode(HSB, 360, 100, 100, 100);
  textFont(myFont);
  textSize(80);
  textAlign(CENTER, CENTER);
  frameRate(3);
}

function draw() {
 
  background(0.0, 0.0, 90.0, 100.0);

  // draw dial face
  stroke(0.0, 0.0, 30.0, 100.0);
  strokeWeight(5.0);
  noFill();
  ellipse(0.0, 0.0, width - 5.0, height - 5.0)

  push();
  translate(0.0, 0.0, -5.0);
  fill(0.0, 0.0, 100.0, 100.0);
  ellipse(0.0, 0.0, width - 5.0, height - 5.0)
  pop();
 
  fill(0.0, 0.0, 20.0, 100.0);
  noStroke();
  ellipse(0.0, 0.0, 40.0, 40.0)

  const dialRadius = width * 0.4;
  for (let dial = 0; dial < 12; dial++) {
    let dialRadian = TWO_PI * dial / 12.0 - PI / 3.0;
    text(dial + 1, dialRadius * cos(dialRadian), dialRadius * sin(dialRadian) - 15.0);
  }

  // draw clock hands
  let h = hour() % 12;
  let m = minute();
  let s = second();

  fill(0.0, 0.0, 20.0, 100.0);
  drawHand(h / 12.0 + m / (60.0 * 12.0), 0.3, 1.0);
  drawHand(m / 60.0, 0.4, 0.7);
  fill(0.0, 60.0, 50.0, 100.0);
  drawHand(s / 60.0, 0.5, 0.4);

  // camera position
  const minutsRadius = width * 0.4;
  let minutsRadian = TWO_PI * m / 60.0 - PI / 2.0;
  camera(minutsRadius * cos(minutsRadian), minutsRadius * sin(minutsRadian), 120.0,
         0.0, 0.0, 0.0,
         0, 1, 0);

}

function drawHand(_rotation, _length, _width) {
  push();
  rotate(TWO_PI * _rotation);
  beginShape();
  vertex(-20.0 * _width, 0.0, 0.0);
  vertex(20.0 * _width, 0.0, 0.0);
  vertex(0.0, -width * _length, 0.0);
  endShape(CLOSE);
  pop();

}

/*
Copyright (C) 2019- deconbatch

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>
*/