# Thread: [SOLVED] New position on image

1. ## [SOLVED] New position on image

Hi, I'm not very good at Maths, so please be nice, I know the answer I'm trying to reach; Its the equation I'm trying to find:

Below is an image that is going to increase in size:

The image width is 500 and the height is 350. The position of X is
A(100 from the left)
B(46 from the top)

Now when the image size is increased from 500 to 600 wide, the height changes from 350 to 420.

X new Values are:

A(120 from the top)
B(55 from the left)

The question is... If X was anywhere on the page, what is the equation or maths to work out where it is when increasing the image width by N (this case 100).

Many Thanks.

2. All the distances will be scaled by the same amount. Call this scaling factor $\displaystyle \lambda$. So if the original width is 500 and the scaled width is 500+N then you have $\displaystyle \lambda500=500+N$ or by dividing by 500, $\displaystyle \lambda = 1+N/500$. So if X was at a point (a,b), its position on the new image will be $\displaystyle (\lambda a, \lambda b) = (a+{aN\over500},b+{bN\over500})$. Make sense?

3. ## Thanks bit a bit over my head

Thanks for the swift response, however I don't think I can use the upside down Y symbol you used (Im trying to write this in javascript), could you break it down (a and b) for me?

4. Lol. Its called a "lambda" which is what I use for variable names if I'm writing code. Are you a coder? If N is the amount by which the image width is increased, then the point (a,b) will move to the point $\displaystyle ((1+N/500)\cdot a, (1+N/500)\cdot b)$.

Also, have you seen wtfjs ?

5. ## Not seen that

Thanks for you patience, I look into wtfjs - I am a coder, but maths skills are limited; I'm probably trying to punch above my weight with this one, but heres the code I interpreted from yours (didn't work)...

(100 = the increment and 500 the new width...)

var new_x = 100 + (1 + 100 / 500);
var new_y = 46 + (1 + 100 / 500);

I got 101.1666666 and 56.

So close, but I just can't seem to get it - sorry if this is frustrating, if you could re-write the above it would be a great help.

6. Code:
var lambda = 1+500.0/N;
var new_x = lambda*old_x;
var new_y = lambda*old_y;
where N is amount by which the width increased (100 in your case).

wtfjs is a joke btw; you don't actually have to look at it.

7. ## I got 700 not 120?

Instead of getting 120/55 (which i know is correct) I got 700/322. I am a bit stumped by this.

here's my code again below with you structure...

// new_width (this is definitley 600)
// o.zoom_increment is the amount the width increased (100)

var lambda = 1 + new_width / o.zoom_increment;
var xn = lambda * first;
var yn = lambda * second;

Any ideas, my head hurts from all this maths

8. You need to use the old width in the numerator. Or else do

Code:
var lambda = new_width / (new_width-o.zoom_increment);
var xn = lambda * first;
var yn = lambda * second;

9. ## Dude - Your my hero

You are a legend - If I could buy you a beer I would!!!! It works perfectly!

10. ## Going in great, shrinking??

Hi,

Bit cheeky to ask, the code works great when increasing the size, however doesn't work when decreasing the size...

if(way == 'in') {

var lambda = new_width / (new_width - o.zoom_increment);
var xn = Math.round(lambda * first);
var yn = Math.round(lambda * second);

} else {

var lambda = old_width / (old_width - o.zoom_increment);
var xn = Math.round(lambda * first);
var yn = Math.round(lambda * second);

}

The bottom bit is for decreasing the size, I tried using the old values but with no joy.

Was wondering if you could just once more!

11. It should work the same for both increasing and dereasing. For example, if new_width is 250, then o.zoom_increment is -250 and lambda is 1/2, which is what you want right?

If you have the new value and the old value in variables, it would be simpler to do lambda = new_width / old_width;

12. You've done it again, cheers pal! (I tried everything else but that).