Force Vector Split :: I

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.

by djwelsh

HTML

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

CSS

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

JavaScript

//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.

//For simplicity, the impact point is a vertex, but this canbe  changed later to experiment more fully.


//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
    
	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.birch,
        rotation : 0,
        rotationalVelocity : 0
    });
    
    vectorForce = new Vector({
    	dx : 20,
        dy : -8
    });
    vectorForce.setAnchor({
    	x : polygon.cx + polygon.points[0].x,
    	y : polygon.cy + polygon.points[0].y
    });
    
    vectorArm = new Vector({
    	dx : vectorForce.anchor.x - polygon.cx,
        dy : vectorForce.anchor.y - polygon.cy
    });
    vectorArm.setAnchor({
    	x : polygon.cx,
        y : polygon.cy
    });
    
    vectorLinear = vectorForce.vectorProjectOnto(vectorArm);
    vectorLinear.setAnchor({
    	x : vectorForce.anchor.x,
        y : vectorForce.anchor.y
    });
    
    vectorRotational = vectorLinear.multiplyScalar(-1, true);
    vectorRotational = vectorForce.add(vectorRotational, true);
    vectorRotational.setAnchor({
    	x : vectorForce.anchor.x,
        y : vectorForce.anchor.y
    });
    
    
    
    //Math timing
    lastTime = (new Date()).getTime();
    thisTime = 0;
    timeElapsed = 0;
    timeInterval =...