-
Notifications
You must be signed in to change notification settings - Fork 0
/
newpicture.html
executable file
·117 lines (117 loc) · 3.89 KB
/
newpicture.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
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
overflow: hidden;
}
#c {
background-color: #000;
}
</style>
</head>
<body>
<canvas id="c"></canvas>
</body>
<script type="text/javascript">
//Determine if compatible
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
},
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
// ends requestAnimationFrame polyfill
var c = document.getElementById("c");
var ctx = c.getContext("2d");
var cw = c.width = window.innerWidth;
var ch = c.height = window.innerHeight;
var pointsRy = [];
var n = 9;
var f = 8;
var grow = true;
var R = 400;
var a = 360 / n;
var rad = (Math.PI / 180) * a;
function draw() {
if (f == 10) {
grow = true;
} else if (f == 60) {
grow = false;
}
if (grow == true) {
f++
} else {
f--
}
ctx.lineWidth = 5;
for (var i = 0; i < n; i++) {
pointsRy[i] = [];
for (var k = 0; k < f; k++) {
pointsRy[i][k] = {};
pointsRy[i][k].x = cw / 2 + (R / f) * k * Math.cos(rad * i);
pointsRy[i][k].y = ch / 2 + (R / f) * k * Math.sin(rad * i);
}
}
for (var p = 0; p < pointsRy.length; p++) {
for (var l = 0; l < n; l++) {
ctx.beginPath();
ctx.moveTo(pointsRy[p][l].x, pointsRy[p][l].y);
if (pointsRy[p + 1]) {
ctx.lineTo(pointsRy[p + 1][f - 1].x, pointsRy[p + 1][f - 1].y);
} else {
ctx.lineTo(pointsRy[0][f - 1].x, pointsRy[0][f - 1].y);
}
ctx.moveTo(pointsRy[p][l].x, pointsRy[p][l].y);
if (pointsRy[p - 1]) {
ctx.lineTo(pointsRy[p - 1][f - 1].x, pointsRy[p - 1][f - 1].y);
} else {
ctx.lineTo(pointsRy[n - 1][f - 1].x, pointsRy[n - 1][f - 1].y);
}
ctx.strokeStyle = "hsl(" + a * l + ",100%,50%)";
console.log(a * l)
ctx.stroke();
ctx.globalCompositeOperation = "difference";
}
}
requestId = window.requestAnimationFrame(draw);
ctx.fillRect(0, 0, cw, ch);
} //end draw()
function start() {
requestId = window.requestAnimationFrame(draw);
stopped = false;
}
function stopAnim() {
if (requestId) {
window.cancelAnimationFrame(requestId);
}
stopped = true;
}
window.addEventListener("load", start(), false);
c.addEventListener("click", function() {
(stopped == true) ? start(): stopAnim();
}, false);
</script>
</html>