next »

[Eendhoorn]

I'm stuck on some absolute beginner math  

I have the follow situation;


I need to know the X coordinate of R, the coordinate Y is already known, it's the same as P, as my game is aligned vertically.

My first instinct was to project vector AP onto AB (result C). And then take the normalized vector for AB and scale it with C's magnitude to arrive at R. but I realised that gives incorrect results, because the projection is aligned to AB's normal.

(projected vector visualized in orange dashes).

Basic vector math is about the only thing I can do, but I think it won't get me anywhere.

I found some solutions online, but they all just show a fomula (I have trouble reading those) and they never really give an explanation why it works that.
I could do a line intersection as well, but that stuff seemed even more complicated  

If someone could explain a solution to me like I'm 5 that would be great  

[oahda]

I have one solution, but on the basis that you always know y and that you always draw a horizontal line. However, you can probably still apply this if you rotate the triangle by a rotation matrix first, to make the line horizontal again (or vertical, if you want).

I decided to view this as a graph, where PR forms the horizontal baseline and BA is a line described by a function.

So we figure out the rate at which BA's x changes relative to y to begin with. First, the difference, to know how much the line moves on each axis.

A - B = (5,0) - (2,15) = (3, -15)

So the line moves 3 units on the x axis and -15 units on the y axis. What's the ratio?

x / y = 3 / -15 = -0.2

Moves -0.2 units on the x axis for every 1 y. Seems right, since x increases as y decreases and vice versa. Conclusion:

f(x) = -0.2y

How far along y do we want to move? Well, to the y position of P. Let's find the difference between B (our starting point) and P (holding our destination y).

P.y - B.y = 10 - 15 = -5

We want to move -5 units on the y axis. So let's multiply that by the ratio we found for x to y.

-5 * -0.2 = 1

Since we started from B we also need to add the x position of B to the number of units to move.

B.x + 1 = 2 + 1 = 3

We conclude that R is at (3, 10). I drew it on paper and it seems to be right.

Condensed into pseudocode:

Code:

diff  = A - B;
ratio = diff.x / diff.y;
dist  = P.y - B.y;
P.x   = B.x + ratio * dist;

[Polly]

If someone could explain a solution to me like I'm 5 that would be great

r.x = a.x+(b.x-a.x)*(p.y-a.y)/(b.y-a.y); // .. with sprinkles on top



No but seriously, it's really simple. You know all coordinates on the Y axis ( a.y = 0, b.y = 15, p.y = 10 ) .. from those values you can calculate that the point is at 2/3 from A and 1/3 from B on the Y-axis. Using that you can get the X-axis value by calculating the X-coordinate that is 2/3 from A ( or 1/3 from B .. doesn't matter ).

[oahda]

Funky. Would never have come up with that one. Cool that multiple solutions are possible.

[Eendhoorn]

I know I can always count on you guys, thanks a bunch!
Princessa's answer seemed very straight forward and logical to me, but I'm having a bit more difficulty understanding why your answer works Polly.

I understand that we can get the ratio of the Y distance by dividing (p.y-a.y) / (b.y-a.y). But how does applying this ratio on the x-axis yield the correct result. I can't quite see the relation between this ratio and the x distance. In my mind it seems coincidental somehow.

I might just need to look at it an other time though when my brain is not fried 

Anyhow, this is what I used it for. The lines indicate the trajectory of the line, and AI can now see where the ball will end up on his y-position, hurray!

[Polly]

But how does applying this ratio on the x-axis yield the correct result. I can't quite see the relation between this ratio and the x distance. In my mind it seems coincidental somehow.

It's not coincidental .. when you draw a diagonal line on a piece of paper and then erase half of it, the remaining diagonal line will be half in width AND height. They are connected ( obviously )

Anyhow, this is what I used it for.

Ehm .. you can do that even simpler though.

[oahda]

Oh, is it looking into mirrors? That's a pretty cool mechanic.

[Eendhoorn]

But how does applying this ratio on the x-axis yield the correct result. I can't quite see the relation between this ratio and the x distance. In my mind it seems coincidental somehow.

It's not coincidental .. when you draw a diagonal line on a piece of paper and then erase half of it, the remaining diagonal line will be half in width AND height. They are connected ( obviously )

Anyhow, this is what I used it for.

Ehm .. you can do that even simpler though.

I believe you :p I'll take another look tomorrow to see if I can grasp it.
I'm curious, what would be the simpler way?

Oh, is it looking into mirrors? That's a pretty cool mechanic.

It's a visualisation of the trajectory of the ball, how it will bounce off the edges of the stage
Here's a gif;

The little blue plus on the red line indicate where the ball will end up at the height (+some spacing) of the AI character;

[oahda]

Oooh! I thought it looked like a giant eyeball when it wasn't in motion. This is neat too, tho!

Is it a Zelda game or does it just look like one a lot?

[Polly]

I'm curious, what would be the simpler way?

The easiest would be to have the play-field set up like this ..



Where the left_wall + ball.radius is located at 0, and the right_wall - ball.radius is located at some positive number.

Then, assuming the ball position and velocity are 2D vectors, you can simply do this to render the entire path ( using pseudo line-rendering functions ).

Code:

beginPath();
moveTo(position);

float s = right / abs(velocity.x) * velocity.y;

position.x = velocity.x < 0 ? 0 : right;
position.y += velocity.x < 0 ? s / (right - position.x) : s / position.x;

lineTo(position);

while(position.y >= 0 && position.y <= top)
{
	position.x = position.x ? 0 : right;
	position.y += s;
	
	lineTo(position);
}

drawPath();

So for the majority of time / lines you're only adding "s" to position.y and toggle position.x between 0 and "right". Can't get much simpler / cheaper. Here's the code in action ..

[oahda]

What are you using to render and make these GIFs and so on so quickly?

[Polly]

What are you using to render and make these GIFs and so on so quickly?

I'm using ZGameEditor. It's kind of like Notepad .. starts up very quickly and you can start using it immediately ( no project wizards or anything ). Also, it's "interactive", which means that you can work on your project while it's running ( no need to compile / build ).

[Leaghorn]

Wouldn't it be easier and more natural looking if the cat just follow the X of the ball?

Cat is not smart enough to guess the trajectory.

Maybe better way would be to just follow the X of the ball with some Lerp.

Code:

Cat.x = Lerp (Cat.x, Ball.x, Value)

Where Value would be how close the ball is to the cat with some random seed so it can loose sometimes. That way when the ball is far (lets say behind the half of the field) the Value would be 0, so cat would not follow it and would just sit and wait for it to get closer (you could add some random movement eventually). When the ball is at Cats.y Vaule would be 1. That way the closer the ball would be to the cat the quicker he would try to catch it. And it would look natural because he would follow the ball, not calculating trajectory (thats one smart cat :D). And he would start follow the ball when it is closer to him, not all the time.

[oahda]

ZGameEditor

Seems useful to test stuff quickly. It doesn't seem to say explicitly anywhere whether it only supports Windows or more systems, tho. How... Windows-centric. In case it only runs on Windows. Do you know?

Cat is not smart enough to guess the trajectory.

You clearly have never played with cats.

[Cheezmeister]

I'm using ZGameEditor. It's kind of like Notepad .. starts up very quickly and you can start using it immediately ( no project wizards or anything ). Also, it's "interactive", which means that you can work on your project while it's running ( no need to compile / build ).

That sounds incredible! Downloading right now. :D

I'm not positive, but I have a sneaking suspicion that Polly's and Princessa's solutions are actually the same equation wearing different clothes, and that one can be reduced to the other with some good ol' 10th grade algebra. I'll leave that as an exercise for the reader.

Also, I'll just leave this here.
https://en.wikipedia.org/wiki/Lerp_%28computing%29

[InfiniteStateMachine]

Not to derail but I just downloaded zgameeditor and this is really cool. Took me 10 seconds from opening it to get stuff drawing on the screen. Great tip Polly!

[Polly]

Took me 10 seconds from opening it to get stuff drawing on the screen.

Copy-paste* the following onto the App.OnLoaded node for vanilla OpenGL API support

Code:

ZZDC<?xml version="1.0" encoding="iso-8859-1" ?>
<ZExternalLibrary ModuleName="opengl32" DefinitionsFile="opengl.txt"/>

*So .. literally select the above text, use Ctrl+C, click on App.OnLoaded in the Project Tree inside ZGE and press Ctrl+V.

[Eendhoorn]

I'm curious, what would be the simpler way?

The easiest would be to have the play-field set up like this ..



Where the left_wall + ball.radius is located at 0, and the right_wall - ball.radius is located at some positive number.

Then, assuming the ball position and velocity are 2D vectors, you can simply do this to render the entire path ( using pseudo line-rendering functions ).

Code:

beginPath();
moveTo(position);

float s = right / abs(velocity.x) * velocity.y;

position.y += velocity.x < 0 ? s / (right - position.x) : s / position.x;
position.y += velocity.x < 0 ? 0 : right;

lineTo(position);

while(position.y >= 0 && position.y <= top)
{
	position.x = position.x ? 0 : right;
	position.y += s;
	
	lineTo(position);
}

drawPath();

So for the majority of time / lines you're only adding "s" to position.y and toggle position.x between 0 and "right". Can't get much simpler / cheaper. Here's the code in action ..

I didn't have any trouble calculating the trajectory of the ball, I just needed to know where it would end up on the Y position of the dog's location   (indicated by the blue cross in the gif)

What are you using to render and make these GIFs and so on so quickly?

For the gameplay stuff I use gifcam.

Wouldn't it be easier and more natural looking if the cat just follow the X of the ball?

Cat is not smart enough to guess the trajectory.

Maybe better way would be to just follow the X of the ball with some Lerp.

Code:

Cat.x = Lerp (Cat.x, Ball.x, Value)

Where Value would be how close the ball is to the cat with some random seed so it can loose sometimes. That way when the ball is far (lets say behind the half of the field) the Value would be 0, so cat would not follow it and would just sit and wait for it to get closer (you could add some random movement eventually). When the ball is at Cats.y Vaule would be 1. That way the closer the ball would be to the cat the quicker he would try to catch it. And it would look natural because he would follow the ball, not calculating trajectory (thats one smart cat :D). And he would start follow the ball when it is closer to him, not all the time.

Yeah I actually calculate both. One where the cat (it's actually a dog :p) follows the ball, and one where he calculates the destination on his Y position based on the trjactory. Then I can lerp between those values to scale difficulty

[Polly]

I didn't have any trouble calculating the trajectory of the ball, I just needed to know where it would end up on the Y position of the dog's location 

You can still get that value using the super-cheap approach i posted* though.

*Spotted a typo ( position.y twice instead of .x & .y ), so i fixed that

[InfiniteStateMachine]

Took me 10 seconds from opening it to get stuff drawing on the screen.

Copy-paste* the following onto the App.OnLoaded node for vanilla OpenGL API support

Code:

ZZDC<?xml version="1.0" encoding="iso-8859-1" ?>
<ZExternalLibrary ModuleName="opengl32" DefinitionsFile="opengl.txt"/>

*So .. literally select the above text, use Ctrl+C, click on App.OnLoaded in the Project Tree inside ZGE and press Ctrl+V.

Ah cool! I was wondering how you were doing that. Thanks!