4 Way

4-way.markdown

4 Way

A Pen by Isaac Dettman on CodePen.

License.

index.html

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

script.js

/*
 Uses Matter.js, decomp.js for convex object
*/
var colorGear = "#FF3366";
var colorFloor = "#FFF";
var colorBall = "#FF6666";

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

	// create a Matter.js engine
	var engine = Engine.create(document.querySelector('#container'), {
		render: {
			options: {
				width: 800,
        showAngleIndicator: true,
				showVelocity: false,
				showCollisions: false,
				wireframes: true,
				wireframeBackground: false,
        background: false
			}
		}
	});

	loop();

	function loop() {
		setTimeout(loop, 2000);
		// add marble
		World.add(engine.world, [
			Bodies.circle(200, 40, 20, {
				density: 0.005,
				render:{
					fillStyle: colorBall,
					strokeStyle: 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,
				strokeStyle: colorGear
			}
		});
		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: colorGear,
					strokeStyle: colorGear
				}
			}),
			Bodies.rectangle(x+50, y+10, 10, 10, {
				isStatic: true,
				render:{
					fillStyle: colorGear,
					strokeStyle: colorGear
				}
			})
		]);
	}

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

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

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/matter-js/0.10.0/matter.min.js"></script>
<script src="//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;
}