Physics mask video

index.html

<svg></svg>
<video id="video" autoplay="autoplay" muted="muted" preload="auto" loop="loop">
    <source src="http://mazwai.com/system/posts/videos/000/000/123/original/victor_ciurus--5d_mark_iii_magic_lantern_14_bits_raw_video.mp4?1412890624" type="video/mp4">
    <source src="http://mazwai.com/system/posts/videos/000/000/123/webm/victor_ciurus--5d_mark_iii_magic_lantern_14_bits_raw_video.webm?1412890624" type="video/webm">
</video>

physics-mask-video.markdown

Physics mask video

A Pen by Mikk on CodePen.

License.

script.babel

const {Engine, World, Body, Bodies, Common, Composites, Render, Runner, Events} = Matter;

let w = window.innerWidth,
  h = window.innerHeight,
  engine = Engine.create(),
  runner = Runner.create(),
  world = engine.world;

/*
let render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    pixelRatio: "auto",
    width: w,
    height: h,
    showAngleIndicator: true
  }
});

Render.run(render);
*/
Runner.run(runner, engine);

var stack = Composites.stack(0, -h, 3, 3, 5, 200, function(x, y) {
  /*
  return Bodies.circle(
    x,
    y - h,
    Math.round(Common.random(w*.05, w*.2)),
    {
      //restitution: 0.8
    }
  )
  */
  return Bodies.polygon(x, y, Math.round(Common.random(3, 6)), Common.random(w*.1, w*.15))
});

World.add(world, stack);


function createWalls () {
  let isStatic = true;
  return [
    //Bodies.rectangle(w*.5, 0, w, 50, {isStatic}),
    Bodies.rectangle(w*.5, h+25, w, 50, {isStatic}),
    Bodies.rectangle(w+25, h*.5, 50, h, {isStatic}),
    Bodies.rectangle(-25, h*.5, 50, h, {isStatic})
  ]
}

World.add(world, createWalls());
window.addEventListener('deviceorientation', orient);

function orient(event) {
  var x = event.gamma;
  var y = event.beta;
  var z = event.alpha;

  const scale = 0.09;
  
  if (y !== 0 & y !== null) {
    engine.world.gravity.y = y * scale;
    engine.world.gravity.x = x * scale;  
  }
}

let svg = d3.select('svg')

svg.attr('width', w)
  .attr('height', h)
  .append('rect')
  .attr('x', 0)
  .attr('y', 0)
  .attr('width', w)
  .attr('height', h)

let mask = svg.append('defs')
  .append('mask')
  .attr('id', 'mask')
  .attr('x', 0)
  .attr('y', 0)
  .attr('width', w)
  .attr('height', h)

mask.append('rect')
  .attr('id', 'bg')
  .attr('x', 0)
  .attr('y', 0)
  .attr('width', w)
  .attr('height', h)


Events.on(engine, 'beforeUpdate', () => {
  var boxes = svg.select('defs').select('mask').selectAll("polygon").data(stack.bodies)
  boxes.enter().append("polygon")
  boxes.attr('points', d => {
    let points = ''
    d.vertices.map(vert => {
      points += vert.x+','+vert.y+' '
    })
    return points
  })
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.min.js"></script>

style.scss

html {
  height: 100%;
  overflow: hidden;
  font-weight: 100;
}
body {
  font-family: "Roboto", sans-serif;
  font-size: 35em;
  letter-spacing: -0.03em;
  height: 100%;
  background: skyblue;
}
svg {
  width: 100%;
  height: 100%;
  position: absolute;
  mask rect#bg {
    fill: white;
  }
}
svg > rect {
  fill: white;
  -webkit-mask: url(#mask);
  mask: url(#mask);
}
video {
  position: absolute;
  top: 0%;
  left: 0%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
  overflow: hidden;
}

@media only screen and (max-width: 768px) {
  html {
    font-size: 0.5em;
    font-weight: 400;
  }
}