Tutorial Canvas Animation: friction

Je browser ondersteunt geen Canvas. Update je browser naar de laatste versie.

Gravity with elastic bounce effect and friction

In 'the real world' in addition to the gravity, and elasticity (for bouncing objects), there is another rate-limiting factor with respect to moving objects, namely the resistance (also called "friction") which the air exerts on the object. The degree of air resistance is determined inter alia by the velocity of the object (in both horizontal and vertical direction), by the density of the substance through which the object is moving, and by the shape of the object. In this tutorial we will restrict ourselves to the influence of speed. The higher the speed, the greater the air resistance and the greater the speed decrease.

ball.vx = ball.vx - ( ball.vx * frictionX);
ball.vy = ball.vy - ( ball.vy * frictionY);

HTML code for this animation:

  <!doctype html>
  <html>
  <head>
 	 <title>Stuitereffect met zwaartekracht, elasticiteit en frictie</title>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	 <script src="js/functions.js"></script>
  </head>
  <body> 
 	 <canvas id="friction_bounce" style="border: 1px solid;">Naast de zwaartekracht en elasticiteit (bij stuiterende voorwerpen) speelt er in 'the real world' nog een snelheidsbepalende factor mee ten aanzien van bewegende voorwerpen, namelijk de weerstand.
        </canvas>
  </body>
  </html>

Javascript

jQuery(document).ready(function() {
	gravityElasticFrictionBounce();
});

 function gravityElasticFrictionBounce(){
  var radius=15;
  var speedfactor =7;
 // define the direction the ball is moving
  var degrees = 305;
  var angle = degrees * Math.PI/ 180;
  var vx = Math.cos(angle) * speedfactor/2;
  var vy  = Math.sin(angle) * speedfactor;
  var gravity = 0.1;
  var elasticity = .8;
  var frictionX = .005;
  var frictionY = .00001;
  var breadcrumbs=new Array();
  var crumbRadius =1;
  
  
  var canvas=jQuery("#friction_bounce");
  var context = canvas.get(0).getContext("2d");
 //Make the Canvas element responsive for desktop, tablet and smartphone
  var parentWidth=jQuery(canvas).parent().width();
  var canvasWidth = context.canvas.width  = parentWidth;
  var canvasHeight = context.canvas.height  = 288;
  // define the coordinates of the starting point p0
  var p0 = {x:20,y:canvas.height()-radius};
  // define the start coordinates, the speed and the radius of the ball
  var ball = {x:p0.x, y:p0.y, vx:vx, vy:vy, radius:radius, elasticity: elasticity};
  
  
  if (!checkForCanvasSupport) {
  return;
  }
  init();
  
  function init(){
  myinterval = setInterval(draw, 12);
  }
  
  function draw(){
  //Verwerk de frictie in de horizontale en vertikale snelheid
  ball.vx = ball.vx - ( ball.vx * frictionX);
  ball.vy = ball.vy - ( ball.vy * frictionY);
  //Verwerk de zwaartekracht in de vertikale snelheid
  ball.vy += gravity;
  
  if ((ball.y + ball.radius) > canvas.height()){
  if (ball.vy < 0.8){
  ball.vy = 0;
  }
  if( ball.vx >-0.63 && ball.vx < -0.6 ){
  ball.vx=0;
  setTimeout('clearInterval(myinterval)', 0);
  //showbutton();
  return;
  }
  ball.vy = -(ball.vy) * ball.elasticity
  }
  if((ball.x + ball.radius) > canvas.width()  ){
  ball.vx= -(ball.vx);
  ball.vy = -(ball.vy);
  }
  if((ball.x - ball.radius) < 0){
  ball.vx= -(ball.vx); 
  }
  ball.y += ball.vy;
  ball.x += ball.vx;
  
  
  context.clearRect(0,0, canvasWidth,canvasHeight);
  context.fillStyle = "#f16529";
  context.lineWidth=7;
  context.strokeStyle="black";
  context.beginPath();
  context.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,true);
  context.closePath();
  context.fill();
  context.stroke();
  
  
  //draw the breadcrumbs
  //add an breadcrumb to the breadcrumbs array
  breadcrumbs.push({x:ball.x,y:ball.y});
  //draw the breadcrumbs which show that the track of the movement
  context.globalCompositeOperation = "destination-over";
  showBreadcrumbs(breadcrumbs);
 
  function showBreadcrumbs(breadcrumbs){
  for (var i = 0; i< breadcrumbs.length; i++) {
  context.beginPath();
  context.arc(breadcrumbs[i].x,breadcrumbs[i].y,crumbRadius,0, 2*Math.PI,false);
  context.closePath();
  context.fillStyle="#999";
  context.fill();
  }
  }
  }
}

To next tutorial

Leave a comment