Tutorial Canvas Animation: circular movement

Check this example in your browser

A uniform circular motion is a circular motion with constant speed around a center. See animation at the top of this page

Example 1: using context transforms

HTML code for this animation:

<!doctype html>
<html>
<head>
<title>Canvas: eenparige cirkelbeweging</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/service.js"></script>
<script src="js/ball.js"></script>
<script src="js/functions.js"></script>
</head>
<script>
    jQuery(document).ready(function(){
    circularMotion1();
    });	>
</script>
<body> 
<canvas id="circulair_motion1" style="border: 1px solid;" width="636" height="288"></canvas>
</body>
</html>

Javascript code in service.js:

// JavaScript Document
  /**
* Normalize the browser animation API for all applications. This asks the browser to create a plan for redrawing a starting position of the screen for the next animation frame.
* Checks for cross-browser support, and, if not present, defines a fallback to the clearTimeout function.
* @param {function} callback Fuction to call when it's time to update the animation for the next redesign.
* @param {HTMLElement} element Optional parameter that specifies the element which defines the entire animation.
* @return {number} Animation frame request.
  */
  if (!window.requestAnimationFrame) {
  window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  window.oRequestAnimationFrame ||
  function (callback) {
  return window.setTimeout(callback, 17 /*~ 1000/60*/);
  });
  }
  /**
  * Cancels a request for an animation frame.
  * Check for cross-browser support, with a fallback to the clearTimeout function
  * @param {number}  Animation frame request.
  */
  if (!window.cancelRequestAnimationFrame) {
  window.cancelRequestAnimationFrame = (window.cancelAnimationFrame ||
  window.webkitCancelRequestAnimationFrame ||
  window.mozCancelRequestAnimationFrame ||
  window.msCancelRequestAnimationFrame ||
  window.oCancelRequestAnimationFrame ||
  window.clearTimeout);
  }

function checkForCanvasSupport() {
	return !!document.createElement('some_canvas').getContext;
}

Javascript code in ball.js:

// JavaScript Document
function Ball (x,y,radius,color,strokeColor,lineWidth) {
    this.radius=radius;
    this.color=color;
    this.strokeColor=strokeColor;
    this.lineWidth = lineWidth;
    this.x = x;
    this.y = y;
    this.rotation = 0;
    this.scaleX = 1;
    this.scaleY = 1;
    if (x === undefined) { x = 0; }
    if (y === undefined) { y = 0; }
    if (radius === undefined) { radius = 20; }
    if (color === undefined) { color = "#f16529"; }
    if (strokeColor === undefined) { strokeColor = "#000"; }
    if (lineWidth === undefined) { lineWidth = "2"; }
}

Ball.prototype.draw = function (context) {
    context.lineWidth = this.lineWidth;
    context.fillStyle = this.color;
    context.beginPath();
    //x, y, radius, start_angle, end_angle, anti-clockwise
    context.arc(this.x, this.y, this.radius, 0, (Math.PI * 2), true);
    context.closePath();
    context.fill();
    if (this.lineWidth > 0) {
    context.stroke();
    }
};

Javascript code in functions.js:

  
function circularMotion1(){
    var time;
    var canvas = jQuery("#circulair_motion1");
    var context = canvas.get(0).getContext("2d");
    //function Ball(x,y,radius,color,strokeColor,lineWidth) in ball.js
    var ball = new Ball(-10,-10,20,'#f16529','#000',7);
    //Make the Canvas element responsive for desktop, tablet and smartphone.
    var parentWidth=jQuery(canvas).parent().width();
    var canvasWidth=context.canvas.width = parentWidth;
    
    if (!checkForCanvasSupport) {
    return;
    }
    
    (function drawFrame() {
    window.requestAnimationFrame(drawFrame, canvas);
    var canvasHeight=context.canvas.height= 288;
    context.clearRect(0,0, canvasWidth,288);
    context.save();
    time=new Date();
    context.translate(canvasWidth/2 ,canvasHeight/2);
    context.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
    context.translate(105,0);
    ball.draw(context);
    }());//end drawFrame
}//end circularMotion1

Example 2: using the calculation of the x en y coordinates of the ball ( and a statical context)

Check this example in your browser

HTML code for this animation:

<!doctype html>
<html>
<head>
<title>Canvas: eenparige cirkelbeweging</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/utilities.js"></script>
<script src="js/ball.js"></script>
<script src="js/functions.js"></script>
</head>
<script>
    jQuery(document).ready(function(){
    circularMotion2();
    });	>
</script>
<body> 
<canvas id="circular_motion2" style="border: 1px solid;" width="636" height="288"></canvas>
</body>
</html>

Javascript:

function circularMotion2(){
  var centerX;
  var centerY;
  var rotationRadius=100;
  var time;
  var degrees = 0;
  var Angle;
  var x;
  var y;
  var canvas = jQuery("#circular_motion2");
  var context = canvas.get(0).getContext("2d");
  //function Ball(x,y,radius,color,strokeColor,lineWidth) in ball.js
  var ball_2 = new Ball(-10,-10,20,'#f16529','#000',7);
  var parentWidth=jQuery(canvas).parent().width();
  var canvasWidth=context.canvas.width = parentWidth;
  
  if (!checkForCanvasSupport) {
  return;
  }
  
  (function drawFrame() {
  window.requestAnimationFrame(drawFrame, canvas);
  var canvasHeight=context.canvas.height= 288;
  context.clearRect(0,0,canvasWidth,288); // clear canvas
  centerX = canvasWidth/2;
  centerY = canvasHeight/2;
  context.save();
  Angle = degrees * (Math.PI / 180);
  degrees = degrees + 2;
  ball_2.x=rotationRadius * Math.cos(setAngle()) + centerX;
  ball_2.y=rotationRadius * Math.sin(setAngle()) + centerY;
  ball_2.draw(context);
  }());//end drawFrame
 
 function setAngle(){
  Angle = degrees * (Math.PI / 180);
  degrees = degrees + 2;
  return Angle;
  }//end setAngle
   
 }//end circularMotion2

Next tutorial

Leave a comment