Частицы, летающие за курсором от @hakimel на 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 79 |
<canvas id="c" width="100%" height="100%"></canvas> <script> document.body.clientWidth; // webkit fix: http://qfox.nl/weblog/218 // start of submission // md = 0; m = Math; mr = m.round; g = m.random; d = document; dl = "addEventListener"; w = window; c = d.getElementById("c"); t = c.getContext("2d"); r(); x = c.width * 0.5; y = c.height * 0.5; d[dl]("mousemove", function (a) { x = a.clientX; y = a.clientY }, 0); d[dl]("mousedown", function () { md = 1 }, 0); d[dl]("mouseup", function () { md = 0 }, 0); w.addEventListener("resize", r, 0); l = []; i = 0; while (++i < 25) { p = { x: x, y: y, d: x, k: y, s: 2 + g(), a: 0, b: 0.01 + g() * 0.04, f: "#" + (g() * 4210752 + 11184810 | 0).toString(16), o: 55 + (55 * g()) }; l.push(p) } setInterval(function () { t.fillStyle = "rgba(255,255,255,0.3)"; t.fillRect(0, 0, c.width, c.height); i = 0; while (p = l[++i]) { lp = { x: p.x, y: p.y }; p.a += p.b; p.d += (x - p.d) * p.b; p.k += (y - p.k) * p.b; p.x = p.d + m.cos(i + p.a) * p.o; p.y = p.k + m.sin(i + p.a) * p.o; p.x = m.max(m.min(p.x, c.width), 0); p.y = m.max(m.min(p.y, c.height), 0); with(t) { beginPath(); fillStyle = p.f; strokeStyle = p.f; lineWidth = p.s; moveTo(lp.x, lp.y); lineTo(p.x, p.y); stroke(); arc(p.x, p.y, p.s / 2, 0, m.PI * 2, 1 > 0); fill() } } }, 17); function r() { c.width = w.innerWidth - 25; c.height = w.innerHeight - 25 }; // end of submission // </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
Добавлено дополнительное ДЕМО на Codepen.io