]> git.r.bdr.sh - rbdr/r.bdr.sh/blame - jekyll/js/animation.js
Update docker
[rbdr/r.bdr.sh] / jekyll / js / animation.js
CommitLineData
21b1c71d
RBR
1(function () {
2
3b6787e4
RBR
3 var canvas = document.querySelector('canvas'),
4 context = canvas.getContext('2d'),
5 fps = 30,
6 lastFrame = 0,
7 speed = 1,
8 size = 5 + rand(10);
21b1c71d
RBR
9
10 var clear = !!(Math.random() > 0.5);
11 var changeColor = !!(Math.random() > 0.5);
3b6787e4
RBR
12 var items = Array(rand(10) + 6).fill(null).map(() => ({
13 x: rand(100),
14 y: rand(100),
21b1c71d 15 angle: Math.random() * 2 * Math.PI,
3b6787e4 16 color: Array(3).fill(null).map(() => rand(256))
21b1c71d
RBR
17 }));
18 var shapes = [square, circle, heart, chaos, lineChaos];
19 var positions = [identity, spin(5), spin(15)];
3b6787e4
RBR
20 var draw = shapes[rand(shapes.length)];
21 var position = positions[rand(positions.length)];
21b1c71d 22
3b6787e4 23 function rand (x) {
21b1c71d
RBR
24 return Math.floor(Math.random() * x);
25 }
26
27 function square(item) {
28
29 var p = position(item);
30 context.fillRect(p.x, p.y, size, size);
31 }
32
33 function circle(item) {
34
35 var p = position(item);
36 context.beginPath();
37 context.arc(p.x, p.y, size / 2, 0, 2 * Math.PI);
38 context.fill();
39 }
40
41 function chaos(item) {
42
43 var p = position(item);
44 context.beginPath();
45 context.moveTo(p.x, p.y);
46 context.lineTo(p.x * 10 * Math.cos(item.angle), p.y * 10 * Math.sin(item.angle));
3b6787e4 47 context.lineTo(rand(100), rand(100));
21b1c71d
RBR
48 context.fill();
49 }
50
51 function lineChaos(item) {
52
53 var p = position(item);
54 context.beginPath();
55 context.lineWidth = 5;
56 context.strokeStyle = `rgb(${item.color.join(',')})`;
57 context.moveTo(p.x, p.y);
58 context.lineTo(p.x * 10 * Math.cos(item.angle), p.y * 10 * Math.sin(item.angle));
59 context.stroke();
60 }
61
62 function square(item) {
63
64 var p = position(item);
65 context.fillRect(p.x, p.y, size, size);
66 }
67
68 function heart(item) {
69
70 var p = position(item);
71 context.fillRect(p.x, p.y, size, size);
72
73 context.beginPath();
74 context.arc(p.x + size / 2, p.y, size / 2, 0, 2 * Math.PI, false);
75 context.fill();
76 context.closePath();
77
78 context.beginPath();
79 context.arc(p.x + size, p.y + size / 2, size / 2, 0, 2 * Math.PI, false);
80 context.fill();
81 context.closePath();
82 }
83
84 function identity(position) {
85
86 return position;
87 }
88
89 function spin(radius) {
90 return function (position) {
91
92 return {
93 x: position.x + radius * Math.cos(lastFrame),
94 y: position.y + radius * Math.sin(lastFrame)
95 }
96 }
97 }
98
99 function move(item) {
100
101 item.x = item.x + speed * Math.cos(item.angle);
102 item.y = item.y + speed * Math.sin(item.angle);
103
104 if (item.x < 0 || item.x > 100) {
105 item.angle = Math.atan2(Math.sin(item.angle), -Math.cos(item.angle))
106 }
107
108 if (item.y < 0 || item.y > 100) {
109 item.angle = Math.atan2(-Math.sin(item.angle), Math.cos(item.angle))
110 }
111 }
112
113 function updateColor(item) {
114
115 item.color = item.color.map((c) => {
116 c = c + 5;
117 return c > 255 ? 0 : c;
118 })
119 }
120
121 function frame(time) {
122
123 window.requestAnimationFrame(frame);
124
125 var delta = time - lastFrame;
126
127 if (delta > 1000 / fps) {
128 clear && context.clearRect(0, 0, 100, 100);
129 for (var item of items) {
130 context.fillStyle = `rgb(${item.color.join(',')})`;
131 draw(item);
132 changeColor && updateColor(item);
133 move(item);
134 }
135
136 lastFrame = time;
137 }
138 }
139
140 frame();
141}
142)();