This algorithm is developed using JavaScript.
When changing the viewport, the algorithm automatically calculates the location of the blocks and displays the updated result on the page
-
Follow the link m-farmaha.github.io/rectangle-packing-algorithm/ or open the
index.htmlfile in your web browser. -
Change viewport
Algorithm Description: The algorithm efficiently arranges rectangular blocks within a 2D container, aiming for the densest placement to optimize space utilization. The algorithm calculates the most optimal order for placing rectangular blocks in a 2D container, ensuring the densest arrangement while minimizing the space occupied. The algorithm accommodates block rotation by 90°, and blocks do not overlap. It calculates the useful space utilization coefficient for the occupied container space.
Block Representation: Each block is uniquely colored, except for blocks of the same size, which share a common color. The color scheme ensures visual distinction between blocks, enhancing clarity in the layout.
Block Indexing: Each block inside the container has its original sequential number (index in the array), providing a clear reference to its initial order.
Viewport Responsiveness: The algorithm dynamically recalculates block positions and updates the display when the container size (viewport) changes. This ensures adaptability to varying viewport dimensions, providing a responsive and visually consistent user experience.
Space Utilization Coefficient: The algorithm calculates the useful space utilization coefficient, representing the ratio of the space occupied by blocks to the total container space. This coefficient is prominently displayed, offering insights into the efficiency of space utilization.
Color Consistency: Blocks of the same size share a common color, fostering a cohesive and visually organized design. This consistent color scheme enhances the user's ability to identify blocks with similar dimensions.
Rotation Capability: Blocks can be rotated by 90°, allowing for flexibility in their orientation within the container. This feature adds versatility to the algorithm, accommodating different block orientations for optimal placement.
Real-time Updates: The algorithm provides real-time updates to the block layout and space utilization coefficient, ensuring a dynamic and interactive user experience.
If you wish to make your own fixes or improvements to the game, you should:
- Clone the repository to your computer.
- Make changes and additions to the source code.
- Test the algorithm to ensure everything works correctly.
- Submit a pull request with your changes.
The "Rectangle packing algorithm" is developed by M-Farmaha in 2024.
This project is distributed under the MIT License.
We recommend using Google Chrome for the best experience when using our app.