Keeping shape and animation of ball consistance over period of time

Question

I am new to two.js. I am trying some basic experiments with rubber ball example to reposition ball on every second as per random input instead of mouse movement.

So, I have written below code, but it is removing rubber ball effect after some iteration. I don't know what is going wrong.

Second problem, after some iteration, rubber ball is changing its shape from circle to oval kind of shape.

JSFiddle: http://jsfiddle.net/2v93n/ Tried many times, but not working live with jsFiddle.

<body>
<script>
      var two = new Two({
        fullscreen: true,
        autostart: true
      }).appendTo(document.body);

      Two.Resoultion = 32;

      var delta = new Two.Vector();
      var mouse = new Two.Vector();
      var drag = 0.1;
      var radius = 25;
      var shadow = two.makeCircle(two.width / 2, two.height / 2, radius);
      var ball = two.makeCircle(two.width / 2, two.height / 2, radius);
      ball.noStroke().fill = 'green';shadow.noStroke().fill = 'rgba(0, 0, 0, 0.2)';          shadow.scale = 0.85;

    function moveRubberBall() {

      shadow.offset = new Two.Vector(- radius / 2, radius * 2);

      _.each(ball.vertices, function(v) {
        v.origin = new Two.Vector().copy(v);
      });

      mouse.x = Math.floor((Math.random() * 1000) + 1);
      mouse.y = Math.floor((Math.random() * 600) + 1);
      shadow.offset.x = 5 * radius * (mouse.x - two.width / 2) / two.width;
      shadow.offset.y = 5 * radius * (mouse.y - two.height / 2) / two.height;

      two.bind('update', function() {

        delta.copy(mouse).subSelf(ball.translation);

        _.each(ball.vertices, function(v, i) {

          var dist = v.origin.distanceTo(delta);
          var pct = dist / radius;

          var x = delta.x * pct;
          var y = delta.y * pct;

          var destx = v.origin.x - x;
          var desty = v.origin.y - y;

          v.x += (destx - v.x) * drag;
          v.y += (desty - v.y) * drag;

          shadow.vertices[i].copy(v);

        });
        ball.translation.addSelf(delta);
        shadow.translation.copy(ball.translation);
        shadow.translation.addSelf(shadow.offset);

      });
  }
  var auto_refresh = setInterval("moveRubberBall()", 1000);
</script>
</body>

Please help somebody.

score 0 · Accepted Answer · answered Jun 02 '14 at 22:50

0

The main issue is that two.bind('update'...) is within moveRubberBall(). When you bind to update it means this function will be called on requestAnimationFrame, effectively 60FPS. When the event is bound every time moveRubberBall is called — once a second — it adds another callback. So after 5 seconds there will be 5 updates called 60FPS. I updated your fiddle to import two.js correctly and fix this error outlined:

http://jsfiddle.net/2v93n/1/

answered Jun 02 '14 at 22:50

jonobr1

1,013
2
11
22

Can u tell me what was the problem in importing two.js? – S S Jun 03 '14 at 05:45
1

Ah, yes sorry about that. The issue is that GitHub doesn't allow you to use any of the branches, so you have to use a CDN or other source to import the file. Coincidentally you can use GitHub's `gh-pages`, so I've linked the two.js from there instead of the master branch: `http://jonobr1.github.io/two.js/third-party/two.js` – jonobr1 Jun 04 '14 at 06:05

Keeping shape and animation of ball consistance over period of time

1 Answers1