|
|
| Line 16: |
Line 16: |
| | | | |
| | <canvas id="particlecanvas">This browser doesn't support canvas</canvas> | | <canvas id="particlecanvas">This browser doesn't support canvas</canvas> |
| − | <script> | + | <script src="https://2017.igem.org/Template:Cologne-Duesseldorf/particles?action=raw&ctype=text/javascript"> |
| − | | + | |
| − | (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();
| + | |
| − | }
| + | |
| − | })();
| + | |
| − | | + | |
| − | | + | |
| − | </script>
| + | |
| − | | + | |
| | </body> | | </body> |
| | </html> | | </html> |
