I love math, but I've been banging my head on this for a while.
I'm trying to fill a non square space with in HTML5 canvas with squares. I know the container width (W) and height (H). And I know the number of squares to use (n)
But the size of the square is what were trying to figure out. And how to draw it then. The squares should be just big enough to cover all the space, but it doesn't have to be sqrt(n) / sqrt(n). It should fill as much space as possible.
Any ideas on where to look to solve this?
Thanks!
A first estimate would be dividing the area W*H by the number of squares n. That will give you the area for each square, and taking the square root of that area will give you its length.
But that only works in cases where the rectangle can be exactly filled by these squares. If you might need some overlap beyond the rectangle, then you might have to adjust either the lengths or the number of squares. So suppose you want to cover your rectangle (i.e. fill a slightly larger rectangle) with no more than n squares, choosing the squares as small as possible under these circumstances. Do the above computation. Suppose that tells you that you'll need 3.75 rows and 6.23 columns of squares. Then you know that more rows or columns will require more than n squares. So you'll have to assume 3 rows and 6 columns. You can compute square lengths of H/3 and W/6 and take the larger of these.
Your scenario often is unsolvable.
For example, consider a 2 x 3 area. You can't fit either 5 or 7 squares into this area.
Related
My question is this: in a div (example height 500px, width 500px) if i insert two images of greater width than the div, one of the two is placed in the row below. But if I then insert a third image of reduced dimensions that can fit in the first line instead it is placed after the second image. How can i position the images according to the space available in the div? so that the large images will be placed in another row while the smaller ones will occupy the spaces left free. I should do it without manually changing the order of the images in the html. One last thing, the images must all be merged without spaces. thanks to those who will answer me
This is quite simple in javascript/jquery if its worth the trouble. You can get the width of all the images and then add them up and index them then math >500... jquery target the images loop through them with an each then logic and indexing--image1 width=300 image2=300 image 3 = 100, image4 = 100...
Once theyre all indexed if total < 500 then next kind of thing. If you know jquery and js this should make sense to you, if not, you probably wont be able to write it and maybe should move on.
is there a simple way to fill two columns of width 50% each with photos, by always adding the next photo in the column that has more blank space?
Photos have various dimensions but should fit the width columns.
I can't give you a more in-depth answer without a code example or more information about context, but the crucial pieces of information you need are the width of each column in pixels, and the width of elements in the lowermost row in those columns. This is assuming you're stacking from left-to-right and then moving downward.
There are various functions to determine element width using JavaScript.
I'm having troubles achieving my designers goal of a fluid picture grid, but based on rows of equally high pictures, not columns of equal width which everyone seems to be so fond off.
here's he design:
https://dl.dropboxusercontent.com/u/7187819/Capture.PNG
here's the point where i got stuck:
http://jsfiddle.net/EwTjD/1/
my goal is a fluid picture-grid that scales with the map next to it when you resize the browser.
I tried background-image first, but that got me stuck with a height that didn't scale. And to be able to use transform i got to use position:absolute, which messes up my floating img's...
any help? :)
ps: this should be achieved without Javascript
im going to start charging for doing peoples work. lol.
you need to set static heights if you want them to line up horizontally.
in your design example, those pictures sizes where carefully calculated. u need to take into account the amount of padding, add up how much padding space will be used, and then subtract that from the total amount of space u got. then u can divide that amongst the images
I have a report with has 2 rectangles side by side. I want to scale both of the same to the same size as when the number of rectangles increase.
How do I scale both of them equally as the number increases even if data in the Rectangles in not displayed(Null Values)
ScreenShot Below
Modified the "CanGrow" and "CanShrink" properties to "false" in All the textbox in both 2 rectangles
CanGrow=False
CanShrink=False
This should work.
I would like to accomplish two things with this:
Select (any) cell from a grid, and give the 'bands' of neighboring cells an ever increasing value (in this example 1 -5)
From the selected cell, select the next cell in a spiral fashion as show in blue, also accounting for if the 'route' leave the grid.
How would I go about this?
From your picture, you don't actually have to do it in spiral. The picture just shows, so to say, concentric circles (or, rather, squares).
You can calculate the next concentric square easily by subtracting or adding one to left/top or right/bottom edge coordinate correspondingly.