Эффект калейдоскопа на HTML5 Canvas
|
1 2 3 4 |
#can { width: 500px; height: 500px; } |
|
1 |
<canvas id="can"></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 79 80 81 82 83 84 85 86 87 88 89 90 91 |
<script> var canvas, ctx, mtime, costank, zoom, gim; window.onload = function() { var a, b; canvas = document.getElementById("can"); ctx = canvas.getContext("2d"); canvas.width = 500; canvas.height = 500; ctx.fillRect(0, 0, canvas.width, canvas.height); gim = ctx.getImageData(0, 0, canvas.width, canvas.height); costank = new Float32Array(10000); for (a = 0; a < 10000; a++) { b = a / 10000; b = 1 - b; b = 0.5 - Math.cos(b * Math.PI) / 2; costank[a] = b; } jur(); }; function jur() { var a, b, c, x, y, xx, yy, x2, y2, xy2, z, tx, ty, tim, max, col, hm, step, rx, ry, iti, kai, hige, imd; tim = new Date().getTime() / 150; b = Math.sin(tim / 11) + Math.sin(tim / 19); c = Math.cos(tim / 7) + Math.sin(tim / 23); tx = Math.cos(tim / 13) * b * 0.4; ty = Math.sin(tim / 13) * c * 0.4; zoom = 200 + Math.sin(tim / 17) * 100; hm = 0.05 + Math.sin(tim / 47) * 0.03; max = 9; rx = tx; ry = ty; imd = gim.data; step = 1 / zoom; tx = -step * (canvas.width / 2); ty = -step * (canvas.height / 2); iti = 0; xx = tx; col = []; c = 0; for (a = 0; a < 5; a++) { col[a] = []; for (b = 0; b < 8; b++) { col[a][b] = 400 + Math.sin(tim / 53 * (a + 1) * (b + 1)) * 380; } } for (a = 0; a < canvas.height; a++) { tx = xx; for (b = 0; b < canvas.width; b++) { x = tx; y = ty; x2 = x * x; y2 = y * y; xy2 = x * y * 2; for (kai = 0; kai < max; kai++) { x = x2 - y2 + rx; y = xy2 + ry; x = Math.abs(x); y = Math.abs(y); z = 1 / (x * x + y * y + 0.05); x *= z; y *= z; x2 = x * x; y2 = y * y; xy2 = x * y * 2; if (kai >= 4) { hige = Math.abs(x2 - y2); if (hige < hm) break; } } if (kai != max) { c = kai - 4; hige = costank[(hige / hm * costank.length) | 0]; col1 = (col[c][0] * hige) | 0; col2 = (col[c][1] * hige) | 0; col3 = (col[c][2] * hige) | 0; } else { col1 = col2 = col3 = 0; } imd[iti] = col1 > 255 ? 255 : col1; imd[iti + 1] = col2 > 255 ? 255 : col2; imd[iti + 2] = col3 > 255 ? 255 : col3; iti += 4; tx += step; } ty += step; } ctx.putImageData(gim, 0, 0); requestAnimationFrame(jur); } </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
