Matter.js Demo

index.html

<a href="http://brm.io/matter-js/" target="_blank"><h1>MATTER<span id="dot">.</span><span id=js>JS</span></h1></a>
<p>Physics Engine</p>
<a href="https://github.com/liabru/matter-js" target="_blank"><h2>GitHub<sup>➜</sup></h2></a>

matter-js-demo.markdown

Matter.js Demo

A Pen by Blake Sanie on CodePen.

License.

script.js

let Engine = Matter.Engine,
  Render = Matter.Render,
  World = Matter.World,
  Bodies = Matter.Bodies;

let engine = Engine.create();

function init() {
  let numm = Math.random();
  $("canvas").remove();

  let width = $(window).width();
  let height = $(window).height();
  let vmin = Math.min(width, height);

  engine.events = {};
  World.clear(engine.world);
  Engine.clear(engine);

  engine = Engine.create();

  let render = Render.create({
    element: document.body,
    engine: engine,
    options: {
      wireframes: false,
      background: 'transparent',
      width: width,
      height: height
    }
  });

  World.add(engine.world, [
    Bodies.rectangle(width / 2, height + 50, width, 100, {
      isStatic: true
    }),
    Bodies.rectangle(width / 2, -50, width, 100, {
      isStatic: true
    }),
    Bodies.rectangle(-50, height / 2, 100, height, {
      isStatic: true
    }),
    Bodies.rectangle(width + 50, height / 2, 100, height, {
      isStatic: true
    }),
    Bodies.rectangle(width / 2, height / 2, vmin * 0.961, vmin * 0.135, {
      isStatic: true,
      render: {
        fillStyle: "white"
      }
    }),
    Bodies.rectangle(width / 2, height / 4 * 3, vmin * 0.37, vmin * 0.131, {
      isStatic: true,
      render: {
        fillStyle: "white"
      }
    }),
    Bodies.circle(width / 2 - (vmin * 0.182), height / 4 * 3, vmin * 0.065, {
      isStatic: true,
      render: {
      fillStyle: "white"
    }
    }),
    Bodies.circle(width / 2 + (vmin * 0.182), height / 4 * 3, vmin * 0.065, {
      isStatic: true,
      render: {
      fillStyle: "white"
    }
    })
  ]);

  for (let i = 0; i < 150; i++) {
    let radius = Math.round(10 + (Math.random() * vmin / 30));
    /*var color = '#'
    var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
    for (var j = 0; j < 6; j++) {
      color = color + chars[Math.round(Math.random() * 16 - 0.5)];
    }*/
    World.add(engine.world, Bodies.circle(
      Math.random() * width,
      Math.random() * height / 4,
      radius, {
        render: {
          fillStyle: ['#EA1070', '#EAC03C', '#25DDBC', '#007DB0', '#252B7F', '#FF6040'][Math.round(Math.random() * 6 - 0.5)]
        }
      }
    ))
  }

  Engine.run(engine);

  Render.run(render);
  let num = 0;
  function update() {
    engine.world.gravity.x = Math.sin(num / 100);
    engine.world.gravity.y = Math.cos(num / 100);
    num += 1.7;
    idRAF = requestAnimationFrame(update.bind(this));
  }
  update();
}

init();

$(window).resize(function() {
  init();
});

scripts

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

style.css

@import url('https://fonts.googleapis.com/css?family=Quicksand:300,500');

* {
  margin: 0;
  overflow: hidden;
  font-family: 'Quicksand', sans-serif;
}

a {
  color: black;
}

h1 {
  font-weight: 500;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  font-size: 19vmin;
  transform: translateX(-50.3%) translateY(-52%);
  cursor: pointer;
}

#dot {
  color: #EA1066;
  font-family: times-new-roman, serif;
  font-size: 10vmin;
}

#js {
  color: #AAA;
  font-weight: 300;
}

p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + 29.5vmin), calc(-50% - 3.8vmin));
  font-size: 3vmin;
  font-weight: 300;
  width: 12vmin;
  text-align: center;
  color: #777;
  cursor: pointer;
}

h2 {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10vmin;
  font-weight: 300;
  box-sizing: border-box;
  border: 0.4vmin dashed black;
  border-radius: 200px;
  background-color: #EEE;
  padding: 0 6vmin;
  transition: all 0.3s ease;
  cursor: pointer;
}

sup {
  font-size: 6vmin;
}

h2:hover {
  background-color: black;
  border: 0.4vmin dashed white;
  color: white;
}