Box layout

by Adam Granger

HTML

<div id="page">
</div>

CSS

#page {
  width: 800px;
  height: 800px;
  border: 1px solid red;
}

JavaScript

function BoxLayout (target) {
    var canvas = $("<canvas></canvas>");
    this.width = target.width();
    this.height = target.height();
    canvas.attr({width:this.width});
    canvas.attr({height:this.height});
    target.append(canvas);
    this.context = canvas[0].getContext("2d");
        
    this.render = function() {
        context.clearRect(0, 0, this.width, this.height);        
        for (var i in this.boxes) {
            var box = this.boxes[i];
            this.context.fillStyle   = '#00f';
            this.context.lineWidth = 3;
            this.context.strokeStyle   = '#f00';          

            this.context.beginPath();
            this.context.moveTo(box.anchorX, box.anchorY);
            this.context.lineTo(box.x + box.w / 2, box.y + box.h / 2);
            this.context.stroke();
            this.context.fillRect  (box.x, box.y, box.w, box.h);
        }         
    };
    this.tick = function() {
        for (var i in this.boxes) {
            var boxA = this.boxes[i];
            var dx = 0;
            var dy = 0;
            for (var j in this.boxes) {
                var boxB = this.boxes[j];
                if (boxA != boxB) {
                    var diffX = (boxA.x - boxB.x);
                    var diffY = (boxA.y - boxB.y);
                    var theta = Math.atan2(diffY, diffX);
                    var force = Math.sqrt(diffX * diffX + diffY * diffY);
                    if (force < 100) {
                        force = 100;
                    }                        
                    var forceX = Math.cos(theta) * force;
                    var forceY = Math.sin(theta) * force;
                    dx += forceX;
                    dy += forceY;
                }
            }
            var diffX = (boxA.x - boxA.anchorX);
            var diffY = (boxA.y - boxA.anchorY);
            var theta = Math.atan2(diffY, diffX);
            var distance = Math.sqrt(diffX * diffX + diffY * diffY);
            
            var...