Difference between revisions of "Team:Cologne-Duesseldorf/Test2"
| Line 3: | Line 3: | ||
<html> | <html> | ||
<body> | <body> | ||
| + | <canvas id="canvas">This browser doesn't support canvas</canvas> | ||
<article> | <article> | ||
<div id="ToC"></div> | <div id="ToC"></div> | ||
| Line 8: | Line 9: | ||
</article> | </article> | ||
</body> | </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> | </html> | ||
{{Template:Cologne-Duesseldorf/footer}} | {{Template:Cologne-Duesseldorf/footer}} | ||
{{Template:Cologne-Duesseldorf/js}} | {{Template:Cologne-Duesseldorf/js}} | ||
Revision as of 16:26, 31 October 2017
