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