Particles - Torque

by djwelsh

HTML

<canvas id="c" width="400" height="400"></canvas>

CSS

canvas {
    width: 400px;
    height: 400px;
    outline: 1px solid #ccc;
}

JavaScript

var BOX_WIDTH = 380;
var BOX_HEIGHT = 380;
var g = 0;//9.81; // m/s^2
var wind = 0 * (Math.random() - 0.5);

var PARTICLE_NUM = 1;

var LEFT_BOUND = 0;
var RIGHT_BOUND = 400;
var LOWER_BOUND = 0;
var UPPER_BOUND = 390;

var particles = [];

for (var i = 0; i < PARTICLE_NUM; i++) {
    particles.push(new RigidBody(
        {
            x : 10 + 150,
            y : 10 + 150,
            width : 180,
            height : 60,
            vx : 0,
            vy : 0,
            mass : Math.random() * 100,
            rotation : 0,
            angularVelocity : 0
        }
    ));
}
var ctx = (document.getElementById('c')).getContext('2d')

var lastTime = (new Date()).getTime();
var thisTime = 0;
var timeElapsed = 0;
var timeInterval = 1000; //1 second

function update () {
    
	thisTime = (new Date()).getTime();
    timeElapsed = thisTime - lastTime;
    
    for  (var i = 0; i < PARTICLE_NUM; i++) {
        particles[i].update(timeElapsed / 1000);
    }
    lastTime = thisTime;
    
    setTimeout(update, 1000 / 60);
}

function draw () {
    
    ctx.clearRect(0, 0, 400, 400);
//    ctx.save();
//    ctx.fillStyle = "rgba(255, 255, 255, 0.05)";
//    ctx.fillRect(0, 0, 400, 400);
//    ctx.restore();
    
    ctx.save();
    ctx.fillStyle = "black";
	ctx.fillRect(0, 390, 400, 10);
	ctx.restore();
    
    for  (var i = 0; i < PARTICLE_NUM; i++) {
    	particles[i].draw(ctx);
    }
    
    //Draw ruler
    ctx.save()
    ctx.beginPath();
    
    ctx.moveTo(10, 90);
    ctx.lineTo(10, 390);
    
    ctx.moveTo(10, 90);
    ctx.lineTo(15, 90);
    ctx.moveTo(10, 190);
    ctx.lineTo(15, 190);
    ctx.moveTo(10, 290);
    ctx.lineTo(15, 290);
    ctx.moveTo(10, 390);
    ctx.lineTo(15, 390);
    ctx.strokeStyle = "red";
    ctx.fillStyle = "red";
    ctx.stroke();
    ctx.textBaseline = "middle";
    ctx.fillText("300 m", 15, 90);
    ctx.fillText("200 m", 15, 190);
    ctx.fillText("100 m", 15, 290);
    ctx.fillText("0 m", 15, 390);
    ctx.restore();
    
   ...