Force Vector Split :: II

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.

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 can be  changed later to experiment more fully.

APPLY_FORCE = false;

//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.graphene,
        rotation : 0,
        rotationalVelocity : 0
    });
    
    vectorForce = new Vector({
//    	dx : 1000,
//        dy : 20
    	dx : -120,
        dy : -1000
    });
    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
    });
    
    
    $('#c').click(function (event) {
    	//apply...