4 Way

4-way.markdown

4 Way

A Pen by RGBJOY on CodePen.

License.

index.html

<!--
 inspired by this: https://youtu.be/1GbMYvYZEHc?t=31
-->

script.babel

/*
 Uses matter.js. decomp.js for convex object
*/
var colorBall = "#DDD";
var colorGear = "#323232";
var colorStop = "#282828";
var colorWall = "#555";


document.addEventListener("DOMContentLoaded", function() {
  document.body.innerHTML = "<div id='container'></div>";
	// Matter module aliases
	var Engine = Matter.Engine,
      Render = Matter.Render,
      Runner = Matter.Runner,
      World = Matter.World,
      Bodies = Matter.Bodies,
      Constraint = Matter.Constraint,
      Vertices = Matter.Vertices;

	// create a Matter.js engine
  var engine = Engine.create(),
        world = engine.world;
  
  var render = Render.create({
      element: document.getElementById("container"),
      engine: engine,
      options: {
          width: 800,
          showAngleIndicator: false,
          showVelocity: false,
          showCollisions: false,
          wireframes: false,
          wireframeBackground: false,
          background: false
      }
  });
  
  Render.run(render);
  
  var runner = Runner.create();
  Runner.run(runner, engine);

	loop();

	function loop() {
		setTimeout(loop, 2000);
		// add marble
		World.add(engine.world, [
			Bodies.circle(200, 40, 20, {
				density: 0.005,
				render:{
					fillStyle: colorBall,
					lineWidth: 0
				}
			})
		]);
	}
 

			
	/* .............................................................................
	
		STAR THINGY
	
	............................................................................. */
	makeThingy(400,290);
	makeThingy(275,400);
	makeThingy(525,400);

	function makeThingy(x,y) {
		var star = Vertices.fromPath('100,47.8 76.4,0 52.8,47.8 0,55.5 76.4,91.8 152.7,55.5');
		var div = Bodies.fromVertices(x, y-30, star, {
			mass: 10,
			render:{
				fillStyle: colorGear,
				lineWidth: 0
			}
		});
		div.angle = 0.01;
	
		var	constraint = Constraint.create({ 
				pointA: { x: x, y: y }, 
				bodyB: div,
				pointB: { x: 0, y: 30 },
				length: 0,
				stiffness: 1,
				render: {
					visible: false
				}
			});
		World.add(engine.world, [div, constraint]);
	
		World.add(engine.world, [
			Bodies.rectangle(x-50, y+10, 10, 10, {
				isStatic: true,
				render:{
					fillStyle: colorStop,
					lineWidth: 0.01
				}
			}),
			Bodies.rectangle(x+50, y+10, 10, 10, {
				isStatic: true,
				render:{
					fillStyle: colorStop,
					lineWidth: 0.01
				}
			})
		]);
	}

	// add some ramps to the world
	World.add(engine.world, [
		Bodies.rectangle(265, 150, 200, 10, {
			isStatic: true,
			angle: Math.PI * 0.06,
			render:{
				fillStyle: colorWall,
				lineWidth: 0.01
			}
		}),
		Bodies.rectangle(400, 590, 790, 10, {
			isStatic: true,
			render:{
				fillStyle: colorWall,
				lineWidth: 0.01
			}
		}),
		Bodies.rectangle(10, 540, 10, 90, {
			isStatic: true,
			render:{
				fillStyle: colorWall,
				lineWidth: 0.01
			}
		}),
		Bodies.rectangle(200, 540, 10, 90, {
			isStatic: true,
			render:{
				fillStyle: colorWall,
				lineWidth: 0.01
			}
		}),
		Bodies.rectangle(400, 540, 10, 90, {
			isStatic: true,
			render:{
				fillStyle: colorWall,
				lineWidth: 0.01
			}
		}),
		Bodies.rectangle(600, 540, 10, 90, {
			isStatic: true,
			render:{
				fillStyle: colorWall,
				lineWidth: 0.01
			}
		}),
		Bodies.rectangle(790, 540, 10, 90, {
			isStatic: true,
			render:{
				fillStyle: colorWall,
				lineWidth: 0.01
			}
		}),
	]);
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.10.0/matter.min.js"></script>
<script src="https://cdn.rawgit.com/schteppe/poly-decomp.js/4558762effada60404c10c46d1d995c9512d87f5/build/decomp.min.js"></script>

style.css

body {
	background: #232323;
}
#container canvas {
	display: block;
	margin: 0 auto;
}