Public
Edited
Dec 16, 2024
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(700,700);
};
sketch.draw = function() {
sketch.translate(sketch.width/2, sketch.width/2);
sketch.background(200);
//Circulo externo do relogio
sketch.strokeWeight(6);
let raio = 0.4 * sketch.width;
sketch.fill(0,160,200);
sketch.circle(0,0,2*raio);
//Circulo interno eixo dos ponteiros
sketch.strokeWeight(3);
sketch.fill(255);
sketch.circle(0,0,30);
//marcação horas (1 a 12)
for(let i=1; i<=12; i++){
let angulo = i * sketch.TWO_PI/12 - sketch.HALF_PI;
let x1 = sketch.cos(angulo) * raio;
let y1 = sketch.sin(angulo) * raio;
let x2 = sketch.cos(angulo) * (raio - 30);
let y2 = sketch.sin(angulo) * (raio - 30);
//destaca (12,3,6,9)
sketch.strokeWeight(i%3 === 0 ? 6 : 3);
sketch.line(x1,y1,x2,y2);
}
//marcação minutos (60)
for(let i=1; i<=60; i++){
let angulo = i * sketch.TWO_PI/60 - sketch.HALF_PI;
let x1 = sketch.cos(angulo) * raio;
let y1 = sketch.sin(angulo) * raio;
let x2 = sketch.cos(angulo) * (raio - 10);
let y2 = sketch.sin(angulo) * (raio - 10);
sketch.strokeWeight(2);
//evita que as marcações de minutos fique em cima das marcações de horas
if(i%5!==0)sketch.line(x1,y1,x2,y2);
}
let hr = sketch.hour()%12;
let min = sketch.minute();
let seg = sketch.second();
//angulos dos ponteiros
let angSeg = seg * sketch.TWO_PI /60 - sketch.HALF_PI;
let angMin = min * sketch.TWO_PI /60 - sketch.HALF_PI;
let angHr = (hr + min /60) * sketch.TWO_PI /12 - sketch.HALF_PI;
//ponteiro dos segundos
sketch.stroke(255,0,0);
sketch.line(0, 0, sketch.cos(angSeg) * raio * 0.8, sketch.sin(angSeg) * raio * 0.8);
//ponteiro dos minutos
sketch.stroke(0,0,255);
sketch.line(0, 0, sketch.cos(angMin) * raio * 0.65, sketch.sin(angMin) * raio * 0.65);
//ponteiro das horas
sketch.stroke(0);
sketch.line(0, 0, sketch.cos(angHr) * raio * 0.5, sketch.sin(angHr) * raio * 0.5);
};
});
import {p5} from "@tmcw/p5"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
