Find Normal and Tangential components of motion in box2d/matter.js

Question

I'm trying to recreate a fluid-drag model as seen in paragraph 2.2.1 of this paper. A working version can be seen in this this youtube movie (where I found the paper).

In the paper they state that they calculate the normal and tangential forces of the velocity of an edge of a soft body. I've tried to understand how to get from edge velocity to these two force components. However I can only find resources about calculating the components based on a function (e.g. this), and I'm struggling to translate that to my physics environment. What would be a way to achieve this fluid drag model?

Here is a fiddle to show my environment: https://jsfiddle.net/Swendude/1nnckp5p/

// module aliases
var Engine = Matter.Engine,
    Render = Matter.Render,
    World = Matter.World,
    Bodies = Matter.Bodies,
    Body = Matter.Body,
    Vector = Matter.Vector,
    Composite = Matter.Composite,
    Composites = Matter.Composites,
    Constraint = Matter.Constraint,
    Events = Matter.Events;

// create an engine
var engine = Engine.create();

// create a canvas
var canvas = document.getElementById("maincanvas");

var render = Render.create({
    element: document.body,
    canvas: canvas,
    engine: engine,
    options: {
        background: "#fff",
        height: 400,
        width: 400,
        wireframes: false,
    }
});

engine.world.gravity = {x:0, y:0};

// Create a soft body composite, see 
// http://brm.io/matter-js/docs/classes/Composites.html#method_softBody
var softbox = Composites.softBody(100,100,2,2,40,40,true,1);

World.add(engine.world, softbox);


// This functions makes some constraints move.

function pulse(composite) {
  var allcons = Composite.allConstraints(composite);
  allcons[0].length += 5;
  allcons[4].length += 5;

  // Set a timeout to make the constraints short again
  setTimeout(function (cons) { cons.length -= 5;}, 1000, allcons[0]);
  setTimeout(function (cons) { cons.length -= 5;}, 1000, allcons[4]);
}

setInterval(pulse, 2000, softbox);

function applyForcesOnEdge() {
    var allcons = Composite.allConstraints(engine.world);

    allcons.forEach( function(cons, index) {
        // Edge speed defined as the average of both connected body's speed. 
        var constraintspeed = Vector.div(Vector.add(cons.bodyA.velocity, cons.bodyA.velocity),2);
        if (constraintspeed.x != 0 && constraintspeed.y != 0) {
          console.log(constraintspeed); // How to get the tangential and normal components from this?
        }
    });
}

Events.on(engine, 'beforeUpdate', function () {
  applyForcesOnEdge();
})


Engine.run(engine);

Render.run(render);

Most of it is matter.js boilerplate, the interesting parts are the functions: pulse() and applyForcesOnEdge()

I'm using matter.js, but I can imagine the same question might apply to a box2d environment.

Answer 1

Just take the difference between the positions of the objects on either side of the constraint. It's better explained in code:

allcons.forEach( function(cons, index) {
    // Edge speed defined as the average of both connected body's speed. 
    var constraintspeed = Vector.div(
        Vector.add(
            cons.bodyA.velocity,
            cons.bodyB.velocity),
        2);
    var constraintpos = Vector.div(
        Vector.add(
            cons.bodyA.position,
            cons.bodyB.position),
        2);
    var tangent = Vector.normalise(
        cons.bodyB.position -
        cons.bodyA.position);
    var normal = Vector.perp(tangent);
    var v_T = Vector.dot(constraintspeed, tangent);
    var v_N = Vector.dot(constraintspeed, normal);
    var F_T = - lambda_T * Math.sign(v_T) * v_T * v_T;
    var F_N = - lambda_N * Math.sign(v_N) * v_N * v_N;
    var F = Vector.add(
        Vector.mult(tangent, F_T),
        Vector.mult(normal, F_N));
    Body.applyForce(cons.bodyA, constraintpos, F);
    Body.applyForce(cons.bodyB, constraintpos, F);
});