Система частиц - искр на 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 |
<canvas id="swarm"></canvas> <script src='/js/codepen-utilities.min.js'></script> <script src='/js/Stats.js'></script> <script src='/js/dat.gui.min.js'></script> <script src='/js/start.js'></script> <script> window.addEventListener('load', function () { var rctx = new SmallPRNG(+new Date()), p = new Perlin(), canvas = document.getElementById('swarm'), context = canvas.getContext('2d'), monitor = new MouseMonitor(canvas), gui = new dat.GUI(), hue = 0, particles = [], resize, width, height, bounds = new Vector3D(0, 0, 0), settings = { particleNum: 5000, fadeOverlay: true, rotateColor: true, staticColor: { r: 0, g: 75, b: 50 }, staticColorString: 'rgba(0, 75, 50, 0.55)' }; var f1 = gui.addFolder('Particles'), f2 = gui.addFolder('Colors'); f1.add(settings, 'particleNum', 1000, 15000).step(10).name('Particles').onChange(function () { if (settings.particleNum < particles.length) { var toDelete = particles.length - settings.particleNum; particles.splice(particles.length - toDelete, toDelete); } else { for (var i = particles.length; i < settings.particleNum; i += 1) { if (window.CP.shouldStopExecution(1)) { break; } particles.push(new Particle(p, bounds, rctx, monitor)); } window.CP.exitedLoop(1); } }); f2.add(settings, 'fadeOverlay').name('Fade Clear').onChange(function () { if (settings.fadeOverlay) { resize(); } }); f2.add(settings, 'rotateColor').name('Rotate Color'); f2.addColor(settings, 'staticColor').name('Static Color').onChange(function () { settings.staticColorString = 'rgba(' + Math.floor(settings.staticColor.r) + ', ' + Math.floor(settings.staticColor.g) + ', ' + Math.floor(settings.staticColor.b) + ', ' + 0.55 + ')'; }); f1.open(); f2.open(); gui.close(); p.init(function () { return rctx.random(0, 255); }); resize = function () { canvas.width = width = bounds.x = window.innerWidth; canvas.height = height = bounds.y = window.innerHeight; context.fillStyle = '#ffffff'; context.fillRect(0, 0, width, height); }; resize(); window.addEventListener('resize', resize); for (var i = 0; i < settings.particleNum; i += 1) { if (window.CP.shouldStopExecution(2)) { break; } particles.push(new Particle(p, bounds, rctx, monitor)); } window.CP.exitedLoop(2); +function render() { requestAnimFrame(render); context.beginPath(); for (var i = 0; i < particles.length; i += 1) { particles[i].step(), particles[i].render(context); } context.globalCompositeOperation = 'source-over'; if (settings.fadeOverlay) { context.fillStyle = 'rgba(0, 0, 0, .085)'; } else { context.fillStyle = 'rgba(0, 0, 0, 1)'; } context.fillRect(0, 0, width, height); context.globalCompositeOperation = 'lighter'; if (settings.rotateColor) { context.strokeStyle = 'hsla(' + hue + ', 75%, 50%, .55)'; } else { context.strokeStyle = settings.staticColorString; } context.stroke(); context.closePath(); hue = (hue + 0.5) % 360; }(); }); </script> |
|
1 2 3 4 |
#swarm { display: block; cursor: crosshair; } |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
