BALLS&GRAVITY

balls-gravity.markdown

BALLS&GRAVITY

A Pen by Marco Dell'Anna on CodePen.

License.

index.html

<div class="title">
  <h3>PLASM.it - 2017</h3>
  <h1>BALLS<span>&</span>GRAVITY</h1>
  <h3>Drag to interact</h3>
</div>
<div class="more-pens">
  <a target="_blank" href="https://codepen.io/plasm/" class="white-mode">VIEW OTHER PENS</a> 
  <a target="_blank" href="https://codepen.io/collection/nZpPbz/" class="white-mode">VIEW OTHER PARTICLES</a>
</div>

script.babel

let Engine = Matter.Engine,
    Render = Matter.Render,
    World = Matter.World,
    Mouse = Matter.Mouse,
    Bodies = Matter.Bodies,
    Common = Matter.Common,
    Vertices = Matter.Vertices,
    Svg = Matter.Svg,
    Constraint = Matter.Constraint,
    Composites = Matter.Composites,
    MouseConstraint = Matter.MouseConstraint;

  // create an engine
  let engine = Engine.create();
  let idRAF = null;
function init(){
  let numm = Math.random();
  $("canvas").remove();
  
  cancelAnimationFrame(idRAF);
  let width = $(window).width();
  let height = $(window).height();
  let offset = -1;
    // module aliases
  
  engine.events = {};
  World.clear(engine.world);
  Engine.clear(engine);
  
  engine = Engine.create();

  engine.world.gravity.x = 0;
  engine.world.gravity.y = 0;
  let mouseConstraint = MouseConstraint.create(engine);
  World.add(engine.world, mouseConstraint);

  // create a renderer
  let render = Render.create({
    element: document.body,
    engine: engine,
    options: {
      wireframes: false,
      background: 'transparent',
      width: width,
      height: height,
      showDebug: false,
      showBroadphase: false,
      showBounds: false,
      showVelocity: false,
      showCollisions: false,
      showSeparations: false,
      showAxes: false,
      showPositions: false,
      showAngleIndicator: false,
      showIds: false,
      showShadows: false,
      showVertexNumbers: false,
      showConvexHulls: false,
      showInternalEdges: false,
      showMousePosition: false
    }
  });

  // create two boxes and a ground
  // add all of the bodies to the world
  World.add(engine.world, [
    Bodies.rectangle(width / 2, height / 2, 500, 46, {
      isStatic: true,
      render: {
        fillStyle: "transparent"
      }
    }),
    
    Bodies.rectangle(width / 2, (height / 2) - 40, 180, 20, {
      isStatic: true,
      render: {
        fillStyle: "transparent"
      }
    }),
    Bodies.rectangle(width / 2, (height / 2) + 40, 180, 20, {
      isStatic: true,
      render: {
        fillStyle: "transparent"
      }
    }),
    Bodies.rectangle(width / 2, height - offset, width, 1, {
      isStatic: true,
      render: {
        fillStyle: "#FFFFFF"
      }
    }),
    Bodies.rectangle(width / 2, offset, width, 1, {
      isStatic: true,
      render: {
        fillStyle: "#FFFFFF"
      }
    }),
    Bodies.rectangle(offset, height / 2, 1, height, {
      isStatic: true,
      render: {
        fillStyle: "#FFFFFF"
      }
    }),
    Bodies.rectangle(width - offset, height / 2, 1, height, {
      isStatic: true,
      render: {
        fillStyle: "#FFFFFF"
      }
    })
  ]);

  for (let i = 0; i < 230; i++) {
    let radius = 2 + Math.random() * 20
    World.add(engine.world, Bodies.circle(
      40 + Math.random() * width - 80,
      40 + Math.random() * 100,
      radius, {
        render: {
          fillStyle: ["#4285F4", "#EA4335", "#FBBC05", "#34A853"][Math.round(Math.random() * 3)]
        }

      }
    ))
  }


  // run the engine
  Engine.run(engine);

  // run the renderer
  Render.run(render);

  let inc = 0

  engine.world.gravity.y = 4
  function update() {
    if(inc > 8){
      engine.world.gravity.x = Math.cos(inc / 55)
      engine.world.gravity.y = Math.sin(inc / 55)
    }
    inc++
    idRAF = requestAnimationFrame(update.bind(this))
  }

  update()
}
init()

function debounce(func, wait, immediate) {
	var timeout;
	return function() {
		var context = this, args = arguments;
		var later = function() {
			timeout = null;
			if (!immediate) func.apply(context, args);
		};
		var callNow = immediate && !timeout;
		clearTimeout(timeout);
		timeout = setTimeout(later, wait);
		if (callNow) func.apply(context, args);
	};
};


$(window).on("resize", debounce(function(){
  init()
}.bind(this), 200))

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.rawgit.com/liabru/matter-js/26c12003/build/matter.js"></script>

style.sass

@import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,600')
.more-pens
  position: fixed
  left: 20px
  bottom: 20px
  z-index: 10
  font-family: "Montserrat"
  font-size: 12px

a.white-mode, a.white-mode:link, a.white-mode:visited, a.white-mode:active
  font-family: "Montserrat"
  font-size: 12px
  text-decoration: none
  background: #212121
  padding: 4px 8px
  color: #f7f7f7
  &:hover
    background: #edf3f8
    color: #212121

body
  margin: 0
  padding: 0
  overflow: hidden
  width: 100%
  height: 100%
  background: #EFEFEF

  
.title
  z-index: 10
  position: absolute
  left: 50%
  top: 50%
  transform: translateX(-50%) translateY(-50%)
  font-family: "Montserrat"
  text-align: center
  width: 100%
  h1
    position: relative
    color: #121212
    font-weight: 600
    font-size: 60px
    padding: 0
    margin: 0
    line-height: 1

    span
      font-weight: 600
      padding: 0
      margin: 0
      color: #BBB

  h3
    font-weight: 200
    font-size: 20px
    padding: 0
    margin: 0
    line-height: 1
    color: #121212
    letter-spacing: 2px