cats cats cats

cat matter.js

by Nick Hulea

HTML

<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/gsap/latest/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.8/pixi.min.js"></script>
<div id="engine"></div>
<!--
<img id="cat" class="physics-element" src="https://raw.githubusercontent.com/naeluh/cat/matter-dev/src/assets/cat_1.png">
<img class="physics-element" src="https://raw.githubusercontent.com/naeluh/cat/matter-dev/src/assets/cat_2.png">
<img class="physics-element" src="https://raw.githubusercontent.com/naeluh/cat/matter-dev/src/assets/cat_3.png">
<img class="physics-element" src="https://raw.githubusercontent.com/naeluh/cat/matter-dev/src/assets/cat_4.png">
<img class="physics-element" src="https://raw.githubusercontent.com/naeluh/cat/matter-dev/src/assets/cat_5.png">
<img class="physics-element" src="https://raw.githubusercontent.com/naeluh/cat/matter-dev/src/assets/cat_6.png">
-->

SCSS

body{
	background:black;
}
#engine{
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	z-index: 1;
	canvas{
		max-width: 100%;
		min-width: 100%;
		max-height: 100%;
		min-width: 100%;
	}
}
#cat{
	position:fixed;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}

Babel + JSX

function setupLogo() {
  var cats = [
    "https://raw.githubusercontent.com/naeluh/cat/matter-dev/src/assets/cat_1.png",
    "https://raw.githubusercontent.com/naeluh/cat/matter-dev/src/assets/cat_2.png",
    "https://raw.githubusercontent.com/naeluh/cat/matter-dev/src/assets/cat_3.png",
    "https://raw.githubusercontent.com/naeluh/cat/matter-dev/src/assets/cat_4.png",
    "https://raw.githubusercontent.com/naeluh/cat/matter-dev/src/assets/cat_5.png",
    "https://raw.githubusercontent.com/naeluh/cat/matter-dev/src/assets/cat_6.png",
  ];
  sW = $(window).width();
  sH = $(window).height();
  var Engine = Matter.Engine,
    Composites = Matter.Composites,
    Runner = Matter.Runner,
    MouseConstraint = Matter.MouseConstraint,
    Mouse = Matter.Mouse,
    Events = Matter.Events,
    World = Matter.World,
    Common = Matter.Common,
    Composite = Matter.Composite,
    Constraint = Matter.Constraint,
    Render = Matter.Render,
    Body = Matter.Body,
    Bodies = Matter.Bodies;
  var engine = Engine.create($('#engine'));
  var render = Render.create({
    element: $('#engine')[0],
    engine: engine,
    options: {
      width: sW,
      height: sH,
      showAngleIndicator: false,
      showCollisions: false,
      showVelocity: false,
      wireframes: false,
      background: 'transparent'
    }
  });
  Render.run(render);
  var top = Bodies.rectangle(sW, -50, sW * 2, 100, {
    isStatic: true,
    restitution: 0,
    friction: 0,
    airFriction: 0

  });
  var right = Bodies.rectangle(sW + 50, sH / 2, 100, sH * 3, {
    isStatic: true,
    restitution: 0,
    friction: 0,
    airFriction: 0
  });
  var bottom = Bodies.rectangle(sW, sH + 50, sW * 2, 100, {
    isStatic: true,
    restitution: 0,
    friction: 0,
    airFriction: 0
  });
  var left = Bodies.rectangle(-50, sH / 2, 100, sH * 3, {
    isStatic: true,
    restitution: 0,
    friction: 0,
    airFriction: 0
  });
  var cArr = [];
  cats.forEach((i, v) => {
    cArr[v] = Bodies.circle(sW / 2,...