|
0 |
var twopi = Math.PI * 2;
|
|
1 |
var degrees = twopi / 360;
|
|
2 |
var fib = [1,1,2,3,5,8,13,21,34,55,89,144,233,377,610,987,1597,2584,4181,6765,10946];
|
|
3 |
|
|
4 |
var triangle = function(low, high, span, v) {
|
|
5 |
var k = v / span;
|
|
6 |
var phase = Math.floor(k);
|
|
7 |
var residue = k - phase;
|
|
8 |
if (phase % 2 === 0) {
|
|
9 |
return low + (residue * (high - low));
|
|
10 |
} else {
|
|
11 |
return high - (residue * (high - low));
|
|
12 |
}
|
|
13 |
};
|
|
14 |
|
|
15 |
FibonacciSpiral = function() {
|
|
16 |
var info = undefined;
|
|
17 |
var ctx = undefined;
|
|
18 |
var canvas = undefined;
|
|
19 |
var factor = 10; // 0;
|
|
20 |
var rate = 0; // 0.001
|
|
21 |
var counter = 0;
|
|
22 |
|
|
23 |
this.init = function(c) {
|
|
24 |
canvas = c;
|
|
25 |
ctx = canvas.getContext("2d");
|
|
26 |
info = document.getElementById('info');
|
|
27 |
var $this = this;
|
|
28 |
|
|
29 |
var animFrame = function(time) {
|
|
30 |
$this.draw();
|
|
31 |
requestAnimationFrame(animFrame);
|
|
32 |
};
|
|
33 |
|
|
34 |
requestAnimationFrame(animFrame);
|
|
35 |
};
|
|
36 |
|
|
37 |
this.draw = function() {
|
|
38 |
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
39 |
|
|
40 |
var sign = -1;
|
|
41 |
var x = canvas.width / 2;
|
|
42 |
var y = canvas.height / 2;
|
|
43 |
//var alpha = (Math.sin(counter / 10) + 1) * 0.05;
|
|
44 |
//alpha = Math.floor(alpha * 1000) / 1000;
|
|
45 |
var alpha = 0.05;
|
|
46 |
var colours = [
|
|
47 |
'255,0,0',
|
|
48 |
'0,255,0',
|
|
49 |
'0,0,255'
|
|
50 |
];
|
|
51 |
var linecolours = [
|
|
52 |
'#000000',
|
|
53 |
'#800000',
|
|
54 |
'#707070'
|
|
55 |
];
|
|
56 |
|
|
57 |
ctx.save();
|
|
58 |
ctx.translate(x, y + 1);
|
|
59 |
ctx.scale(factor, factor);
|
|
60 |
ctx.translate(-x, -y - 1);
|
|
61 |
ctx.lineWidth = 2 / factor;
|
|
62 |
for (var i = 0; i < 20; i++) {
|
|
63 |
var f = fib[i];
|
|
64 |
|
|
65 |
ctx.beginPath();
|
|
66 |
var a1; var a2;
|
|
67 |
if (sign > 0) {
|
|
68 |
a1 = Math.PI * 0.5;
|
|
69 |
a2 = Math.PI * 1.5;
|
|
70 |
ctx.fillStyle = "rgba(" + colours[i % colours.length] + "," + alpha + ")";
|
|
71 |
} else {
|
|
72 |
a1 = Math.PI * 1.5;
|
|
73 |
a2 = Math.PI * 2.5;
|
|
74 |
ctx.fillStyle = "rgba(" + colours[i % colours.length] + "," + alpha + ")";
|
|
75 |
}
|
|
76 |
ctx.strokeStyle = linecolours[i % linecolours.length];
|
|
77 |
var radius = f; // * factor;
|
|
78 |
y -= sign * radius; // remove for different effect
|
|
79 |
ctx.arc(x, y, Math.abs(radius), a1, a2, false);
|
|
80 |
ctx.fill();
|
|
81 |
ctx.stroke();
|
|
82 |
|
|
83 |
sign *= -1;
|
|
84 |
y += sign * radius;
|
|
85 |
}
|
|
86 |
ctx.restore();
|
|
87 |
|
|
88 |
factor -= 0.01; // rate;
|
|
89 |
//rate += 0.0001;
|
|
90 |
|
|
91 |
info.innerHTML = "Factor: " + factor + ", alpha=" + alpha;
|
|
92 |
|
|
93 |
//factor = triangle(1, 10, 100, counter);
|
|
94 |
factor = 20 * (Math.cos(counter / 100) + 1.001);
|
|
95 |
counter += 0.3;
|
|
96 |
//counter += factor < 2 ? 0.3 : 1;
|
|
97 |
};
|
|
98 |
};
|