cat bounce

matterjs svgs test 06/26/2018

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>
<script src="https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/pathseg.js"></script>
<script src="https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/decomp.js"></script>
<button id="makeItRainbow" class="btn">  
<span class="txt anim-text-flow-hover">Make It Rainbow</span>
</button>
<button id="makeItRain" class="btn">
<span class="txt anim-text-flow-hover">Make It Rain</span>
</button>
<svg id="svg" style="display:none;" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 196.3 344" style="enable-background:new 0 0 196.3 344;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
</style>
<path class="st0"...

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)
}

.btn {
    position: fixed;
    top: 0;
    margin: 1rem;
    -webkit-appearance: none;
    border: none;
    outline: none;
    padding: 10px 20px;
    cursor: pointer;
    background: none;
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.5rem;
}

#makeItRain {
  right: 0;
}

#makeItRainbow {
  left: 0;
}

.rainbow-text {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, red), color-stop(16%, orange), color-stop(32%, yellow), color-stop(48%, green), color-stop(60%, blue), color-stop(76%, indigo), color-stop(1.00, violet));
}

/*
 * Animation module with all animation code
 */

.anim-text-flow,
.anim-text-flow-hover:hover {
  /*
   * Animation variables
   */
  $animationSteps: 250;
  $animationDuration: 10;
  $animationElement: span;
  $animationElementsCount: 100;
  $delayBetweenLetters: 0.1;
  /*
   * Elements settings
   */
  #{$animationElement} {
    animation-name: anim-text-flow-keys;
    animation-duration:...

Babel + JSX

Matter.use('matter-collision-events');
console.log(Matter);
let 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 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 svg = 'https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/cat_1_svg-01.svg';
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 Common = Matter.Common;
let Composites = Matter.Composites;
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 getRandomArbitrary(min, max) {
 ...