Question

I’m randomly generating two rectangles, the first rectangle stays where it is but I want to move/animate the second rectangle so that it’s bottom right corner is equalto the position occupied by the top left corner of the first, atm what I’ve basically got is;

if(count != 300)
{
    rect2.X = count + (rect1.X - 100);
    rect2.Y = count + (rect1.Y - 100);
    count +=2
}

This is inside a timer event, but is obviously not quite what I want, I’ve tried multiple variations of the above but none seem to do the job.

I’m sure there’ll be an annoyingly simple answer to this.

Thanks in Advance.

Answer 1

Assuming top left of the screen is {0,0} and bottom right is {screenWidth, screenHeight}
I’m also assuming floating point coordinates here (i.e. Rect.X is a double or float). If they aren’t, you’ll need to do some work in step 2 below to make sure you move an even amount of pixels in each step.

Here’s the basic algorithm, in pseudo code:

1. Calculate final location for your animating rectangles top-left corner: finalPos = {r1.x + r1.width, r1.y+r1.width}
2. Decide how many steps you want, and calculate how far the rectangle should move each step.
   Let’s take 100 steps for example. dx = r2.x - finalPos.x / 100, dy = r2.y - finalPos.y / 100
3. In each timer event, you just add dx and dy to your animating rectangle’s position:

Like so:

if (currentStep < 300)
{
    r2.x += dx;
    r2.y += dy;
    currentStep++;
}
else
{
    // We're done
    timer.Stop();
}

Of course, if you are using a graphical framework to draw stuff, you may already have access to an animation framework that can do the above for you.