-
Notifications
You must be signed in to change notification settings - Fork 0
/
clock_b1.html
108 lines (87 loc) · 3.38 KB
/
clock_b1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Clock</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="lib/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
//var anchor_loc =
var hour_anchor = new Point(300,300);
var centre_radius = 10;
var hour_radius = 50;
var min_radius = 30;
var sec_radius = 10;
var bg = new Path.Rectangle(new Point(0,0),new Size(view.bounds.width,view.bounds.height));
bg.fillColor = '#000000';
var circle_centre = new Path.Circle(new Point(0,0), centre_radius);
circle_centre.strokeColor = '#aaaaaa';
var circle_hour = new Path.Circle(new Point(0,0), hour_radius);
circle_hour.strokeColor = '#ffffff';
circle_hour.fillColor = '#ffffff';
var text_hour = new PointText(new Point(0,0));
text_hour.fontSize = 24;
text_hour.justification = "center";
text_hour.fillColor = "#000000";
var group_hour = new Group(circle_hour,text_hour);
var circle_min = new Path.Circle(new Point(0,0), min_radius);
circle_min.strokeColor = '#ffffff';
circle_min.fillColor = '#ffffff';
var text_min = new PointText(new Point(0,0));
text_min.fontSize = 20;
text_min.justification = 'center';
text_min.fillColor = '#000000';
var group_min = new Group(circle_min,text_min);
var circle_sec = new Path.Circle(new Point(0,0), sec_radius);
circle_sec.strokeColor = '#ffffff';
circle_sec.fillColor = '#ffffff';
var text_sec = new PointText(new Point(0,0));
text_sec.fontSize = 16;
text_sec.justification = 'center';
text_sec.fillColor = '#000000';
var group_sec = new Group(circle_sec,text_sec);
var debug = new PointText(new Point(100,100));
//debug.content = "hello";
var angle_hour = 0;
var angle_min = 0;
var angle_sec = 0;
function onFrame(event) {
//firstPath.position.x += 1;
//circle_hour = //SOHCAHTOA --
angle_hour -= (Math.PI / 400);
angle_min -= (Math.PI / 220);
angle_sec -= (Math.PI / 90);
var d = new Date();
var time_hour = d.getHours() % 12;
var time_min = d.getMinutes();
var time_sec = d.getSeconds();
var perc_milli = d.getMilliseconds() / 1000;
var perc_sec = (time_sec+perc_milli)/60;
var perc_min = (time_min+perc_sec)/60;
var perc_hour = (time_hour+perc_min)/12;
var angle_hour = (perc_hour*(2*Math.PI))-(Math.PI/2.0);
var angle_min = (perc_min*(2*Math.PI))-(Math.PI/2.0);
var angle_sec = (perc_sec*(2*Math.PI))-(Math.PI/2.0);
positionItem(group_hour, view.center, angle_hour, centre_radius+hour_radius);
positionItem(group_min, group_hour.position, angle_min, hour_radius+min_radius+(sec_radius*2));
positionItem(group_sec, group_min.position, angle_sec, min_radius+sec_radius);
//text_hour.content = time_hour; //Math.round(angle_hour*10)/10;
//text_min.content = time_min; //Math.round(angle_min*10)/10;
//text_sec.content = time_sec; //Math.round(angle_sec*10)/10;
}
function onResize(){
circle_centre.position = view.center;
bg.bounds = view.bounds;
}
function positionItem(item, anchor, angle, distance){
var xp = anchor.x + Math.cos(angle)*distance;
var yp = anchor.y + Math.sin(angle)*distance;
//debug.content = angle + "\n"+ Math.round(xp) + "\n" + yp;
item.position = new Point( xp, yp );
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>