cat bounce

custom renderer example

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.min.js"></script>
<script src="https://jsbin-user-assets.s3.amazonaws.com/naeluh/matter-dom-plugin.min.js"></script>
<script src="https://jsbin-user-assets.s3.amazonaws.com/naeluh/matter-collision-events.min.js"></script>
<button class="makeItRain btn draw-border">Make It Rain</button>

SCSS

body {
  overflow: hidden;
  margin: 0px;
  width: 100vw;
  height: 100vh;
  background: -webkit-gradient(linear, left top, left bottom, from(#ef31f9), to(rgba(125, 185, 232, 0)));
  background: linear-gradient(180deg, #ef31f9, rgba(125, 185, 232, 0));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ef31f9", endColorstr="#007db9e8", GradientType=0)
}

#app {
  position: relative
}

#app,
body,
html {
  height: 100vh;
  width: 100vw;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

body,
html {
  padding: 0;
  margin: 0;
  overflow: hidden
}

#sketch[data-v-923376ae] {
  /* background: -webkit-gradient(linear, left top, left bottom, from(#ef31f9), to(rgba(125, 185, 232, 0))); */
  background: linear-gradient(180deg, #ef31f9, rgba(125, 185, 232, 0));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ef31f9", endColorstr="#007db9e8", GradientType=0)
}

.makeItRain {
    position: fixed;
    top: 0;
    right: 0;
    margin: 1rem;
    -webkit-appearance: none;
    border: none;
    outline: none;
    padding: 10px 20px;
    cursor: pointer;
}

.makeItRain:hover {
   background: #ccc;
}

.makeItRain:active {
   background: #aaa;
}

Babel + JSX

Matter.use('matter-collision-events');
console.log(Matter);
var cats = ["https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/cat_1.png", "https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/cat_2.png", "https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/cat_3.png", "https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/cat_4.png", "https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/cat_5.png", "https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/cat_6.png"
];
let Engine = Matter.Engine,
  Render = Matter.Render,
  World = Matter.World,
  Bodies = Matter.Bodies,
  Events = Matter.Events,
  Body = Matter.Body,
  Svg = Matter.Svg,
  Vertices = Matter.Vertices,
  MouseConstraint = Matter.MouseConstraint,
  Mouse = Matter.Mouse;
let engine = Engine.create();
var defaultCategory = 0x0001,
  redCategory = 0x0002,
  greenCategory = 0x0004,
  blueCategory = 0x0008;
// INIT
function init() {
  $("canvas").remove();
  let colorOne = '#' + Math.random().toString(16).slice(2, 8).toUpperCase()
  let colorTwo = '#fff'
  let orientation = '180deg'
  document.body.style.backgroundImage = 'linear-gradient('+ orientation + ', ' + colorOne + ', ' + colorTwo + ')';
  let width = $(window).width();
  let height = $(window).height();
  let sx = width >= 414 ? 1 : 0.5
  let sy = width >= 414 ? 1 : 0.5
  let vmin = Math.min(width, height);
  World.clear(engine.world);
  Engine.clear(engine);
  engine = Engine.create({
    positionIterations: 4,
    velocityIterations: 4,
    constraintIterations: 4
  });
  engine.timing.timeScale = 1
  let render = Render.create({
    element: document.body,
    engine: engine,
    setPixelRatio: 'auto',
    options: {
      showAngleIndicator: true,
      showDebug: true,
      wireframes: false,
      background: 'transparent',
      width:...