JSFiddle - React, Tailwind, and code Playground

by mamadrood

HTML

<script src="http://keith-wood.name/js/jquery.svg.js"></script>
<fieldset>
Point A: X : <input type="text" size="6" id="aX" /> Y : <input type="text" size="6" id="aY" />
<br/>
Object O1: S : <input type="text" size="6" id="aS" class='speed' />
</fieldset>
<fieldset>

Point B: X : <input type="text" size="6" id="bX" /> Y : <input type="text" size="6" id="bY" />
<br/>

A-B Time : <input type="text" size="6" id="at" class='result' readonly />
</fieldset>
<fieldset>
Point C: X : <input type="text" size="6" id="cX" /> Y : <input type="text" size="6" id="cY" />
<br/>
Object O2: S : <input type="text" size="6" id="cS" class='speed' />
</fieldset>
<fieldset>
Point I: X : <input type="text" size="6" id="iX" class='result' readonly /> Y : <input type="text" size="6" id="iY" class='result' readonly/>
<br/>
Time t:  <input type="text" size="6" id="it" class='result' readonly />
</fieldset>

<button id="random">Random</button>
<button id="far">Too far case</button>
<button id="perfect">Nearly-perfect case</button>
<button id="close">Close case</button>
<button id="slow">Slow case</button>
<button id="reverse">Reverse case</button>
<button id="calculate">Go</button>
<br/>
<div id='log'></div>
Time machine : <input type="range" id="timeMachine" min="0" max="100" value="0"/> <span id="currentTime">0</span>
<div id="image" style="width: 400px; height: 400px; border: 1px solid #ccc">
</div>

JavaScript

// Benchmark global variable
var benchmark = {comparison: 0, recursivecall: 0, methodcall: 0, mathops: 0};


// Find the better intersection for the object c to 
function findTheBetterIntersection(a, b, c)
{
    benchmark.methodcall++;
    benchmark.comparison++;
    
    // Get the the time for the object a to go to the point b with the speed a.s
    aToBTime = getMaxTime(a, b, a.s);
    
    // If c could never reach a before it arrive to the point b
    if (aToBTime <= getMaxTime(c, b, c.s))
        return {x: b.x, y: b.y, t: getMaxTime(c, b, c.s)};
    
    // Find the best time for a to reach b
    t = getOptimalIntersectionTime(a, b, c, aToBTime);
    
    t2 = getTimeQuadratic(a, b, c);

    // Find the coordinates of a at the time t
    coords = getCoordAtTime(a, b, a.s, t);
    return {x: coords.x, y: coords.y, t: t, t2: t2};
}

function getTimeQuadratic(a, b, c)
{
    // Translate objets to c(0,0)
    azero = translateToZero(a, c);
    bzero = translateToZero(b, c);
    czero = c;
    czero.x = 0;
    czero.y = 0;
    // Speed vector v
    cTime = getMaxTime(a, b, a.s);
    v = {x: (b.x - a.x) / cTime, y: (b.y - a.y) / cTime};
    
    // Elements A, B and C of the quadratic equation
    quadC = Math.pow(azero.x, 2) + Math.pow(azero.x, 2);
    quadB = (2 * azero.x * v.x + 2 * azero.y * v.y);
    quadA = (Math.pow(v.x,2) + Math.pow(v.y,2) - Math.pow(czero.s,2));
    delta = Math.pow(quadB, 2) - (4 * quadA * quadC);
    console.log(delta);
    // Resuls of the equation
    x1 = (-quadB + Math.sqrt(Math.pow(quadB, 2) - (4 * quadA * quadC))) / (2 * quadA);
    x2 = (-quadB - Math.sqrt(Math.pow(quadB, 2) - (4 * quadA * quadC))) / (2 * quadA);
    console.log(x1 + ' ' + x2);
    if (x2 > x1 && x2 > 0)
        return x2;
    return x1;
}

function translateToZero(source, dest)
{
    s = {x: source.x - dest.x, y: source.y - dest.y};
    return s;
}

function getOptimalIntersectionTime(a, b, c, time)
{
    benchmark.recursivecall++;
    benchmark.comparison +=...