]>
Commit | Line | Data |
---|---|---|
21b1c71d RBR |
1 | (function () { |
2 | ||
3c30503b | 3 | var K = document.querySelector('canvas'), |
94949070 | 4 | { random: R, PI, cos: C, sin: S, floor, atan2: A } = Math, |
cbf5b3fc | 5 | x = K.getContext('2d'), |
94949070 RBR |
6 | f = 24, |
7 | l = 0, | |
ae9ee3d8 | 8 | spd = 1, |
a1bf86e5 RBR |
9 | siz = 5 + r(10), |
10 | clr = R() > 0.5, | |
11 | ccl = R() > 0.5, | |
0d1072c6 | 12 | I = Array(r(10) + 6).fill().map(() => ({ |
a1bf86e5 RBR |
13 | x: r(64), |
14 | y: r(64), | |
15 | a: R() * 2 * PI, | |
16 | c: Array(3).fill(r(256)) | |
83c0fa69 | 17 | })), |
0d1072c6 RBR |
18 | S = [sqr, crc, hrt, chs, lch], |
19 | P = [id, spn(5), spn(15)], | |
20 | draw = S[r(S.length)], | |
98bec09c | 21 | pos = P[r(P.length)] |
00bc4991 RBR |
22 | |
23 | function r(x) { | |
98bec09c | 24 | return floor(R() * x) |
00bc4991 RBR |
25 | } |
26 | ||
27 | function sqr(i) { | |
28 | ||
98bec09c RBR |
29 | var p = pos(i) |
30 | x.fillRect(p.x, p.y, siz, siz) | |
00bc4991 RBR |
31 | } |
32 | ||
33 | function crc(i) { | |
34 | ||
98bec09c RBR |
35 | var p = pos(i) |
36 | x.beginPath() | |
37 | x.arc(p.x, p.y, siz / 2, 0, 2 * PI) | |
38 | x.fill() | |
00bc4991 RBR |
39 | } |
40 | ||
41 | function chs(i) { | |
42 | ||
98bec09c RBR |
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() | |
00bc4991 RBR |
49 | } |
50 | ||
51 | function lch(i) { | |
52 | ||
98bec09c RBR |
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() | |
00bc4991 RBR |
60 | } |
61 | ||
62 | function hrt(i) { | |
63 | ||
98bec09c RBR |
64 | var p = pos(i) |
65 | x.fillRect(p.x, p.y, siz, siz) | |
00bc4991 | 66 | |
98bec09c RBR |
67 | x.beginPath() |
68 | x.arc(p.x + siz / 2, p.y, siz / 2, 0, 2 * PI, false) | |
69 | x.fill() | |
70 | x.closePath() | |
00bc4991 | 71 | |
98bec09c RBR |
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() | |
00bc4991 RBR |
76 | } |
77 | ||
78 | function id(p) { | |
79 | ||
98bec09c | 80 | return p |
00bc4991 RBR |
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 | ||
98bec09c RBR |
92 | i.x = i.x + spd * C(i.a) |
93 | i.y = i.y + spd * S(i.a) | |
00bc4991 | 94 | |
98bec09c RBR |
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))) | |
00bc4991 RBR |
97 | } |
98 | ||
99 | function ucl(i) { | |
98bec09c | 100 | i.c = i.c.map(c => (c + 5) % 256) |
00bc4991 RBR |
101 | } |
102 | ||
103 | function frm(t) { | |
104 | ||
98bec09c | 105 | window.requestAnimationFrame(frm) |
00bc4991 | 106 | |
98bec09c | 107 | var dt = t - l |
00bc4991 RBR |
108 | |
109 | if (dt > 1000 / f) { | |
98bec09c | 110 | clr && x.clearRect(0, 0, 64, 64) |
00bc4991 | 111 | for (var i of I) { |
98bec09c RBR |
112 | x.fillStyle = `rgb(${i.c.join(',')})` |
113 | draw(i) | |
114 | ccl && ucl(i) | |
115 | mov(i) | |
00bc4991 RBR |
116 | } |
117 | ||
98bec09c | 118 | l = t |
00bc4991 RBR |
119 | } |
120 | } | |
21b1c71d | 121 | |
98bec09c | 122 | frm() |
21b1c71d | 123 | } |
98bec09c | 124 | )() |