|
|
| (47 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| − | {{Template:Cologne-Duesseldorf/css}}
| |
| − | {{Template:Cologne-Duesseldorf/header}}
| |
| − | <html>
| |
| − | <body>
| |
| − | <article>
| |
| − | <canvas id="canvas">This browser doesn't support canvas</canvas>
| |
| − | </article>
| |
| | | | |
| − | </body>
| |
| − | <script>
| |
| − | (function() {
| |
| − | var particlesQuantity = 100,
| |
| − | velocity = 0.3,
| |
| − | maxRadius = 20;
| |
| − |
| |
| − | var canvas = document.getElementById("canvas"),
| |
| − | 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();
| |
| − | }
| |
| − | })();
| |
| − | </script>
| |
| − | </html>
| |
| − | {{Template:Cologne-Duesseldorf/footer}}
| |
| − | {{Template:Cologne-Duesseldorf/js}}
| |
