<!DOCTYPE HTML>
<html>
  <title>MVNU!</title>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      window.requestAnimFrame = (function(callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) {
          window.setTimeout(callback, 1000 / 60);
        };
      })();

      function initBalls() {
        balls = [];

        var blue = '#000099';
        var lightblue = '#3366CC';
        var lightgreen = '#33FF33';
        var green = '#006600';

        // M
        balls.push(new Ball(100, 50, 0, 0, blue));
        balls.push(new Ball(100, 65, 0, 0, blue));
        balls.push(new Ball(100, 80, 0, 0, blue));
        balls.push(new Ball(100, 95, 0, 0, blue));
        balls.push(new Ball(100, 110, 0, 0, blue));
        balls.push(new Ball(100, 125, 0, 0, blue));
        balls.push(new Ball(110, 65, 0, 0, blue));
        balls.push(new Ball(120, 80, 0, 0, blue));
        balls.push(new Ball(130, 95, 0, 0, blue));
        balls.push(new Ball(140, 110, 0, 0, blue));
        balls.push(new Ball(150, 125, 0, 0, blue));
        balls.push(new Ball(160, 110, 0, 0, blue));
        balls.push(new Ball(170, 95, 0, 0, blue));
        balls.push(new Ball(180, 80, 0, 0, blue));
        balls.push(new Ball(190, 65, 0, 0, blue));
        balls.push(new Ball(200, 50, 0, 0, blue));
        balls.push(new Ball(200, 65, 0, 0, blue));
        balls.push(new Ball(200, 80, 0, 0, blue));
        balls.push(new Ball(200, 95, 0, 0, blue));
        balls.push(new Ball(200, 110, 0, 0, blue));
        balls.push(new Ball(200, 125, 0, 0, blue));


        // V
        balls.push(new Ball(250, 50, 0, 0, lightgreen));
        balls.push(new Ball(255, 65, 0, 0, lightgreen));
        balls.push(new Ball(260, 80, 0, 0, lightgreen));
        balls.push(new Ball(265, 95, 0, 0, lightgreen));
        balls.push(new Ball(270, 110, 0, 0, lightgreen));
        balls.push(new Ball(275, 125, 0, 0, lightgreen));
        balls.push(new Ball(280, 110, 0, 0, lightgreen));
        balls.push(new Ball(285, 95, 0, 0, lightgreen));
        balls.push(new Ball(290, 80, 0, 0, lightgreen));
        balls.push(new Ball(295, 65, 0, 0, lightgreen));
        balls.push(new Ball(300, 50, 0, 0, lightgreen));
 
        // N
        balls.push(new Ball(340, 50, 0, 0, lightblue));
        balls.push(new Ball(340, 65, 0, 0, lightblue));
        balls.push(new Ball(340, 80, 0, 0, lightblue));
        balls.push(new Ball(340, 95, 0, 0, lightblue));
        balls.push(new Ball(340, 110, 0, 0, lightblue));
        balls.push(new Ball(340, 125, 0, 0, lightblue));
        balls.push(new Ball(350, 50, 0, 0, lightblue));
        balls.push(new Ball(360, 65, 0, 0, lightblue));
        balls.push(new Ball(370, 80, 0, 0, lightblue));
        balls.push(new Ball(375, 95, 0, 0, lightblue));
        balls.push(new Ball(380, 110, 0, 0, lightblue));
        balls.push(new Ball(395, 125, 0, 0, lightblue));
        balls.push(new Ball(395, 110, 0, 0, lightblue));
        balls.push(new Ball(395, 95, 0, 0, lightblue));
        balls.push(new Ball(395, 80, 0, 0, lightblue));
        balls.push(new Ball(395, 65, 0, 0, lightblue));
        balls.push(new Ball(395, 50, 0, 0, lightblue));

        // U
        balls.push(new Ball(430, 50, 0, 0, green));
        balls.push(new Ball(430, 65, 0, 0, green));
        balls.push(new Ball(430, 80, 0, 0, green));
        balls.push(new Ball(430, 95, 0, 0, green));
        balls.push(new Ball(435, 110, 0, 0, green));
        balls.push(new Ball(445, 122, 0, 0, green));
        balls.push(new Ball(460, 125, 0, 0, green));
        balls.push(new Ball(470, 122, 0, 0, green));
        balls.push(new Ball(475, 120, 0, 0, green));
        balls.push(new Ball(480, 110, 0, 0, green));
        balls.push(new Ball(485, 95, 0, 0, green));
        balls.push(new Ball(485, 80, 0, 0, green));
        balls.push(new Ball(485, 65, 0, 0, green));
        balls.push(new Ball(485, 50, 0, 0, green));
 


        return balls;
      }
      function getMousePos(canvas, evt) {
        // get canvas position
        var obj = canvas;
        var top = 0;
        var left = 0;
        while(obj.tagName != 'BODY') {
          top += obj.offsetTop;
          left += obj.offsetLeft;
          obj = obj.offsetParent;
        }

        // return relative mouse position
        var mouseX = evt.clientX - left + window.pageXOffset;
        var mouseY = evt.clientY - top + window.pageYOffset;
        return {
          x: mouseX,
          y: mouseY
        };
      }
      function updateBalls(canvas, balls, timeDiff, mousePos) {
        var context = canvas.getContext('2d');
        var collisionDamper = 0.3;
        var floorFriction = 0.0005 * timeDiff;
        var mouseForceMultiplier = 1 * timeDiff;
        var restoreForce = 0.002 * timeDiff;

        for(var n = 0; n < balls.length; n++) {
          var ball = balls[n];
          // set ball position based on velocity
          ball.y += ball.vy;
          ball.x += ball.vx;

          // restore forces
          if(ball.x > ball.origX) {
            ball.vx -= restoreForce;
          }
          else {
            ball.vx += restoreForce;
          }
          if(ball.y > ball.origY) {
            ball.vy -= restoreForce;
          }
          else {
            ball.vy += restoreForce;
          }

          // mouse forces
          var mouseX = mousePos.x;
          var mouseY = mousePos.y;

          var distX = ball.x - mouseX;
          var distY = ball.y - mouseY;

          var radius = Math.sqrt(Math.pow(distX, 2) + Math.pow(distY, 2));

          var totalDist = Math.abs(distX) + Math.abs(distY);

          var forceX = (Math.abs(distX) / totalDist) * (1 / radius) * mouseForceMultiplier;
          var forceY = (Math.abs(distY) / totalDist) * (1 / radius) * mouseForceMultiplier;

          if(distX > 0) {// mouse is left of ball
            ball.vx += forceX;
          }
          else {
            ball.vx -= forceX;
          }
          if(distY > 0) {// mouse is on top of ball
            ball.vy += forceY;
          }
          else {
            ball.vy -= forceY;
          }

          // floor friction
          if(ball.vx > 0) {
            ball.vx -= floorFriction;
          }
          else if(ball.vx < 0) {
            ball.vx += floorFriction;
          }
          if(ball.vy > 0) {
            ball.vy -= floorFriction;
          }
          else if(ball.vy < 0) {
            ball.vy += floorFriction;
          }

          // floor condition
          if(ball.y > (canvas.height - ball.radius)) {
            ball.y = canvas.height - ball.radius - 2;
            ball.vy *= -1;
            ball.vy *= (1 - collisionDamper);
          }

          // ceiling condition
          if(ball.y < (ball.radius)) {
            ball.y = ball.radius + 2;
            ball.vy *= -1;
            ball.vy *= (1 - collisionDamper);
          }

          // right wall condition
          if(ball.x > (canvas.width - ball.radius)) {
            ball.x = canvas.width - ball.radius - 2;
            ball.vx *= -1;
            ball.vx *= (1 - collisionDamper);
          }

          // left wall condition
          if(ball.x < (ball.radius)) {
            ball.x = ball.radius + 2;
            ball.vx *= -1;
            ball.vx *= (1 - collisionDamper);
          }
        }
      }
      function Ball(x, y, vx, vy, color) {
        this.x = x;
        this.y = y;
        this.vx = vx;
        this.vy = vy;
        this.color = color;
        this.origX = x;
        this.origY = y;
        this.radius = 10;
      }
      function animate(canvas, balls, lastTime, mousePos) {
        var context = canvas.getContext('2d');

        // update
        var date = new Date();
        var time = date.getTime();
        var timeDiff = time - lastTime;
        updateBalls(canvas, balls, timeDiff, mousePos);
        lastTime = time;

        // clear
        context.clearRect(0, 0, canvas.width, canvas.height);

        // render
        for(var n = 0; n < balls.length; n++) {
          var ball = balls[n];
          context.beginPath();
          context.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI, false);
          context.fillStyle = ball.color;
          context.fill();
        }

        // request new frame
        requestAnimFrame(function() {
          animate(canvas, balls, lastTime, mousePos);
        });
      }
      var canvas = document.getElementById('myCanvas');
      var balls = initBalls();
      var date = new Date();
      var time = date.getTime();
      /*
       * set mouse position really far away
       * so the mouse forces are nearly obsolete
       */
      var mousePos = {
        x: 9999,
        y: 9999
      };

      canvas.addEventListener('mousemove', function(evt) {
        var pos = getMousePos(canvas, evt);
        mousePos.x = pos.x;
        mousePos.y = pos.y;
      });

      canvas.addEventListener('mouseout', function(evt) {
        mousePos.x = 9999;
        mousePos.y = 9999;
      });
      animate(canvas, balls, time, mousePos);

    </script>
  </body>
</html>
Topic revision: r1 - 2013-10-12 - JimSkon
 
This site is powered by the TWiki collaboration platformCopyright &© by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback