]>
Commit | Line | Data |
---|---|---|
1 | (function () { | |
2 | ||
3 | var canvas = document.querySelector('canvas'), | |
4 | r = Math.random, | |
5 | pi = Math.PI, | |
6 | cos = Math.cos, | |
7 | sin = Math.sin, | |
8 | ctx = canvas.getContext('2d'), | |
9 | fps = 24, | |
10 | lst = 0, | |
11 | spd = 1, | |
12 | siz = 5 + rnd(10), | |
13 | clr = !!(r() > 0.5), | |
14 | ccl = !!(r() > 0.5), | |
15 | I = Array(rnd(10) + 6).fill(null).map(() => ({ | |
16 | x: rnd(64), | |
17 | y: rnd(64), | |
18 | a: r() * 2 * pi, | |
19 | c: Array(3).fill(rnd(256)) | |
20 | })), | |
21 | SHP = [sqr, crc, hrt, chs, lch], | |
22 | POS = [id, spn(5), spn(15)], | |
23 | draw = SHP[rnd(SHP.length)], | |
24 | pos = POS[rnd(POS.length)]; | |
25 | ||
26 | function rnd (x) { | |
27 | return Math.floor(r() * x); | |
28 | } | |
29 | ||
30 | function sqr(i) { | |
31 | ||
32 | var p = pos(i); | |
33 | ctx.fillRect(p.x, p.y, siz, siz); | |
34 | } | |
35 | ||
36 | function crc(i) { | |
37 | ||
38 | var p = pos(i); | |
39 | ctx.beginPath(); | |
40 | ctx.arc(p.x, p.y, siz / 2, 0, 2 * pi); | |
41 | ctx.fill(); | |
42 | } | |
43 | ||
44 | function chs(i) { | |
45 | ||
46 | var p = pos(i); | |
47 | ctx.beginPath(); | |
48 | ctx.moveTo(p.x, p.y); | |
49 | ctx.lineTo(p.x * 10 * cos(i.a), p.y * 10 * sin(i.a)); | |
50 | ctx.lineTo(rnd(64), rnd(64)); | |
51 | ctx.fill(); | |
52 | } | |
53 | ||
54 | function lch(i) { | |
55 | ||
56 | var p = pos(i); | |
57 | ctx.beginPath(); | |
58 | ctx.lineWidth = 5; | |
59 | ctx.strokeStyle = `rgb(${i.c.join(',')})`; | |
60 | ctx.moveTo(p.x, p.y); | |
61 | ctx.lineTo(p.x * 10 * cos(i.a), p.y * 10 * sin(i.a)); | |
62 | ctx.stroke(); | |
63 | } | |
64 | ||
65 | function hrt(i) { | |
66 | ||
67 | var p = pos(i); | |
68 | ctx.fillRect(p.x, p.y, siz, siz); | |
69 | ||
70 | ctx.beginPath(); | |
71 | ctx.arc(p.x + siz / 2, p.y, siz / 2, 0, 2 * pi, false); | |
72 | ctx.fill(); | |
73 | ctx.closePath(); | |
74 | ||
75 | ctx.beginPath(); | |
76 | ctx.arc(p.x + siz, p.y + siz / 2, siz / 2, 0, 2 * pi, false); | |
77 | ctx.fill(); | |
78 | ctx.closePath(); | |
79 | } | |
80 | ||
81 | function id(p) { | |
82 | ||
83 | return p; | |
84 | } | |
85 | ||
86 | function spn(rad) { | |
87 | return function (p) { | |
88 | ||
89 | return { | |
90 | x: p.x + rad * cos(lst), | |
91 | y: p.y + rad * sin(lst) | |
92 | } | |
93 | } | |
94 | } | |
95 | ||
96 | function mov(i) { | |
97 | ||
98 | i.x = i.x + spd * cos(i.a); | |
99 | i.y = i.y + spd * sin(i.a); | |
100 | ||
101 | if (i.x < 0 || i.x > 64) { | |
102 | i.a = Math.atan2(sin(i.a), -cos(i.a)) | |
103 | } | |
104 | ||
105 | if (i.y < 0 || i.y > 64) { | |
106 | i.a = Math.atan2(-sin(i.a), cos(i.a)) | |
107 | } | |
108 | } | |
109 | ||
110 | function ucl(i) { | |
111 | ||
112 | i.c = i.c.map((c) => { | |
113 | c = c + 5; | |
114 | return c > 255 ? 0 : c; | |
115 | }) | |
116 | } | |
117 | ||
118 | function frm(t) { | |
119 | ||
120 | window.requestAnimationFrame(frm); | |
121 | ||
122 | var dt = t - lst; | |
123 | ||
124 | if (dt > 1000 / fps) { | |
125 | clr && ctx.clearRect(0, 0, 64, 64); | |
126 | for (var i of I) { | |
127 | ctx.fillStyle = `rgb(${i.c.join(',')})`; | |
128 | draw(i); | |
129 | ccl && ucl(i); | |
130 | mov(i); | |
131 | } | |
132 | ||
133 | lst = t; | |
134 | } | |
135 | } | |
136 | ||
137 | frm(); | |
138 | } | |
139 | )(); |