Пузырьки от курсора на HTML5 Canvas
|
1 2 3 4 5 6 7 |
div#container { width: 100%; height: 100%; overflow: hidden; background-image: -webkit-linear-gradient(270deg, #419DEF 0%, #1C6599 100%); background-image: linear-gradient(-180deg, #419DEF 0%, #1C6599 100%); } |
|
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 92 93 94 95 |
<div id="container"></div> <script> // ---------------------------------------- // https://github.com/soulwire/sketch.js // ---------------------------------------- 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.15; this.theta = random(TWO_PI); this.drag = 0.1; this.color = "rgba(255,255,255,0.8)"; 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.5) * 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.5; }, 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 = 280; 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 < 100; 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, 40)); particle.wander = random(0.5, 2.0); particle.color = "rgba(255,255,255," + random(0.05, 0.5) + ")"; particle.drag = random(0.9, 0.99); theta = random(TWO_PI); force = random(2, 8); particle.vx = sin(theta) * force; particle.vy = -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> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
