You are not logged in.

- Topics: Active | Unanswered

Pages: **1**

**bogdan****Member**- Registered: 2005-08-02
- Posts: 18

Look at this swf. I used it becuase i think it explains better.

http://www.bogdesigns.com/ex.html

If anyone can help me or give some adivce

Thanks alot

Bogdan

Offline

**mathsyperson****Moderator**- Registered: 2005-06-22
- Posts: 4,900

So, the width is originally 350.65 and the height is originally 263. That means that the width is always (350.65/263) times greater than the height. If the width increases by a certain amount, the height would change by (263/350.65) times that certain amount.

From your animation, the amount the width changes is called a and the amount the height changes is called b.

The relation between these is a=(350.65/263)b and b=(263/350.65)a.

The animation said the height and width at the start, but it later said that they were not known, so just in case these are the wrong heights and widths, I'll generalise. a=(original width/original height)b and b=(original height/original width)a. You said that the height and width were not known, but you also said that all the co-ordinates were known. That means that you can work out the width by x2-x1 and the height by y2-y1. I think that's covered everything.

Why did the vector cross the road?

It wanted to be normal.

Offline

**bogdan****Member**- Registered: 2005-08-02
- Posts: 18

Yep that coverd more then enough.

I said that the width and height are not know because it will be a rectangle like the ones to select the icons etc. And at first i said them because i wanted to be more concrete.

But this helps alot.

Thank you very much

Bogdan

Offline

**wcy****Member**- Registered: 2005-08-04
- Posts: 117

visit http://www.geocities.com/chengyuanwu

it has a shrinking thingy that is similar

i used this code:

var shrinkspeed=0.99;

document.gate.height*=shrinkspeed

document.gate.width*=shrinkspeed

gateheight*=shrinkspeed

gatewidth*=shrinkspeed

document.gate.style.posLeft+=6

document.gate.style.posTop+=3

shrinkspeed-=0.001

so basically, it shrinks less and less as time progresses

Offline

**bogdan****Member**- Registered: 2005-08-02
- Posts: 18

Thank you wcy but i don't think that will help you.

Anyway thank for trying to help

Bogdan

Offline

**bogdan****Member**- Registered: 2005-08-02
- Posts: 18

Is there a way to make it with out using the other variable in the formula? I mean for example in a=(width/height)b is there a way to make this formula without b ?

http://www.bogdesigns.com/sel.html this is the commponent i need it in. Click and drag the mouse. You see a rectangle chanching dimension according the mouse position. Well i need it to constrain proportions and it's final dimenions from top left of the screen to bottom right is 800x600

Bogdan

*Last edited by bogdan (2005-08-15 19:55:40)*

Offline

**mathsyperson****Moderator**- Registered: 2005-06-22
- Posts: 4,900

I don't think so. If you didn't need b to calculate a then b could take any value and a would still work out to be the same thing, so obviously the proportions would be lost.

Why did the vector cross the road?

It wanted to be normal.

Offline

**bogdan****Member**- Registered: 2005-08-02
- Posts: 18

ok i tought so.

Oh well i have to find a way to find b.

Thanks

Bogdan

Offline

**MathsIsFun****Administrator**- Registered: 2005-01-21
- Posts: 7,626

bogdan wrote:

Click and drag the mouse. You see a rectangle chanching dimension according the mouse position. Well i need it to constrain proportionsand it's final dimenions from top left of the screen to bottom right is 800x600

To contrain proportions, can't you just say that b = (800/600) * a ?

My first attempt at programming this would be to track the mouse, and as the user moves his mouse up, down, left or right, you will need to calculate two different sizes and pick the smallest (I think that would look most natural, but you may find otherwise).

This is just straight from my fingers, and may be wrong, but is the start of an idea:

Δx = x1-x0

Δy = y1-y0

if ( Δx > (800/600) * Δy ) { // Δx too big

Δx = (800/600) * Δy

} else {

Δy = (600/800) * Δx

}

Example: Rectange starts at (100,100) then user drags his mouse to (210,200):

Δx = (210-100) = 110

Δy = (200-100) = 100

Δx = 110 is less than (800/600) * Δy = 133.3, so:

Δy = (600/800) * Δx = 82.5

Result:

Δx = 110

Δy = 82.5

"The physicists defer only to mathematicians, and the mathematicians defer only to God ..." - Leon M. Lederman

Offline

**bogdan****Member**- Registered: 2005-08-02
- Posts: 18

But doesn't a or Δy mean the value that x2 changed. So i think it would be an new x3-x2.

example:

It starts at (100,100) user moves the mouse to (200,210) and moves again to (250,270)

Δx = 250-200

Δy = 270-210

The rest oif the part is how i thinked and after i find Δx Δy i need to add or reduce them from the previous x and y value

Isn't this how it should be?

Bogdan

Offline

**MathsIsFun****Administrator**- Registered: 2005-01-21
- Posts: 7,626

If the user moves again to (250,270) and is still dragging, then always refer to the *original* point (100,100), so you would have:

Δx = (250-100) = 150

Δy = (270-100) = 170

Δx = 150 is less than (800/600) * Δy = 226.7, so:

Δy = (600/800) * Δx = 112.5

Just keep recalculating with respect to the original (x,y) [when the user first left-clicked] until the user lets go of the mouse button.

All I can say is: that would be the first bit of code I would try, then based on how it behaved I would know what to do next!

"The physicists defer only to mathematicians, and the mathematicians defer only to God ..." - Leon M. Lederman

Offline

**bogdan****Member**- Registered: 2005-08-02
- Posts: 18

If it should refer to the original point then it should not be so hard in this case what you said.

I'll try it and let you know

Bogdan

Offline

**ryos****Member**- Registered: 2005-08-04
- Posts: 394

Maths - I may be reading your code wrong, but I don't think that's quite the effect he was looking for.

?x = 150 is less than (800/600) * ?y = 226.7, so:

?y = (600/800) * ?x = 112.5

In order to constrain the proportion to 4:3, you need to change one side in proportion to the side whose delta is greater. That way, the user's mouse stays connected with at least one side of the rectangle. So:

if (deltaX > deltaY) {

deltaX = (3/4) * deltaX

}

else {

deltaX = (4/3) * deltaY

}

However, that algorithm falls down when the user drags the mose above or to the left of the top left corner of the rectangle, since the deltas become negative. So, we need to work in terms of the coordinates of the corners, instead of the width/height of the rectangle.

Declare variables (xTL, yTL); (xBR, yBR); to hold the coordinates of the top left and bottom right corners of the rectangle. xM and yM refer to the position of the mouse. The deltas will also make an appearance.

if (xM > xBR) {

deltaX = xM - xBR;

deltaY = yM - yBR;

if (deltaX > deltaY) { xBR = xM; yBR = (3/4) * xM; }

else { xBR = (4/3) * yM; yBR = yM; }

if (yM < yTL) { //The user is above the top left; invert!

yBR -= 2 * (yBR - yTL);

}

}

if ((xM < xBR) && (yM > yBR)) {

//The user is below and to the left of the bottom right

//Adjust yBR and xBR accordingly, and

//make sure to check for the user being to the left of xTL

}

And keep going until you've covered every possible situation. Sorry I ran out of time and couldn't finish it.

El que pega primero pega dos veces.

Offline

**MathsIsFun****Administrator**- Registered: 2005-01-21
- Posts: 7,626

That might be a better solution, ryos, good contrib.

"The physicists defer only to mathematicians, and the mathematicians defer only to God ..." - Leon M. Lederman

Offline

Pages: **1**