Difference between revisions of "Template:Cologne-Duesseldorf/particles"
| Line 1: | Line 1: | ||
| + | <html> | ||
| + | <body> | ||
document.onload = function() { | document.onload = function() { | ||
var particlesQuantity = 100, | var particlesQuantity = 100, | ||
| Line 100: | Line 102: | ||
} | } | ||
}(); | }(); | ||
| + | </body> | ||
| + | </html> | ||
Revision as of 01:53, 1 November 2017
document.onload = function() { var particlesQuantity = 100, velocity = 0.3, maxRadius = 20; var canvas = document.getElementById("particlecanvas"), context, particles = []; if (canvas && canvas.getContext) { context = canvas.getContext("2d"); for (var i = 0; i < particlesQuantity; i++) { var alpha = Math.random(); particles.push({ x: Math.round(Math.random() * window.innerWidth), y: Math.round(Math.random() * window.innerHeight), velx: Math.random() * velocity * 2 - velocity, vely: Math.random() * velocity * 2 - velocity, radius: (1 - alpha) * maxRadius, color: "rgba(" + [20, 147, 117, alpha].join(",") + ")" }); } initialize(); } function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } function render() { context.clearRect(0, 0, window.innerWidth, window.innerHeight); var particle, len = particles.length; for (var i = 0; i < len; i++) { particle = particles[i]; if (particle.x < 0) { particle.velx = velocity + Math.random(); } else if (particle.x > window.innerWidth) { particle.velx = -velocity - Math.random(); } if (particle.y < 0) { particle.vely = velocity + Math.random(); } else if (particle.y > window.innerHeight) { particle.vely = -velocity - Math.random(); } particle.x += particle.velx; particle.y += particle.vely; context.fillStyle = particle.color; context.beginPath(); context.arc( particle.x, particle.y, particle.radius, 0, Math.PI * 2, true ); context.closePath(); context.fill(); } context.save(); context.restore(); } function distanceBetween(a, b) { var dx = Math.pow(a.x - b.x, 2), dy = Math.pow(a.y - b.y, 2); return Math.sqrt(dx + dy); } function initialize() { window.addEventListener("resize", resizeCanvas, false); window.requestAnimFrame = (function() { return ( window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); } ); })(); (function animloop() { requestAnimFrame(animloop); render(); })(); resizeCanvas(); } }();
