Tutorial Canvas Animation: rolling friction

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

Gravity with elastic bounce effect, air resistance and rolling friction

In order to complete the 'real world' picture , we introduce, as the last one in the serie of rate-determining factors, the so called rolling friction. Rolling friction is the resistance that a rolling object (such as a ball or wheel) experiences from the surface making it stop earlier. The object stops moving when the current speed is not large enough to overcome the rolling friction. The greater the rolling friction, the sooner the object comes to a standstill.

ball.vx = ball.vx * rollingFriction;

HTML

  <!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="rolling_friction_bounce" style="border: 1px solid;">
In order to complete 'real world' picture , we introduce, as the last one in the serie of rate-determining factors, rolling friction
    </canvas>
  </body>
  </html>

Javascript

$(document).ready(function() {
	gravityElasticRollingFrictionBounce();
});

function gravityElasticRollingFrictionBounce(){
  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 rollingFriction=.95
  
  var canvas=jQuery("#rolling_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};
  var breadcrumbs=new Array();
  var crumbRadius =1;
  
  
  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;//de bal rolt
  //als de bal rolt, treedt de rolweerstand in werking
  ball.vx *= rollingFriction;
  }
  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