Image wall effects and bin packing

Document directory

• Highlight Animation

Preview: http://ambar.no.de/demos/binpacking/index.html

About

Wiki: bin packing problem

Demo: bin packing

I can see that the original text is lightmap splicing, and CSS sprite automatic processing. With these impressions, I think image display is also one of the purposes.

I think there are two packing problems:

1. Provide a large box with many small boxes. The size of each small box is different. How to put as many boxes as possible.
2. Not limited to the size of a large box, find the most suitable size of a large box, put up a batch of small boxes.

How to do

Data structure definition: each space is used as a node, and the value of a node is defined as a rectangle.

1. The root node is defined as the entire container.
2. Each partition check condition is divided into two nodes based on the size of the target node, that is, the left and right branches of the target node.
3. Repeat the second step to form a tree.

When you want to insert a new block, you can find the matched node in the entire tree.

Each block is also defined as a rectangle, and all blocks are defined as a list:

blocks = [{ w: 300, h: 390 }, { w: 150, h: 195 }, { w: 300, h: 390 }, ]

There are many options for extracting the block to be inserted:
1) width first 2) height first 3) area first 4) large side first 5) random

The processing priority is determined based on the application, and different partition policies can be used in different order.

What I want to do is the image wall, so I chose the random order. In this way, after the page is refreshed, it seems quite new.

Partition Policy

I have observed three algorithms for different partitions:

• Simple-packer

  The target is excluded from the node partition.
  The target area is not included in the node. Here, when only one block is inserted, the partition is only performed once, and there are three nodes in the packer tree. Figure:
  

• Growing-packer

  Use the first inserted square as the root node, and then auto-increment to the bottom or right of it.
  It is not applicable to the case of random generation order. If a large block is behind it, it is discarded directly during the arrangement. Figure:
  

• Bin-packer

  Until nodes are assigned to the target.
  With reference to the implementation of blackpawn, each inserted square must be contained by a node. Each partition is pre-predicted to determine whether the horizontal or vertical partition is used.
  Therefore, when the first square is inserted, there are already five nodes. Figure:
  
  Horizontal
  Vertical

Code

Visualization

It is hard to understand what is not graphical, so I added two visual effects to enhance understanding.

Visualization has two parts: 1) tree shape; 2) highlight partition animation. Click the "Draw Tree" and "highlight block" buttons in the example.

Highlight Animation

Recursively highlight each node in the partitionally ordered sequence. Using jscex, you can simply simulate the sleep effect in the middle. clicking the highlight button will double the highlighting speed.

Draw tree

The drawing tool I used is Rapha ë L, which uses SVG to draw graphics in mainstream browsers. in earlier versions, ie automatically switches to VML to draw graphics.

I came up with two ways to draw:

• One is horizontal tile. When traversing the tree, remember the number of nodes on each layer and then evenly deploy them. This method occupies relatively small screen space, and the figure is subject to point interference:
  
• The second is vertical tile. When drawing the target node, calculate the number of all child nodes, and then offset the target based on the number and parent node.
  

Note: Each section of the tree is highlighted.

Verify

During the test of this specific example, the three modes and strategies are completely different, and the probability of achieving perfect results in their arrangement is also different. The following figure shows the statistics for trying to run 0.1 million times:

Mode time consumption Perfect times/number of attempts bin-packer 947 Ms 93598/100000 growing-packer 993 Ms 29349/100000 simple-packer 753 Ms 25672/100000

To increase the chances of success, you can add some improvements. In my example, the number of blocks is manually defined, so we can define a mode:

patterns = [   { blocks:['300x390x2','150x195x10'], w: 900, h: 585 }]

If the image size and quantity match this mode during image switching, let the machine repeat the layout!

Suppose the probability is. 93598 in perfect order. How many times do I have to try again if there are less than one person looking at million visits?

var prop = function(people,failed,p0) {  var times = 0, p, f;  while(++times){    p = Math.pow(1-p0,times)    if( Math.round( f = people * p )  [8, 0.93598, 0.9999999997178206, 0.2821794342917953]console.log( prop(1e9,1,.93598) )

The result is that as long as you try at most 8 times, this time is negligible for the machine.

Summary

Observe more, find the connection between various problems, and find similar solutions. With a little effort, you can get a fantastic image wall display effect.

Some suitable technologies are also tried in the example to facilitate quick testing and verification.

• Modernizr is used to detect the support of the CSS 3 conversion module. If not, the jquery animation is rolled back.
• Rapha ë L is used for SVG graphics with interaction and animation. The syntax is similar to jquery
• Es 5 Shim makes it easier to write Javascript in earlier versions of IE
• Jscex for highlight blocks, asynchronous Animation
• Aristo topic UI and button style