Angular Momentum
by djwelsh
HTML
<canvas id="c" width="400" height="400"></canvas>
<label><input type="text" id="forceVectorMagnitude" val="" ?>
CSS
canvas {
width: 400px;
height: 400px;
outline: 1px solid #ccc;
}
label {
display: block;
}
JavaScript
//Math timing
var lastTime;
var thisTime;
var timeElapsed;
var timeInterval;
var mouse = {
x : 0,
y : 0,
xPoly : 0,
yPoly : 0
}
var ctx;
var polygon;
var forceApplied = false;// Tells us when to stop applying torque
window.onload = function () {
setTimeout(function () { forceApplied = true; }, 1000);
ctx = (document.getElementById('c')).getContext('2d')
var m = 1.2; //miniaturizer; extend to zoom later, e.g. 10px = 1m
polygon = new Polygon({
cx : 200,
cy : 200,
points : [
{ x : -10 / m, y : 70 / m },
{ x : 50 / m, y : 50 / m },
{ x : 100 / m, y : 0 / m },
{ x : 80 / m, y : -20 / m },
{ x : -30 / m, y : -50 / m },
{ x : -80 / m, y : 10 / m }
],
density : DENSITY.goosefeather,
rotation : 0,
rotationalVelocity : 0
});
//Math timing
lastTime = (new Date()).getTime();
thisTime = 0;
timeElapsed = 0;
timeInterval = 1000; //1 second
update();
requestAnimationFrame(draw);
(document.getElementById('c')).onmousemove = function (event) {
if (!event) event = window.event;
mouse.x = event.offsetX;
mouse.y = event.offsetY;
}
};
function update () {
thisTime = (new Date()).getTime();
timeElapsed = thisTime - lastTime;
//Hand the change in time since the last update; this is
// used to calculate incrementally for smooth animation.
polygon.update(timeElapsed / 1000);
lastTime = thisTime;
//Make sure updates happen at least as often as the max
// potential likely framerate (60fps here).
setTimeout(update, 1000 / 60);
var m = checkMouseXY(mouse.x, mouse.y, polygon.getTransformedPoints());
mouse.xPoly = m.x;
mouse.yPoly = m.y;
var temp = intersectPointOnPoly({x : polygon.x, y : polygon.y }, { x : mouse.x, y : mouse.y },...