javascript - Automatic arrangement of images/rectangles on a canvas with overlapping -
i looking randomly arrange number of images (or simplicity, rectangles) of given sizes on canvas. want these images/rectangles able overlap (edges, sides etc) i.e. don't want image covering image entirely. these images/rectangles parallel x , y axes. also, want images fit canvas area no unused white space.
i came across bin packing, quadtree etc. none of these allow overlaps. have idea how might implemented? or point me towards right direction?
thank :)
assuming conditions specified:
- no unused white space
- axis aligned orientation
- allow margin overlapping
- never cover whole image
we can use bin packing or quadtree algorithms (or whatever), first want manipulate data set.
- loop through list of image dimensions
- decide if image should allowed overlap (for tuning desired output)
- increase dimension data (within margin) used in preferred algorithm(bin-pack/quadtree) (keeping original data well)
- process data chosen algorithm
- sort z order/render order (sort random, sort area, etc)
- render images using original dimension data - sure use origin points @ center of area, not corners
essentially, decide overlap of given image before set arranged.
i can think of 2 limitations:
- the minimum image size based on largest overlap allow.
- this solved sorting largest smallest rendering order.
- depending on how sort images , size of canvas, images may not fill canvas - there may gaps left bin packing.
- this may solvable more complex algorithms - haven't used them enough know.
- you may able scale images fill area - again, don't know enough area.
Comments
Post a Comment