Math Is Fun Forum
  Discussion about math, puzzles, games and fun.   Useful symbols: √ ∞ ≠ ≤ ≥ ≈ ⇒ ∈ Δ θ ∴ ∑ ∫ π -

Login

Username

Password

Not registered yet?

Post a reply

Go back

Write your message and submit
:) :| :( :D :o ;) :/ :P :lol: :mad: :rolleyes: :cool: | :dizzy :eek :kiss :roflol :rolleyes :shame :down :up :touched :sleep :wave :swear :tongue :what :faint :dunno
Options

Go back

Topic review (newest first)

MathsIsFun
2005-08-18 07:36:57

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

ryos
2005-08-18 01:38:19

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. sad

bogdan
2005-08-18 00:44:00

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

MathsIsFun
2005-08-17 22:10:54

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!

bogdan
2005-08-17 18:27:29

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

MathsIsFun
2005-08-16 20:05:31

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

bogdan
2005-08-16 18:35:51

ok i tought so.
Oh well i have to find a way to find b.

Thanks

Bogdan

mathsyperson
2005-08-16 17:55:44

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.

bogdan
2005-08-16 17:40:20

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

bogdan
2005-08-16 15:57:54

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

Anyway thank for trying to help

Bogdan

wcy
2005-08-13 20:22:56

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

bogdan
2005-08-13 03:48:04

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

mathsyperson
2005-08-13 02:10:21

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.

bogdan
2005-08-13 01:44:10

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

Board footer

Powered by FluxBB