xxxxxxxxxx83
<html> <head> <script src="https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.js"></script> <script src="https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.dom.js"></script> <style>body {margin:0;text-align:centre;} canvas{position:fixed;top:15;left:15;}</style> </head> <body> <script> var radius=180; var diff=25; let hour,minute,second; let hourAngle,minuteAngle,secondAngle; function setup() { createCanvas(400,400); var d= new Date(); hour=d.getHours();minute=d.getMinutes();second=d.getSeconds(); hourAngle=TWO_PI/12*hour; minuteAngle=TWO_PI/60*minute; secondAngle=TWO_PI/60*second; if(hour>12) { hour-=12; } } function draw() { background(55,10); translate(width/2,height/2); frameRate(20); rotate(-PI/2); strokeWeight(12); stroke(243,43,87); var AxisSec=rotationAxis(secondAngle,radius); point(AxisSec.x,AxisSec.y); secondAngle+=TWO_PI/60/20; line(0,0,AxisSec.x,AxisSec.y); stroke(0,233,255); var AxisMin=rotationAxis(minuteAngle,radius-diff); point(AxisMin.x,AxisMin.y); minuteAngle+=TWO_PI/60/60/20; line(0,0,AxisMin.x,AxisMin.y); stroke(249,243,6); var AxisHour=rotationAxis(hourAngle,radius-2*diff); point(AxisHour.x,AxisHour.y); hourAngle+=TWO_PI/60/60/12/20; line(0,0,AxisHour.x,AxisHour.y); stroke(255); ellipse(0,0,13,13); strokeWeight(3); line(175,0,190,0); line(-175,-0,-190,-0); rotate(PI/2); line(175,0,190,0); line(-175,0,-190,0); } function rotationAxis(a,r) { var obj={x:cos(a)*r, y:sin(a)*r} return obj; } document.addEventListener("visibilitychange", event => { if (document.visibilityState == "visible") { var d= new Date(); hour=d.getHours();minute=d.getMinutes();second=d.getSeconds(); hourAngle=TWO_PI/12*hour; minuteAngle=TWO_PI/60*minute; secondAngle=TWO_PI/60*second; if(hour>12) { hour-=12; }} console.log(second+","+minute+","+hour); }); </script> </body></html>