Плавающие точки от @NateSigrist на HTML5 canvas
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<canvas id="c" ></canvas> <script> document.body.clientWidth; // webkit fix: http://qfox.nl/weblog/218 // start of submission // g = window, u = Math, v = u.sqrt, h = u.random, f = document.getElementById("c"), i = f.getContext("2d"), j = 400, k = 300, w = [], C = (new Date).getTime(); f.width = j; f.height = k; i.fillStyle = "rgb(122,0,25)"; for (n = 0; n < 700; n++) { f = -0.075 + 2 * h() * 0.075; g = v(0.005625 - f * f); w[n] = { a: 1 + h() * 10, d: h() * j, e: h() * k, b: f, c: -g + 2 * h() * g } } window.setInterval(function () { x = (new Date).getTime() - C; C += x; i.clearRect(0, 0, j, k); for (n = 0; n < 50; n++) { y = x; a = w[n]; a.d += a.b * y; a.e += a.c * y; if (a.d < a.a || a.d > j - a.a) { a.b = -a.b; a.d = a.d < a.a ? a.a : j - a.a } if (a.e < a.a || a.e > k - a.a) { a.c = -a.c; a.e = a.e < a.a ? a.a : k - a.a } for (m = n + 1; m < 50; m++) { b = w[m]; D = a.a + b.a; p = b.d - a.d; q = b.e - a.e; E = p * p + q * q; r = v(E); if (r < D) { c = p / r; d = q / r; l = a.b * c + a.c * d; z = a.c * c - a.b * d; s = b.b * c + b.c * d; A = b.c * c - b.b * d; e = b.a / a.a; o = (l + e * s) / (1 + e); t = o - v(o * o - ((1 - e) * l + 2 * e * s) * l / (1 + e)); B = l / e + s - t / e; a.b = t * c - z * d; a.c = z * c + t * d; b.b = B * c - A * d; b.c = A * c + B * d } } i.beginPath(); i.arc(a.d, a.e, a.a, 0, 2 * u.PI, true); i.fill() } }, 33) // end of submission // </script> |
