Website layout with Matter.js

Example of relative mapping from a 100x100px 2D physics world to DOM elements.

by mika i.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.8.0-alpha/matter.min.js"></script>
<div class="block small">Made with <a href="http://brm.io/matter-js/">Matter.js</a></div>
<img class="block" src="http://i.imgur.com/Pg1W6QX.jpg"/>
<div class="block">:)</div>
<div class="block">It's HTML5!!</div>
<div class="block share"><a href="https://twitter.com/intent/tweet?screen_name=michael_iriarte" class="twitter-mention-button" data-related="michael_iriarte">Tweet to Mika</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></div>
<div id="debug"><p>Debug:</p></div>

CSS

body{     font: small arial,sans-serif;
    margin:0; font-size:16px; font-weight:100; color:white;
    padding:0; background: #fafafa;
}
a { color:red; background: #fafafa; text-decoration:none;}
canvas {
    position:absolute; top:0;  left:0; z-index:10;
    opacity:.1;
}
canvas:hover {
    opacity:1; 
}
.block {
    border:1px solid beige;
    display:block;
    background:blue;
    text-align:center;
    min-width:50px;
    max-width:150px;
    height:auto;
    z-index:1;
    position:absolute;
}
div.block { padding:10px; }
div.block.share { 
    padding:0;border:none;
    max-width:240px;padding-top:1px;height:22px;
    background:transparent;
}
#debug p { position:absolute;font-style: oblique;line-height:14px;margin:0; padding:0; color:red; font-size:10px; }
.block.small { background:gold; }

JavaScript

/** Set up relative positions and scales **/
var VIEW = {};
VIEW.SAFE_WIDTH = 100;
VIEW.SAFE_HEIGHT = 100;
VIEW.scale = Math.min(window.innerWidth / VIEW.SAFE_WIDTH, window.innerHeight / VIEW.SAFE_HEIGHT);
VIEW.width = window.innerWidth / VIEW.scale;
VIEW.height = window.innerHeight / VIEW.scale;
VIEW.centerX = VIEW.width / 2;
VIEW.centerY = VIEW.height / 2;
VIEW.offsetX = (VIEW.width - VIEW.SAFE_WIDTH) / 2 / VIEW.scale;
VIEW.offsetY = (VIEW.height - VIEW.SAFE_HEIGHT) / 2 / VIEW.scale;

// Matter.js module aliases
var Engine = Matter.Engine,
    World = Matter.World,
    Bodies = Matter.Bodies;

// create a Matter.js engine
var engine = Engine.create({
    render: {
        element: document.getElementById("debug"),
        options: {
            width: 100,
            height: 100,
            background: '#fafafa',
            wireframeBackground: '#222',
            hasBounds: false,
            enabled: true,
            wireframes: true,
            showSleeping: true,
            showDebug: false,
            showBroadphase: false,
            showBounds: false,
            showVelocity: false,
            showCollisions: false,
            showAxes: false,
            showPositions: false,
            showAngleIndicator: false,
            showIds: false,
            showShadows: false
        }
    }
});

var ground = Bodies.rectangle(50, 350, 300, 500, {
    isStatic: true
});

// add all of the bodies to the world
World.add(engine.world, [ground]);

// run the engine
Engine.run(engine);

var bodiesDom = document.querySelectorAll('.block');
var bodies = [];
for (var i = 0, l = bodiesDom.length; i < l; i++) {
    var body = Bodies.rectangle(
        VIEW.centerX,
        20, 
        VIEW.width*bodiesDom[i].offsetWidth/window.innerWidth, 
        VIEW.height*bodiesDom[i].offsetHeight/window.innerHeight
    );
	bodiesDom[i].id = body.id;
    bodies.push(body);
}
World.add(engine.world, bodies);


window.requestAnimationFrame(update);
function update() {
  ...