Algorithm for moving an object horizontally in javascript

Question

I am currently working on a game using javascript and processing.js and I am having trouble trying to figure out how to move stuff diagonally. In this game, there is an object in the center that shoots other objects around it. Now I have no problem moving the bullet only vertically or only horizontally, however I am having difficulty implementing a diagonal motion for the bullet algorithm.

In terms of attempts, I tried putting on my math thinking cap and used the y=mx+b formula for motion along a straight line, but this is what my code ends up looking like:

ellipse(shuriken.xPos, shuriken.yPos, shuriken.width, shuriken.height); //this is what I want to move diagonally

    if(abs(shuriken.slope) > 0.65) {
        if(shuriken.targetY < shuriken.OrigYPos) {
            shuriken.yPos -= 4;
        } else {
            shuriken.yPos += 4;
        }
        shuriken.xPos = (shuriken.yPos - shuriken.intercept)/shuriken.slope;

    } else {
        if(shuriken.targetX < shuriken.OrigXPos) {
            shuriken.xPos -= 4;
        } else {
            shuriken.xPos += 4;
        }
        shuriken.yPos = shuriken.slope * shuriken.xPos + shuriken.intercept;
    }

The above code is very bad and hacky as the speed varies with the slope of the line.

I tried implementing a trigonometry relationship but still in vain.

Any help/advice will be greatly appreciated!

instead of slopes, just work with vectors. much easier and useful — kennypu
– kennypu, Commented Dec 30, 2012 at 5:20
sorry, slope would imply m in the y = mx + b formula or basically y coordinate difference divided by x coordinate difference — Charles
– Charles, Commented Dec 30, 2012 at 5:38

Glorfindel · Accepted Answer · 2019-08-28 19:19:34Z

4

Think of it this way: you want the shuriken to move s pixels. If the motion is horizontal, it should move s pixels horizontally; if vertical, s pixels vertically. However, if it's anything else, it will be a combination of pixels horizontally/vertically. What's the correct combination? Well, what shape do you get if you project s distance in any direction from a given point? That's right, a circle with radius s. Let's represent the direction in terms of an angle, a. So we have this picture:

How do we get the x and the y? If you notice, we have a triangle. If you recall your trigonometry, this is precisely what the sine, cosine, and tangent functions are for. I learned their definitions via the mnemonic SOHCAHTOA. That is: Sin (a) = Opposite/Hypotenuse, Cos(a) = Adjacent/Hypotenuse, Tan(a) = Opposite/Adjacent. In this case, opposite of angle a is y, and adjacent of angle a is x. Thus we have:

cos(a) = x / s
sin(a) = y / s

Solving for x and y:

x = s * cos(a)
y = s * sin(a)

So, given the angle a, and that you want to move your shuriken s pixels, you want to move it s * cos(a) horizontally and s * sin(a) vertically.

Just be sure you pass a in radians, not degrees, to javascript's Math.sin and Math.cos functions:

radians = degrees * pi / 180.0

This may be why your trigonometric solution didn't work as this has bitten me a bunch in the past.

edited Aug 28, 2019 at 19:19

Glorfindel

22.8k13 gold badges97 silver badges124 bronze badges

answered Dec 30, 2012 at 5:22

Claudiu

231k174 gold badges507 silver badges702 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Charles Over a year ago

WOW! YOU ARE THE BEST! I knew I was close but this really clears it up for me. I was initially looking at it from the point of given x and y...how do I find s. But your answer really clears it up, because I can find s by using the distance equation (x2 - x1)/(y2 - y1), find a using the tangent of opposite and adjacent and then pluging it in for x and y! WOW! Thanks so much!

Claudiu Over a year ago

If you find yourself having to do an arctan to find the angle, keep in mind the existence of atan2 which handles the sign for you.

mitim · Accepted Answer · 2012-12-30 05:28:33Z

1

If you know the angle and speed you are trying to move at, you can treat it as a polar coordinate, then convert to cartesian coordinates to get an x,y vector you would need to move the object by to go in that direction and speed.

If you don't know the angle, you could also come up with the vector by taking the difference in X and difference in Y (this I know you can do as you are able to calculate the slope between the 2 points). Then take the resulting vector and divide by the length of the vector to get a unit vector, which you can then scale to your speed to get a final vector in which you can move your object by.

(This is what probably what kennypu means by sticking with vectors?)

answered Dec 30, 2012 at 5:28

mitim

3,2016 gold badges26 silver badges25 bronze badges

1 Comment

Charles Over a year ago

That is correct and in fact what I was getting at. My error was in focusing on the s coordinate(in Claudiu's post) rather than easily finding it using a predefined function called dist() in processing and using that to find x and y.Thank you for your answer!

Collectives™ on Stack Overflow

Algorithm for moving an object horizontally in javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related