Win a copy of Java EE 8 High Performance this week in the Java/Jakarta EE forum!
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
Sheriffs:
Saloon Keepers:
Bartenders:

# Moving Shapes between two Points

Ranch Hand
Posts: 209
Before I tell you my problem let me tell you guys that this is NOT an assignment as I am on my holiday also.
I wanted a program where a user has to click two points on an a frame then the program moves the particular Shape back and forth between these two points.
See, I thought like mad for the logic but couldn't think of it. I don't want the program from you guys. All I want is a hint that will take me in the right direction. I thought of finding the "Equation of a Straight Line" for these two points and then doing something.

Ranch Hand
Posts: 263
Shyam,

You are on the right track. You will need to get the coordinates of the two points clicked. Solve the equation Y = mX + b for the two points. Then position you shape at the first point, increment Y or X by a small amount, solve for the corresponding X or Y and then draw your shape at the new coordinate and repaint. Continue doing this until your X and Y equal the end point selected.

Once you get some code written, post what you have and we'll help you flesh it out.

Ranch Hand
Posts: 209
I can't clearly remember the formula for "Equation of A Straight Line". is it something like:
(y2-y1)/(x2-x1) = (y-y1)/(x-x1)

(instanceof Sidekick)
Ranch Hand
Posts: 8791
Where the animation approach differs from straight geometry is the need to make discrete movements, not the theoretical smooth line of infinetly small points.

Do you want to move by a given step size or by a given number of steps? Pick one, and decide how much X delta and Y delta you will apply in each step. Recompute the position for each step.

BTW: In another thread the other day someone found that incrementing X and Y from the current position to the next position tended to multiply any rounding errors. If you're a little bit off right now you may be further off on the next step. So you might want to compute your current position relative to the original position or target position each time rather than relative to your immediate prior position.

Whew. Lots of words. Lemme know if that helps!

Ranch Hand
Posts: 1149
9

Originally posted by Shyam Murarka:
I can't clearly remember the formula for "Equation of A Straight Line". is it something like:
(y2-y1)/(x2-x1) = (y-y1)/(x-x1)

A few things:
• That equation is right. Solving for y you get y = ((y2-y1)*(x-x1)/(x2-x1))+y1
• But what happens if you have a vertical path (x1==x2)? The above equation would give you a divide-by-zero.
• You could use parametric equations to avoid that divide-by-zero problem AND to get the shape to move smoothly regardless of the slope of the line:
• Pick some constant, s, which is the speed the shape moves in pixels per redraw.
• Use a new variable, z, which denotes the number of redraws from point1.
• Figure out the limits for z. z1=0; z2=sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2))/s.
• In a loop where z goes from z1 to z2 (in increments of 1), calculate x=((x2-x1)*(z-z1)/(z2-z1))+x1 and y=((y2-y1)*(z-z1)/(z2-z1))+y1
• Draw your shape at x,y.

• I THINK those equations are right; feel free to check my math.

I hope this helps.

Ryan
[ May 05, 2005: Message edited by: Ryan McGuire ]

Ranch Hand
Posts: 209
Thank you very much for your posts. I didn't understand most of the equations but I will soon be trying it out and checking whether it works.
And Stan, I think I will be trying to move the shape by a given step size.

Stan James
(instanceof Sidekick)
Ranch Hand
Posts: 8791
It can be as simple as:

I left out checking to see if you went past the target. You might adjust the deltas so you hit the target exactly.

Ranch Hand
Posts: 209
Hey Stan you were right the shape goes past the target. Is there any way I can post you my work because my full program comprises of 3 classes and 1 interface so copying and pasting it here is out of question.
I have another problem in that program. Whenever I select an item from the combo box the ItemEvent gets fired twice.
Please tell me how to post the programs to you.

Ranch Hand
Posts: 209
My Special Thanks to Stan James and Ryan McGuire for helping me out by posting their equations. It was really helpful. Now I'll provide a part of the program for other people who come by this forum:

Even I am not sure how I managed it but I will surely try to understand my own code.

Stan James
(instanceof Sidekick)
Ranch Hand
Posts: 8791
Hey, glad you got that going. This kind of puzzle is great fun and a cool way to learn. You might try moving in squares or circles or other variations on the theme just to see what stays the same and what changes.

What have you tried to keep x from incrementing past the target?

Ranch Hand
Posts: 209
Stan, my program already has the option of switching between shapes dynamically so it works on other shapes.
I'll try to explain what I have done:
• I kept a fixed value for "deltax".
• Then I calculated the displacement that needed to be covered in terms of x only. Suppose "distancex" (x2-x1)
• Then I divided "distancex" by "deltax" which resulted in the number of "steps" needed to be looped.
• Obviously the number of "steps" needed for covering the distance of y. Suppose distancey. (y2-y1) should also be same. So I divided "steps" by "distancey" to get "deltay".
• While running in a for loop keep adding "deltax" and "deltay" to the original values of x and y respectively.

• (Note: The "deltax" and "deltay" have to be multiplied by current "StepNo" If StepNo exceeds "steps" set it back to 0.)

Hope you understand my poor explanation.

Ryan McGuire
Ranch Hand
Posts: 1149
9

Originally posted by Shyam Murarka:

...
float distancex = (x2-x1);
float distancey = (y2-y1);
float deltax = 0.5f;
if(x2<x1) deltax = -deltax;
float steps = distancex/deltax;
float deltay = distancey/steps;
...

What values are assigned to each variable if x2==x1? What happens in the last line quoted here?

A less severe problem: If x2 == x1+1 but y1 and y2 are really far apart, you'll get only a couple "frames" of animation with the shape moving really far in each one, right?

Can you think of a way around these problems?

Ryan

Ranch Hand
Posts: 209

What values are assigned to each variable if x2==x1?

• [list]distancex : = 0.0
• distancey : = 84.0
• deltax : = 0.5
• deltay : = Infinity
• steps : = 0.0[list]

• Uh-oh! I guess I made a goof-up there. :roll:
Anyways, it can be rectified by using the following code:

Ryan Thanks a lot for pointing that out.

What happens in the last line quoted here?

Originally posted by Shyam Murarka:

...
float distancex = (x2-x1);
float distancey = (y2-y1);
float deltax = 0.5f;
if(x2<x1) deltax = -deltax;
float steps = distancex/deltax;
float deltay = distancey/steps;

The variable deltax[b] is for moving the shape horizontally only. And [b]deltay helps in moving the shape vertically. Together they make the shape move in the required direction.

A less severe problem: If x2 == x1+1 but y1 and y2 are
really far apart, you'll get only a couple "frames" of
animation with the shape moving really far in each one, right?

Can you think of a way around these problems?

Did you mean fast or far? yes the animation oves really fast. And if you meant far I don't know about that because it moves in the correct path.

I hope you benefit from my useless explanations as I benefited from your good explanations. Huh!

Ryan McGuire
Ranch Hand
Posts: 1149
9

Originally posted by Shyam Murarka:

Did you mean fast or far? yes the animation oves really fast. And if you meant far I don't know about that because it moves in the correct path.

I meant the shape moves pretty "fast" or "far per frame".

My point was that if firstpoint is (0,0) and secondpoint is (1,100), distancex==1, deltax==.5, steps==2, and deltay=50. Assuming stepNo starts at 0 and the shape is already drawn at firstpoint, you'll get one redraw at (0, 50) when stepNo is incremented to 1. The next time through, stepNo will be incremented to 2 and immediately reset to 0. This will cause your shape to be drawn back firstpoint again. The shape never made it past the half-way point.

One quick fix would be to change your stepNo reset condition from (stepNo>=steps) to (stepNo > steps). At least that way the shape would show up at three points: (0,0), (0, 50) and the destination of (1, 100).

Contrast that three-frame result to the result when firstpoint is still at (0,0) but secondpoint is at (100, 1). In this new case, you'll see 200 (or 201, if you implement the quick fix) frames of animation per repeat cycle.

How about going from (0,0) to (71, 71), which is also a path that's about 100 pixels long? You'll get 142 (or 143) frames per cycle.

If the program as it stands, with the vastly different distances per frame, is good enough to satisfy yourself for a holiday programming exercise, then it looks like you've pretty much got it. However, if you want to even out the movement speed, regardless of the slope of the path, then you may want to look back at what I wrote about using parametric equations in my first message in this topic.

I hope this helps.

Ryan

Ranch Hand
Posts: 209

One quick fix would be to change your stepNo reset
condition from (stepNo>=steps) to (stepNo > steps). At least
that way the shape would show up at three points:
(0,0), (0, 50) and the destination of (1, 100).

Ryan, Thanks very much for the above tip.

You are right the motion of the shape is not uniform. Its a real problem. About the equation that you gave before, I gave a great deal of thought to it but couldn't figure it out but now that my understanding of these equations has increased it's time for me [i]to go back to them once again[i].

 Don't listen to Steve. Just read this tiny ad: The WEB SERVICES and JAX-RS Course https://coderanch.com/t/690789/WEB-SERVICES-JAX-RS