Ball Simulation

by makurell

HTML

<canvas id="c"></canvas>

CSS

* { margin:0; padding:0; }
html, body { width:100%; height:100%; }
canvas { display:block; }

JavaScript

var c = document.getElementById('c'),
cx = c.getContext('2d');

var balls=[];//list of ball objects
var t = 0; //gametime
var speed = 1; //gamespeed
var fps = 120;//max is 1000
var f = 1000.0/fps*speed;
var g = 0.001; //gravity
var et = 1; //energy transfer
var ett = 1; //energy transfer (traction)
var tv=1; //terminal velocity

var tempball=null;

function newBall(x,y,vx=0,vy=0){
  return {
    x:x,
    y:y,
    r:20,
    vx:vx,
    vy:vy,
    m:20,//mass
    w:1,//width
    distanceToBall:function(ball2){
      return Math.sqrt(Math.pow(this.x-ball2.x,2)+Math.pow(this.y-ball2.y,2));
    }
  }
}

function init(){
  balls.push(newBall(30,30,0.7));
  balls.push(newBall(30,300,-0.4));

}

c.addEventListener('mousedown', function(e){
	var rect = c.getBoundingClientRect();
  var x = e.clientX - rect.left;
  var y = e.clientY - rect.top;
	tempball=newBall(x,y);
});
c.addEventListener('mousemove', function(e){
	if(tempball!==null){
  	var rect = c.getBoundingClientRect();
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;
    tempball.vx=tempball.x-x;
    tempball.vy=tempball.y-y;
  }
});
c.addEventListener('mouseup', function(e){
	if(tempball!==null){
    clearAll();
    tempball.vx*=0.01;
    tempball.vy*=0.01;
  	balls.push(tempball);
    tempball=null;
  }
});

function update(){
  for(var i=0; i<balls.length; i++){
    var ball=balls[i];
    //wall collisions
    if(ball.y+ball.vy*f+ball.r>c.height){
      ball.y=c.height-ball.r;
      ball.vy*=-et;
      ball.vx*=ett; //traction
    }
    else if(ball.y-ball.r<0){
      ball.y=ball.r;
      ball.vy*=-et;
    }
    if(ball.x+ball.vx*f+ball.r>c.width){
      ball.x=c.width-ball.r;
      ball.vx*=-et;
    }else if(ball.x-ball.r<0){
      ball.x=ball.r;
      ball.vx*=-et;
    }

    //updt vels
    ball.x=ball.x+ball.vx*f;
    ball.y=ball.y+ball.vy*f;

    ball.vy=Math.min(ball.vy+g*f,tv);
  }
}

function draw(){
  for(var i=0; i<balls.length; i++){
    drawBall(balls[i]);
  }
 ...