Система частиц за курсором на 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 80 81 82 83 84 85 86 87 88 89 90 91 |
<div id="container"></div> <script src="/js/sketch.min.js"></script> <script> function Particle(x, y, radius) { this.init(x, y, radius); } Particle.prototype = { init: function(x, y, radius) { this.alive = true; this.radius = radius || 10; this.wander = 0; this.theta = random(TWO_PI); this.drag = 0.0; this.color = '#fff'; this.x = x || 0.0; this.y = y || 0.0; this.vx = 0.0; this.vy = 0.0; }, move: function() { this.x += this.vx; this.y += this.vy; this.vx *= this.drag; this.vy *= this.drag; this.theta += random(-0.5, 0.1) * this.wander; this.vx += sin(this.theta) * 0.1; this.vy += cos(this.theta) * 0.1; this.radius *= 0.96; this.alive = this.radius > 0.8; }, draw: function(ctx) { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, TWO_PI); ctx.fillStyle = this.color; ctx.fill(); } }; // ---------------------------------------- // Example // ---------------------------------------- var MAX_PARTICLES = 150; var COLOURS = ['#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900', '#FF4E50', '#F9D423']; var particles = []; var pool = []; var demo = Sketch.create({ container: document.getElementById('container') }); demo.setup = function() { // Set off some initial particles. var i, x, y; for (i = 0; i < 20; i++) { x = (demo.width * 0.5) + random(-100, 100); y = (demo.height * 0.5) + random(-100, 100); demo.spawn(x, y); } }; demo.spawn = function(x, y) { if (particles.length >= MAX_PARTICLES) pool.push(particles.shift()); particle = pool.length ? pool.pop() : new Particle(); particle.init(x, y, random(5, 20)); particle.wander = random(0.5, 2.0); particle.color = random(COLOURS); particle.drag = random(0.5, 0.96); theta = random(TWO_PI); force = random(2, 8); particle.vx = sin(theta) * force; particle.vy = cos(theta) * force; particles.push(particle); } demo.update = function() { var i, particle; for (i = particles.length - 1; i >= 0; i--) { particle = particles[i]; if (particle.alive) particle.move(); else pool.push(particles.splice(i, 1)[0]); } }; demo.draw = function() { demo.globalCompositeOperation = 'lighter'; for (var i = particles.length - 1; i >= 0; i--) { particles[i].draw(demo); } }; demo.mousemove = function() { var particle, theta, force, touch, max, i, j, n; for (i = 0, n = demo.touches.length; i < n; i++) { touch = demo.touches[i], max = random(1, 4); for (j = 0; j < max; j++) demo.spawn(touch.x, touch.y); } }; </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
