]>
Commit | Line | Data |
---|---|---|
21b1c71d RBR |
1 | (function () { |
2 | ||
3b6787e4 | 3 | var canvas = document.querySelector('canvas'), |
ce04a48f RBR |
4 | r = Math.random, |
5 | pi = Math.PI, | |
6 | cos = Math.cos, | |
7 | sin = Math.sin, | |
ae9ee3d8 | 8 | ctx = canvas.getContext('2d'), |
7eae2449 | 9 | fps = 24, |
ae9ee3d8 RBR |
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(() => ({ | |
9b9f84dd RBR |
16 | x: rnd(64), |
17 | y: rnd(64), | |
ae9ee3d8 RBR |
18 | a: r() * 2 * pi, |
19 | c: Array(3).fill(rnd(256)) | |
83c0fa69 | 20 | })), |
ae9ee3d8 RBR |
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)]; | |
21b1c71d | 25 | |
9b9f84dd | 26 | function rnd (x) { |
8f2ed424 | 27 | return Math.floor(r() * x); |
21b1c71d RBR |
28 | } |
29 | ||
9b9f84dd | 30 | function sqr(i) { |
21b1c71d | 31 | |
9b9f84dd | 32 | var p = pos(i); |
ae9ee3d8 | 33 | ctx.fillRect(p.x, p.y, siz, siz); |
21b1c71d RBR |
34 | } |
35 | ||
9b9f84dd | 36 | function crc(i) { |
21b1c71d | 37 | |
9b9f84dd | 38 | var p = pos(i); |
ae9ee3d8 RBR |
39 | ctx.beginPath(); |
40 | ctx.arc(p.x, p.y, siz / 2, 0, 2 * pi); | |
41 | ctx.fill(); | |
21b1c71d RBR |
42 | } |
43 | ||
9b9f84dd | 44 | function chs(i) { |
21b1c71d | 45 | |
9b9f84dd | 46 | var p = pos(i); |
ae9ee3d8 RBR |
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(); | |
21b1c71d RBR |
52 | } |
53 | ||
9b9f84dd | 54 | function lch(i) { |
21b1c71d | 55 | |
9b9f84dd | 56 | var p = pos(i); |
ae9ee3d8 RBR |
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(); | |
21b1c71d RBR |
63 | } |
64 | ||
9b9f84dd | 65 | function hrt(i) { |
21b1c71d | 66 | |
9b9f84dd | 67 | var p = pos(i); |
ae9ee3d8 | 68 | ctx.fillRect(p.x, p.y, siz, siz); |
21b1c71d | 69 | |
ae9ee3d8 RBR |
70 | ctx.beginPath(); |
71 | ctx.arc(p.x + siz / 2, p.y, siz / 2, 0, 2 * pi, false); | |
72 | ctx.fill(); | |
73 | ctx.closePath(); | |
21b1c71d | 74 | |
ae9ee3d8 RBR |
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(); | |
21b1c71d RBR |
79 | } |
80 | ||
9b9f84dd | 81 | function id(p) { |
21b1c71d | 82 | |
9b9f84dd | 83 | return p; |
21b1c71d RBR |
84 | } |
85 | ||
9b9f84dd RBR |
86 | function spn(rad) { |
87 | return function (p) { | |
21b1c71d RBR |
88 | |
89 | return { | |
ae9ee3d8 RBR |
90 | x: p.x + rad * cos(lst), |
91 | y: p.y + rad * sin(lst) | |
21b1c71d RBR |
92 | } |
93 | } | |
94 | } | |
95 | ||
9b9f84dd | 96 | function mov(i) { |
21b1c71d | 97 | |
ae9ee3d8 RBR |
98 | i.x = i.x + spd * cos(i.a); |
99 | i.y = i.y + spd * sin(i.a); | |
21b1c71d | 100 | |
9b9f84dd | 101 | if (i.x < 0 || i.x > 64) { |
ae9ee3d8 | 102 | i.a = Math.atan2(sin(i.a), -cos(i.a)) |
21b1c71d RBR |
103 | } |
104 | ||
9b9f84dd | 105 | if (i.y < 0 || i.y > 64) { |
ae9ee3d8 | 106 | i.a = Math.atan2(-sin(i.a), cos(i.a)) |
21b1c71d RBR |
107 | } |
108 | } | |
109 | ||
ae9ee3d8 | 110 | function ucl(i) { |
21b1c71d | 111 | |
ae9ee3d8 | 112 | i.c = i.c.map((c) => { |
21b1c71d RBR |
113 | c = c + 5; |
114 | return c > 255 ? 0 : c; | |
115 | }) | |
116 | } | |
117 | ||
ae9ee3d8 | 118 | function frm(t) { |
21b1c71d | 119 | |
ae9ee3d8 | 120 | window.requestAnimationFrame(frm); |
21b1c71d | 121 | |
ae9ee3d8 | 122 | var dt = t - lst; |
21b1c71d | 123 | |
ae9ee3d8 RBR |
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(',')})`; | |
9b9f84dd | 128 | draw(i); |
ae9ee3d8 | 129 | ccl && ucl(i); |
9b9f84dd | 130 | mov(i); |
21b1c71d RBR |
131 | } |
132 | ||
ae9ee3d8 | 133 | lst = t; |
21b1c71d RBR |
134 | } |
135 | } | |
136 | ||
ae9ee3d8 | 137 | frm(); |
21b1c71d RBR |
138 | } |
139 | )(); |