Home/ Questions/Q 7846291
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T17:32:07+00:00

Note: This is not for a webpage, it is a simple program that holds

  • 0

Note: This is not for a webpage, it is a simple program that holds a set of images and will randomly pick a number of images and display them on the screen. Imagine working with an image editor and manually positioning imported images on the canvas.

I am having difficulty coming up with a way to position a set of arbitrary images on a screen of fixed dimension (it’s just a window)

So for example, if I have one image, I would probably just position it in the center of the screen.

          |

If I have two images, I would try to place them in the center of the screen, but then spread them apart horizontally so that they look centered relative to each other and also the screen.

     |          |

But what if one image is larger than the other two? I might have something like

    |-----|

  |         |

Similarly, maybe I have two larger ones and two smaller ones

|-----|   |-----|

  |         |

So that the large one appears “in the back” while the small ones are up front.

It is inevitable that some images will end up covering up parts of other images but the best I can do is try to make it as orderly as possible.

I can quickly grab the dimensions of each image object that is to be drawn, and there is a limit on how many images will be drawn (from 1 to 8 inclusive).

Images can be drawn anywhere on the screen, and if any part of the image is outside of the screen those parts will just be cut off. All images have dimensions smaller than the dimensions of the screen, and are typically no bigger than 1/4 of the entire screen.

What is a good way to approach this problem? Even handling the base cases like having two images (of possibly different sizes) is already pretty confusing.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could treat this as the 2D bin packing problem, which will optimise for non-overlapping rectangles in a “compact” way, though aesthetics won’t be a consideration.

    If you want to roll your own, you could try placing all images on the canvas on a grid, with the centre-to-centre spacing being large enough that no images overlap. Then “squash” the images closer together, left to right and top to bottom, to reduce the amount of whitespace.

    • 0