Equation for a straight line
-
Hi, I'm trying to animate a box moving from point A to point B. I'm using a .Net timer to animate but I'm not sure on the math to get the box moving in a straight line. So far the box finishes moving down before it finishes moving to the right. Point A x=9,y=6 Point B x=291,y=178 I'm not very good at math but I'm thinking the equation should be straight foreward? Thanks in advance.
-
Hi, I'm trying to animate a box moving from point A to point B. I'm using a .Net timer to animate but I'm not sure on the math to get the box moving in a straight line. So far the box finishes moving down before it finishes moving to the right. Point A x=9,y=6 Point B x=291,y=178 I'm not very good at math but I'm thinking the equation should be straight foreward? Thanks in advance.
1. Think about how fast you want the box to go - i.e. how many timer ticks should it take. For example: NumberOfTicks = 10; 2. Look at the coordinates independently. DistanceX = 291 - 9 = 282 DistanceY = 178 - 6 = 172 3. Calculate the step needed in each tick to get there in time. Careful! It may not be precise if you use ints - but that's not a problem: StepX = 282 / NumberOfTicks ~= 28 StepY = 172 / NumberOfTicks ~= 17 4. Change the box position by the given step in each timer tick. Because the steps are rounded down (see step 3) you should also store the end position you want to get to and move the box there in the last step (not too elegant, but it will get the job done without anyone noticing). Sure hope this helps, but seriously if this math is too complex to figure out you've got a long way to go my friend. Best of luck to you.
-
1. Think about how fast you want the box to go - i.e. how many timer ticks should it take. For example: NumberOfTicks = 10; 2. Look at the coordinates independently. DistanceX = 291 - 9 = 282 DistanceY = 178 - 6 = 172 3. Calculate the step needed in each tick to get there in time. Careful! It may not be precise if you use ints - but that's not a problem: StepX = 282 / NumberOfTicks ~= 28 StepY = 172 / NumberOfTicks ~= 17 4. Change the box position by the given step in each timer tick. Because the steps are rounded down (see step 3) you should also store the end position you want to get to and move the box there in the last step (not too elegant, but it will get the job done without anyone noticing). Sure hope this helps, but seriously if this math is too complex to figure out you've got a long way to go my friend. Best of luck to you.
Thanks for the reply. I still run into the problem in my first post. The horizontal movement finishes before the vertical. I ran into this equation for a straight line. y = m*x + b but the speed of the box varies depending on the slope. Can't seem to fix this.
-
Thanks for the reply. I still run into the problem in my first post. The horizontal movement finishes before the vertical. I ran into this equation for a straight line. y = m*x + b but the speed of the box varies depending on the slope. Can't seem to fix this.
-
Thanks for the reply. I still run into the problem in my first post. The horizontal movement finishes before the vertical. I ran into this equation for a straight line. y = m*x + b but the speed of the box varies depending on the slope. Can't seem to fix this.
This is what's called the explicit function for a straight line, meaning that you calculate one coordinate based on the value of the other coordinate. The explicit representation comes with a few shortcomings that can be confusing at times when you deal with 2D geometrical elements. For example you wouldn't be able to draw a vertical line with an equation like what you posted! Also, for near vertical lines you'd have to take care what values of x would produce a valid y - you'll find that most values of x that lie well within the screen corrdinate range will produce y values that are way outside the screen. The implicit representation avoids this confusion, but it is often much easier to use the parametric representation: In this case, you have two points, A and B. The parametric representation of a line through these two points is:
P(t) = A + t*(B-A)
. This equation is in fact a set of equations, referring to the two coordinates, x and y:
P(t).x = A.x + t*(B.x-A.x)
P(t).y = A.y + t*(B.y-A.y)If you implement a function to calculate P(t), using the formulas above, each value of t will yield a point P(t) somewhere on this line. For t==0 you will find that P(0)==A, and for t==1 you will find that P(1)==B. Of course, you have to be careful with these calculations when dealing with pixel coordinates: you have to convert these coordinates to float values first, or else the rounding effects may lead to some unexpected results.
-
This is what's called the explicit function for a straight line, meaning that you calculate one coordinate based on the value of the other coordinate. The explicit representation comes with a few shortcomings that can be confusing at times when you deal with 2D geometrical elements. For example you wouldn't be able to draw a vertical line with an equation like what you posted! Also, for near vertical lines you'd have to take care what values of x would produce a valid y - you'll find that most values of x that lie well within the screen corrdinate range will produce y values that are way outside the screen. The implicit representation avoids this confusion, but it is often much easier to use the parametric representation: In this case, you have two points, A and B. The parametric representation of a line through these two points is:
P(t) = A + t*(B-A)
. This equation is in fact a set of equations, referring to the two coordinates, x and y:
P(t).x = A.x + t*(B.x-A.x)
P(t).y = A.y + t*(B.y-A.y)If you implement a function to calculate P(t), using the formulas above, each value of t will yield a point P(t) somewhere on this line. For t==0 you will find that P(0)==A, and for t==1 you will find that P(1)==B. Of course, you have to be careful with these calculations when dealing with pixel coordinates: you have to convert these coordinates to float values first, or else the rounding effects may lead to some unexpected results.