CODEWITHSUNDEEP
javascriptmathrotationgeometrytrigonometry
Andrew Howard
Andrew Howard

Reputation: 3082

Calculate the x and y based on bearing

I have a screen where I would like to calculate the next x and y based on angle. The first footstep is this example starts at Step 1. How can I calculate the next footstep where I want to increase going forward by 120 and the side step needs to weave in and out of about 60.

enter image description here

Please bear in mind that the starting point could be x = 100, y = 100 with the angle being 180 so the footsteps would have to then be going up the y axis.

I've attempted the following Javascript but the footsteps seem to get confused:

this.startingFootPrintX = Math.floor(Math.random() * 1000) + 20; //Random number between 20 and 1000
this.startingFootPrintY = Math.floor(Math.random() * 560) + 20; //Random number between 20 and 560
this.startingAngle = Math.floor(Math.random() * 340) + 20; //Random number between 20 and 340

startFootSteps();

startFootSteps(){
console.log(this.startingFootPrintX);
console.log(this.startingFootPrintY);

this.startingFootPrintX = Math.round(Math.cos(this.startingAngle * Math.PI / 180) * 120 + this.startingFootPrintX);
this.startingFootPrintY = Math.round(Math.sin(this.startingAngle * Math.PI / 180) * 60 + this.startingFootPrintY);

setInterval(function () {
startFootSteps();
}, 3000);
}

Upvotes: 2

Views: 165

Answers (1)

meowgoesthedog
meowgoesthedog

Reputation: 15035

Diagram:

enter image description here

The step direction (black line) is given by (cos θ, sin θ). The step offset direction (small blue lines) is given by (sin θ, -cos θ)

The position recurrence is given by:

enter image description here

s determines which side of the black line the next footprint is on, i.e. -1 for the left foot and +1 for the right.

If you know the starting position c0 and the starting foot s0, a closed-form solution is given by:

enter image description here

This alternates between both feet for every step.

In your diagram example the parameters are w = 60, d = 120, θ = 40°, c0 = (96, 438), s0 = -1 (starting with left foot).

UPDATE: JavaScript code snippet

this.startingPosX = Math.floor(Math.random() * 1000) + 20;
this.startingPosY = Math.floor(Math.random() * 560) + 20;
this.startingAngle = Math.floor(Math.random() * 340) + 20;
this.startingFoot = 1 - 2 * Math.round(Math.random());   // select which foot to start with
this.stepSize = 120;
this.stepWidth = 60;

footsteps(0);

footsteps(n) {
    // should actually pre-calculate these outside but oh well
    let a = this.startingAngle * Math.PI / 180;
    let c = Math.cos(a), s = Math.sin(a);

    // current foot
    let d = this.startingFoot * (1 - 2 * (n % 2));

    // apply equations
    this.footprintX = Math.round(   
        this.startingPosX +             // initial
        this.stepSize * n * c +         // step
        this.stepWidth * 0.5 * d * s    // foot offset
    );
    this.footprintY = Math.round(
        this.startingPosY +             // initial
        this.stepSize * n * s -         // step
        this.stepWidth * 0.5 * d * c    // foot offset
    );

    // draw the foot here
    console.log(this.footprintX);
    console.log(this.footprintY);

    // increment the step counter for the next call
    setInterval(function() { footsteps(n+1); }, 3000);
}

Upvotes: 6

Related Questions