p5js 에서 시간이 나오는걸 어떻게 더 하면 더 입체적으로 볼수 있을까 해서 해 보았다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<title>Document</title>
<style>
.timeC{
z-index:10;
position: absolute;
color: white;
}
p{
position: absolute;
font-size: 40px;
}
</style>
</head>
<body>
<div class="timeC">
<p style="top:100px;left:740px">12</p>
<p style="top:285px;left:930px">3</p>
<p style="top:465px;left:750px">6</p>
<p style="top:285px;left:570px">9</p>
</div>
<script>
function setup(){
createCanvas(windowWidth, windowHeight);
angleMode(DEGREES);
}
function draw(){
background(0);
translate((windowWidth)/2,(windowHeight)/2);
rotate(-90);
let hr = hour();
let mn = minute();
let sc = second();
strokeWeight(8);
noFill();
stroke(255, 100, 150);
let secondAngle = map(sc, 0, 60, 0, 360);
arc(0, 0, 310, 310, 0, secondAngle);
stroke(150, 100, 255);
let minuteAngle = map(mn, 0, 60, 0, 360);
arc(0, 0, 285, 285, 0, minuteAngle);
stroke(150, 255, 100);
let hourAngle = map(hr % 12, 0, 12, 0, 360);
arc(0, 0, 255, 255, 0, hourAngle);
push();
rotate(secondAngle);
stroke(255, 100, 150);
line(0, 0, 100, 0);
pop();
push();
rotate(minuteAngle);
stroke(150, 100, 255);
line(0, 0, 100, 0);
pop();
push();
rotate(hourAngle);
stroke(150, 255, 100);
line(0, 0, 100, 0);
pop();
stroke(0);
point(0, 0);
}
</script>
</body>
</html>전체 코드이다 p5js cdn을 들고 과서 link에 추가 해 서 사용 하였다(사이트에 가서하면 script안에 들어 있는거만 복사 해서 하면 같은 화면을 볼 수 있다).
맨 안쪽에 있는 형광색 비슷한게 시간을 나타낸다.
그리고 두번째 연보라 색이 분을 나타내고,
가장 밖을 감싸고 있는 분홍색이 초를 나타 낸다.
null