Эффект неоновых волн от @unconed на 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 69 70 71 72 73 74 75 76 77 78 |
<canvas id="c" width="955" height="459"></canvas> <script> document.body.clientWidth; // webkit fix: http://qfox.nl/weblog/218 // start of submission // f = Math; e = document.body.children[$ = 0]; G = "globalCompositeOperation"; Q = .43; P = .05; with(e) { with(style) width = (w = innerWidth - 9) + "px", height = (h = innerHeight - 25) + "px"; W = (width = w /= 2) / 2; H = (height = h /= 2) / 2; g = getContext("2d"); t = w / h } with(g) { scale(W / t, H); translate(t, 1); setInterval(function () { with(E = e.cloneNode(0)) width = height = H, c = getContext("2d"); c.fillRect(0, 0, h, h); g[G] = c[G] = "lighter"; C = f.cos; S = f.sin; L = f.atan2; q = C($); r = S(q - $ * .7) + Q; u = C(r - $ * Q) + Q; a = L(q, -u * 2); b = L(r, u * u + q * q); n = C(a); o = S(a); N = C(b); O = S(b); $ += P; clearRect(-t, -1, 2 * t, 2); for (i = 14; i > 4; --i) { v = 0; for (j = 25; j;) { M = f.log(j + .2) * Q; j--; _ = $ - j * .07 - i * 4; A = C(_ + S(_ * .8)) * 2 + _ * P; B = S(_ * .7 - C(_ * Q)) * 3; x = C(A) * C(B) * M - q; y = S(A) * C(B) * M - r; z = S(B) * M - u; k = x * n + z * o; _ = z * n - x * o; l = y * N + _ * O; z = _ * N - y * O; lineTo(k /= z, l /= z); lineWidth = P / z; strokeStyle = "hsl(" + 60 * S($ - z) + ",60%," + ~~ (40 - j) * (Q + !j + (.1 > ($ - j * P) % 1)) + "%)"; if (z > .1) v++ && stroke(); else { v = 0 } beginPath(); moveTo(k, l) } } A = "drawImage"; N = H / 2; c.globalAlpha = Q; c[A](e, 0, 0, H, H); X = k * N + N; Y = l * N + N; K = 1.1; c.translate(X, Y); while (i--) c.scale(K, K), c[A](E, -X, -Y, H, H); g[A](E, -t, -1, 2 * t, 2) }, 33) } // end of submission </script> |
