Force Vector Split :: III

Shows how a force vector is split into linear and rotational forces based on the distance from the polygon center and the angle of the force from said center. Then pushes the shape based on these vectors. You can now choose the point and angle of the force. As far as I can tell, the linear motion seems to agree with my paper calculations. Rotational motion is harder to figure, but it seems correct, assuming my torque calculations are not in error. It seems that the poly does what it intuitively would do, given its mass and the size of the force.

by djwelsh

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<canvas id="c" width="400" height="400"></canvas>
<button id="shove">Shove</button>
<fieldset><legend>Polygon</legend><select id="density"></select></fieldset>
<fieldset><legend>Force</legend><label><input id="force" value="100000" /> kg m / s^2</label></fieldset>

CSS

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

JavaScript

//http://buildnewgames.com/gamephysics/

//PURPLE is the force vector
//BLUE is the part of the force that becomes linear
//RED is the part that becomes angular
//GREEN is the vector from the center of mass to the impact point.


APPLY_FORCE = false;
timerStarted = false;

currentDensity = 7850;
currentForce = 100000;

var mouse = {
	x : 0,
    y : 0
};

var intersectVector = {};
var collisionPoint = { x : 0, y : 0 }
var forceAngle = 0; //degrees

//Math timing
var lastTime;
var thisTime;
var timeElapsed;
var timeInterval;

var ctx;
var polygon;
var vectorForce, vectorLinear, vectorRotational, vectorArm;


window.onload = function () {
    
    ctx = (document.getElementById('c')).getContext('2d')
    
    var m = 1.2; //miniaturizer; extend to zoom later, e.g. 10px = 1m
    
    var vertices = [
            { 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 : -100 / m, y : 10 / m }
        ];
    var points = getCenterOfPolygon(vertices);
    
	polygon = new Polygon({
        cx : 200,
        cy : 200,
        points : points,
        density : currentDensity,
        rotation : 0,
        rotationalVelocity : 0
    });
    
    collisionPoint.x = polygon.points[0].x;
    collisionPoint.y = polygon.points[0].y;
    
    setForceVectors();
    
    var d = $('#density');
    for (var m in DENSITY) {
    	d.append(
        	$(document.createElement('option'))
            	.val(DENSITY[m])
	            .html(m)
        );
    }
    d.change(function (event) {
    	currentDensity = $(this).val();
        polygon.density = currentDensity;
        polygon.calculateMassAndInertia();
    });
    
    
    $('#force').keyup(function (event) {
    	//how much force
        currentForce = parseFloat($(this).val());
        setForceVectors();
    })
    
    $('#shove').click(function (event) {
    	//apply force
     ...