glennw/gist:3435b37650405d0cb33a7397c2e27734

## gistfile1.txt
<!DOCTYPE html>
<html>
  <head>
    <title>matter.js demo</title>
    <style type="text/css">
      #container {
        position: absolute;
        left: 40px;
        width: 800px;
        height: 800px;
      }

      .box {
        position: absolute;
        background: red;
      }

      #fps {
        position: absolute;
        color: blue;
        font-size: 24px;
      }
    </style>
    <script src="https://github.com/liabru/matter-js/releases/download/0.10.0/matter.min.js"></script>
    <script type="text/javascript">
      createRect = function(x, y, width, height, options) {
        var body = Matter.Bodies.rectangle(x, y, width, height, options);

        var container = document.getElementById("container");
        var element = document.createElement("div");

        element.id = "rect_" + body.id;
        element.style.width = width + "px";
        element.style.height = height + "px";
        element.style.position = "absolute";
        element.style.border = "1px solid red";
        container.appendChild(element);

        return body;
      }

      window.onload = function() {
        var filterStrength = 20;
        var frameTime = 0, lastLoop = new Date, thisLoop;

        var fpsOut = document.getElementById('fps');
        setInterval(function(){
            fpsOut.innerHTML = (1000/frameTime).toFixed(1) + " fps";
        },1000);

        var Engine = Matter.Engine,
            Runner = Matter.Runner,
            Composite = Matter.Composite,
            Composites = Matter.Composites,
            Common = Matter.Common,
            World = Matter.World,
            Bodies = Matter.Bodies;

        var engine = Engine.create();
        var world = engine.world;
        var container = document.getElementById("container");

        var count = 0;
        var stack = Composites.stack(20, 0, 20, 16, 0, 0, function(x, y) {

            var wth = 30
            if (count % 40 === 0 || count % 20 === 39) {
                wth = 20;
            }
            count++;

            return createRect(x, y, wth, 40, {
                friction: 1,
                density: 0.1,
                restitution: 0
            });

        });

        World.add(world, stack);

        World.add(world, [
            createRect(400, 800, 900, 20, {
                isStatic: true
            }),
            createRect(0, 500, 20, 600, {
                isStatic: true
            }),
            createRect(800, 500, 20, 600, {
                isStatic: true
            })
        ]);

        var tick = function() {
          var bodies = Composite.allBodies(engine.world);

          for (var i = 0; i < bodies.length; i++) {
            var body = bodies[i];

            var w = body.bounds.max.x - body.bounds.min.x;
            var h = body.bounds.max.y - body.bounds.min.y;

            var e = document.getElementById("rect_" + body.id);
            e.style.left = (body.position.x - 0.5 * w) + "px";
            e.style.top = (body.position.y - 0.5 * h) + "px";
            e.style.transform = "rotate(" + body.angle + "rad)";
          }

          var thisFrameTime = (thisLoop=new Date) - lastLoop;
          frameTime+= (thisFrameTime - frameTime) / filterStrength;
          lastLoop = thisLoop;

          window.requestAnimationFrame(tick);
        }

        requestAnimationFrame(tick);

        var runner = Runner.create();
        Runner.run(runner, engine);
      }
    </script>
  </head>
  <body>
    <div id="fps"></div>
    <div id="container">
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>matter.js demo</title>
	<style type="text/css">
	#container {
	position: absolute;
	left: 40px;
	width: 800px;
	height: 800px;
	}

	.box {
	position: absolute;
	background: red;
	}

	#fps {
	position: absolute;
	color: blue;
	font-size: 24px;
	}
	</style>
	<script src="https://github.com/liabru/matter-js/releases/download/0.10.0/matter.min.js"></script>
	<script type="text/javascript">
	createRect = function(x, y, width, height, options) {
	var body = Matter.Bodies.rectangle(x, y, width, height, options);

	var container = document.getElementById("container");
	var element = document.createElement("div");

	element.id = "rect_" + body.id;
	element.style.width = width + "px";
	element.style.height = height + "px";
	element.style.position = "absolute";
	element.style.border = "1px solid red";
	container.appendChild(element);

	return body;
	}

	window.onload = function() {
	var filterStrength = 20;
	var frameTime = 0, lastLoop = new Date, thisLoop;

	var fpsOut = document.getElementById('fps');
	setInterval(function(){
	fpsOut.innerHTML = (1000/frameTime).toFixed(1) + " fps";
	},1000);

	var Engine = Matter.Engine,
	Runner = Matter.Runner,
	Composite = Matter.Composite,
	Composites = Matter.Composites,
	Common = Matter.Common,
	World = Matter.World,
	Bodies = Matter.Bodies;

	var engine = Engine.create();
	var world = engine.world;
	var container = document.getElementById("container");

	var count = 0;
	var stack = Composites.stack(20, 0, 20, 16, 0, 0, function(x, y) {

	var wth = 30
	if (count % 40 === 0 \|\| count % 20 === 39) {
	wth = 20;
	}
	count++;

	return createRect(x, y, wth, 40, {
	friction: 1,
	density: 0.1,
	restitution: 0
	});

	});

	World.add(world, stack);

	World.add(world, [
	createRect(400, 800, 900, 20, {
	isStatic: true
	}),
	createRect(0, 500, 20, 600, {
	isStatic: true
	}),
	createRect(800, 500, 20, 600, {
	isStatic: true
	})
	]);

	var tick = function() {
	var bodies = Composite.allBodies(engine.world);

	for (var i = 0; i < bodies.length; i++) {
	var body = bodies[i];

	var w = body.bounds.max.x - body.bounds.min.x;
	var h = body.bounds.max.y - body.bounds.min.y;

	var e = document.getElementById("rect_" + body.id);
	e.style.left = (body.position.x - 0.5 * w) + "px";
	e.style.top = (body.position.y - 0.5 * h) + "px";
	e.style.transform = "rotate(" + body.angle + "rad)";
	}

	var thisFrameTime = (thisLoop=new Date) - lastLoop;
	frameTime+= (thisFrameTime - frameTime) / filterStrength;
	lastLoop = thisLoop;

	window.requestAnimationFrame(tick);
	}

	requestAnimationFrame(tick);

	var runner = Runner.create();
	Runner.run(runner, engine);
	}
	</script>
	</head>
	<body>
	<div id="fps"></div>
	<div id="container">
	</div>
	</body>
	</html>