Controls

  • Enter - Restart the circle packing algorithm.
  • Up, Down - Rotate around X-axis.
  • Left, Right - Rotate around Y-axis.
  • Space - Toggle 2D/3D mode.
  • R - Reset rotation.
  • P - Toggle orthographic or normal perspective.

Parameters

  • Coefficient - Changes rate at which circles shrink. Smaller=slower, Larger=faster.
  • Porportion area - The porportion of the screen area which will be used for the first circle.
  • Max attempts - The max number of times to try inserting a circle before 'giving up'.

About

This demonstrates a circle (or general shape) packing algorithm discussed in a paper by Paul Bourke entitled Filling: A new algorithm for procedural creation of game assets . The basic method is to start with a shape that has an area (a0), then create additional shapes that have an area porportional to the starting area. The porportion is defined by an infinite sequence that converges. An example sequence, and the one used in this example is g(i) = a0 * (1 / ic), where c = the "coefficient" metioned above, i = the ith shape, a0 is the area of the initial shape, and g(i) is the area of the ith shape.

This demo was created by Ben (quillaja) using p5.js. If you find bugs or have questions, please contact him on github. The code is freely available at github as well.