CODEWITHSUNDEEP
javascripthtml5-canvas
PiscesGirl
PiscesGirl

Reputation: 11

Automatic arrangement of images/rectangles on a canvas with overlapping

I am looking to randomly arrange a number of images (or for simplicity, rectangles) of given sizes on a canvas. I also want these images/rectangles to be a able to overlap (edges, sides etc) slightly i.e. I don't want any image covering up another image entirely. These images/rectangles are parallel to x and y axes. Also, I want the images to fit the canvas area completely with no unused white space.

I came across Bin Packing, Quadtree etc. But none of these allow for overlaps. Does anyone have an idea how this might be implemented? Or point me towards the right direction?

Thank you :)

Upvotes: 1

Views: 826

Answers (1)

mike
mike

Reputation: 56

Assuming the conditions specified:

  • no unused white space
  • axis aligned orientation
  • allow a margin for overlapping
  • never cover up whole image

We can use Bin Packing or quadtree algorithms (or whatever), but first you want to manipulate your data set.

  1. Loop through your list of image dimensions
    • Decide if this image should be allowed to overlap (for tuning the desired output)
    • Increase the dimension data (within margin) to be used in preferred algorithm(bin-pack/quadtree) (keeping original data as well)
  2. Process data with your chosen algorithm
  3. Sort the z order/render order (sort random, sort by area, etc)
  4. Render images using original dimension data - be sure to use origin points at the center of the area, not the corners

Essentially, decide the overlap of a given image before the set is arranged.

I can think of two limitations:

  1. The minimum image size is based on the largest overlap you allow.
    • This could be solved by sorting from largest to smallest for the rendering order.
  2. Depending on how you sort the images and the size of the canvas, your images may not fill the canvas - there may be some gaps left by the bin packing.
    • This may be solvable with more complex algorithms - I haven't used them enough to know.
    • You may be able to scale the images to fill the area - again, I don't know enough about this area.

Upvotes: 2

Related Questions