Tutorial Canvas Animation: spring effect

In this tutorial we will start using a javascript library which will make coding the elements and animations on the canvas more comfortable: the KineticJS library. This library will make our life a lot easier by predefining many objects and behaviours which we want to place on the canvas. What a relief! (sometimes I miss Flash, this whole canvas ‘thing’ occures to me sometimes like reinventing the wheel). Anyway: the kineticJS library can be downloaded on www.kineticjs.com or on Github While you're there, check out the documentation, the tutorials and all the other goodies.

Example1. Spring effect

In example 1 we look at the basic working of a spring effect. In this example we don't actual see a spring but we see an object (a ball) which moves like as if attached to a spring. We release this ball on position x=0 and it will move towards the other end position on the right, meanwhile passing the middle of the canvas. This goes to and fro. Because the ball wants to return to the middle of the canvas, we'll call this point ‘targetX’. The stiffness of the spring is expressed by a number; the higher the number, the stiffer the spring. So we start with the next variables.
spring = 0.03,
targetX = canvas.width / 2,
vx = 0;

During the motion the distance to the target is alwayst:
var dx = targetX - ball.getX();

The acceleration during the motion will be proportional to that distance, in fact, it will be the distance multiplied by the spring value:
var ax = dx * spring;

Now add the acceleration to the velocity and add the velocity to the position:
vx += ax; ball.getX() += vx;

HTML code for this animation:

<!doctype html>
<html>
<head>
<style>
div#kineticContainer{
border:solid 1px #666666;
width:578px;
height:244px;
}
</style>
<script src="js/kinetic-v4.7.4-min.js"></script>
<script src="js/service.js"></script>
<script src="js/ball.js"></script>
<script src="js/functions.js"></script>
<script>
window.addEventListener("load", spring1, true); 
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>

Javascript

function spring1(){
  var stage = new Kinetic.Stage({
  container: 'kineticContainer',
  width: 578,
  height: 200
  });
  var layer = new Kinetic.Layer();
  var ball = new Kinetic.Circle({
  x: 0,
  y: 0,
  radius: 20,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4
  });
  
  layer.add(ball);
  stage.add(layer);
  
  var spring = 0.03;
  // The target position is the point on the canvas 
  // where the ball want to go back all the time 
  // and where it will finally come to rest
  var targetX = stage.getWidth() / 2;
  var targetY = stage.getHeight() / 2;
  var vx = 0;
  var vy = 0
  var friction = 0.95;
  
  var anim = new Kinetic.Animation(function(frame) {
  var dx = targetX - ball.getX();
  var dy = targetY - ball.getY();
  var ax = dx * spring;
  var ay = dy * spring;
  vx += ax;
  vy += ay;
  //We build in some friction here, otherwise the ball 
  //will keep on moving to and fro for ever.
  vx *= friction;
  vy *= friction;
  var ballX = ball.getX();
  var ballY = ball.getY();
  ballX += vx;
  ballY += vy;
  ball.setX(ballX);
  ball.setY(ballY);
  }, layer);
  
 anim.start();
}

Next tutorial

Comments (1)

  • Avatar

    matt

    |

    I’ve been looking everywhere for this. Thanks!!

    Reply

Leave a comment