What is an efficient way to scale a rectangle (height/width) so that the width is as close as possible to X (without going over) while maintaining aspect ratio?
Consider height/width to be the aspect ratio - you want to increase width so width=X:
Just set height/width = newHeight/X, plug in your value for X and solve for newHeight:
(height/width)*X = newHeight
Depending on whether you need X or newHeight to be an integer, just round as necessary (either up or down depending on your restrictions).
Related
I'm currently trying to make my simple game scale with the resolution. I've noticed though when I change the resolution not everything works out. For instance from the shift from 1280x720 to 1920x1080 the jumping distance changes slightly. The main problem I've noticed is that when I fire a projectile with a velocity. On lower resolutions it seems to travel across the screen significantly faster and I can't understand why as it should scale down with the size of the window. Here is a snipet of the code that fires a projectile:
m = new Box(l.pos.x+Width/32*direction2, l.pos.y-Height/288, Width/64, Height/72, true, 4);
m.body.setGravityScale(0f);
boxes.add(m);
m.body.setLinearVelocity(new Vec2(Width*direction2, 0));
In this scenario m is a box I'm creating. In new Box(spawn x coordinate, spawn y cooridinate, width of box, height of box, is the box moveable, type of box) l.pos.x and l.pos.y are the positions I'm firing the box from. The Height and Width variables are the size of the current window in pixels being updated in void draw(), direction2 is either 1 or -1 depending on the direction in which the character is facing.
Hard to tell how the rest of code affects the simulation without seeing more of it.
Ideally you would want to keep phyics related properties independent from the Processing sketch dimensions in terms of dimensions but maintain proportion so you can simply scale up the rendering of the same sized world. If you have mouse interaction the coordinates would scale as well, but other than the position, the rest of physical proeprties should be maintained.
From what I can gather in your code if Width is the sketch's width you should de-couple that from linear velocity:
m.body.setLinearVelocity(new Vec2(Width*direction2, 0));
you should use a value that you will keep constant in relation to the sketch dimensions.
I want to scale an image to fit or fill certain width while keeping the aspect ratio.
For example, when the server receives 1200x800 image without knowing the image size and I want to scale it down to 300x200 by specifying only width=300.
Note that I would specify either width or height, not both.
Also, I wouldn't want to scale up to make it bigger size, if the original image is small.
resize_to_fit does what I want.
Even though, doc says both width and height are required, you can actually perform scale_to_fit effect by providing either only width or only height to resize_to_fit function.
Is it possible to reduce width and height of fillPatternImage in circle as we wish which is based on radius?
please let me know.
Yes, you can use the fillPatternScaleX and fillPatternScaleY properties to adjust the pattern's scale factor.
I have a set of block objects, and I'd like to set the perspective camera so that their entire width is fully visible (the height will be too big - that's OK, we're going to pan up and down).
I've seen there are a number of questions close to this, such as:
Adjusting camera for visible Three.js shape
Three.js - Width of view
THREE.JS: Get object size with respect to camera and object position on screen
How to Fit Camera to Object
ThreeJS. How to implement ZoomALL and make sure a given box fills the canvas area?
However, none of them seem to quite cover everything I'm looking for:
I'm not interested in the height, only the width (they won't be the same - the size will be dynamic but I can presume the height will be larger than the width)
The camera.position.z (or the FOV I guess) is the unknown, so I'm trying to get the equations round the right way to solve that
(I'm not great with 3D maths. Thanks in advance!)
I was able to simplify this problem a lot, in my case...
Since I knew the overall size of the objects, I was able to simply come up with a suitable distance through changing the camera's z position a few times and seeing what looked best.
My real problem was that the same z position gave different widths, relative to the screen width, on different sized screens - due to the different aspect ratios.
So all I did was divide my distance value by camera.aspect. Now the blocks take up the same proportion of the screen's width on all screen sizes :-)
What happens with the code below is that image width is scaled to 100% as expected and the height also scales as expected keeping the aspect ratio correct. Issue is that there is a margin at the bottom and that seems to be the height of the original contentHeight of the image. How can I get rid of that?
I am using percentages so that it scales when device orientation changes.
backdrop.source = "http://cf2.imgobject.com/t/p/" + "w342" + data.backdrop;
backdrop.scaleMode = "letterbox";
backdrop.horizontalAlign = "left";
backdrop.verticalAlign = "top";
backdrop.smooth = true;
backdrop.percentWidth = 100;
The answer to your question is don't use the letterbox setting. That is going to preserve the aspect ratio and make the black area, hence the name letterbox :)
Try setting scaleMode to zoom instead. As the documentation states, zoom will result in one axis being clipped. This should scale the image, preserve the aspect ratio, but clip some edges of the image to avoid having the black area.
Other solutions to this problem are:
modify the original image outside of Flash
use a mask to achieve similar results that the zoom setting will provide. In this approach you make the image bigger, but then apply a square mask to the image. The mask reveals only the square portion ... clipping what is outside the mask.
(undesirable in most cases) use the scaleMode setting of strectch (and specify both width/height) so that the area is filled, this will not preserve the aspect ratio
PS: There is no way to avoid the black area if the image's aspect ratio is not square. Even with HTML/CSS. This is just math/geometry. The same thing happens in HTML -- the image is either stretched, clipped, or will not fill both dimensions.
[Edit]
PPS: One other idea, if you know the original aspect ratio of the image, is to calculate a new width that will be closest to the desired width, but naturally preserves the width to height aspect ratio.
For example, the width:height ratio is 4:3. Your desired width is 500 pixels. Using cross products you get this:
4 500
- = -
3 x
Using cross products you get the equation:
4x = 3*500
Now solve for x:
x = 3*500/4 = 375
Therefore, if the original aspect ratio is 4:3, you can set a width of 500 and a height of 375 to scale the image and not have any black areas. You can even write code that dynamically calculates the aspect ratio, and applies this logic to scale something nicely. The point is that you have to the respect aspect ratio when scaling the image to avoid the "black" areas.