JSFiddle - React, Tailwind, and code Playground

by Stijntjhe

HTML

<h3>Car control</h3>
Gas: <input type="range" id="gas" min=-100 max=100 onchange="g=this.value;update()" /><br />
Steering: <input type="range" id="steering" min=-100 max=100 onchange="s=this.value;update()" /><br />
<br />
<h3>Tank control</h3>
L: <input type="range" id="l" min=-100 max=100 /><br />
R: <input type="range" id="r" min=-100 max=100 /><br />
<br />
Duration: <input type="range" min=0 max=1000 onchange="d=this.value;update();" /><br />


<canvas id="sim" height=300 width=300></canvas>

JavaScript

function car2skid(gas, steering) {
    var l = (gas + steering * (gas * 2));
	var r = (gas - steering * (gas * 2));
    
    l = (l > 1 ? 1 : l);
    r = (r > 1 ? 1 : r);

    l = (l < -1 ? -1 : l);
    r = (r < -1 ? -1 : r);
    
    return {
        l : l,
        r : r
    }
}

function skidMovement(duration, l, r) {
    var durationInSeconds = (duration / 1000);
    var speed = 32;
    
    if(l == r) {
        return {
            movement : {
                x : 0,
                y : durationInSeconds * speed * l
            },
            rotation : 0
        }
    }
    
    var d = 13.5; // Distance from center to wheels
    
    // Calculate turnpoint x offset from center
    var a = (r - l) / (2 * d); // delta y / delta x
    var b = r - (a * d); // y for x = 0
    var offset = -b / a; // x for y = 0: x offset coord turnpoint (calc zero)
    
    var or = Math.abs(offset) + d; // Outer radius
    var o = 2 * or * Math.PI; // Circle circumference
    var owd = (Math.abs(l) > Math.abs(r) ? l : -r) * speed * durationInSeconds; // Outer wheel distance travelled
    
    var p = owd / o; // Part of circle circumference
    
    var angle = p * 2 * Math.PI; // Rotation angle

    var deltaX = -offset * (Math.cos(angle)-1);
    var deltaY = offset * Math.sin(angle);

    return {
        movement : {
            x : deltaX,
            y : deltaY
        },
        rotation : -angle
    }
}


var d=500,g=0,s=0,l=0,r=0;

var ctx = document.getElementById('sim').getContext('2d');
    ctx.translate(150, 150);

function update() {
    var skidInput = car2skid(g / 100, s / 100);

    document.getElementById('l').value = skidInput.l * 100;
    document.getElementById('r').value = skidInput.r * 100;
    
    var skid = skidMovement(d, skidInput.l, skidInput.r);
    console.log(skid);
    simulate(skid.movement.x, skid.movement.y, skid.rotation);
}
    
function simulate(x, y, rotation) {

    ctx.rect(-150, -150, 300, 300);
    ctx.fillStyle = '#dfdfdf';
   ...