cat bounce

matterjs working

by Nick Hulea

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 id="makeItRainbow" class="makeItRain btn draw-border">Make It Rainbow</button>
<button id="makeItRain" 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;
}

#makeItRainbow {
    position: fixed;
    top: 0;
    left: 0;
    margin: 1rem;
    -webkit-appearance: none;
    border: none;
    outline: none;
    padding: 10px 20px;
    cursor: pointer;
}

#makeItRainbow:hover {
   background: #ccc;
}

#makeItRainbow:active {
   background: #aaa;
}

Babel + JSX

Matter.use('matter-collision-events');
console.log(Matter);
const 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"
];
const rainbow_cats = ["https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/cat_1_red.png", "https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/cat_2_yellow.png", "https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/cat_3_purple.png", "https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/cat_4_green.png", "https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/cat_5_blue.png", "https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/cat_6_orange.png"
];
let Engine = Matter.Engine;
let Render = Matter.Render;
let World = Matter.World;
let Bodies = Matter.Bodies;
let Events = Matter.Events;
let Body = Matter.Body;
let Svg = Matter.Svg;
let Vertices = Matter.Vertices;
let MouseConstraint = Matter.MouseConstraint;
let Mouse = Matter.Mouse;
let engine = Engine.create();
const defaultCategory = 0x0001;
const redCategory = 0x0002;
const greenCategory = 0x0004;
const 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 =...