JSFiddle - React, Tailwind, and code Playground

by Eskel

HTML

<script src="https://dl.dropboxusercontent.com/u/20969924/Code/decomp.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.8.0-alpha/matter.js"></script>
<canvas id='canvas'></canvas>

CSS

#canvas {
	width: 100%;
	height: 100%;
}

CoffeeScript

Body = Matter.Body
World = Matter.World
Engine = Matter.Engine
Bodies = Matter.Bodies
Render = Matter.Render

canvas = document.getElementById 'canvas'
width = canvas.width = window.innerWidth
height = canvas.height = window.innerHeight

engine = Engine.create document.body,
	render:
		canvas: canvas
		controller: Render
		options:
			width: width
			height: height

engine.world.gravity.x = 0
engine.world.gravity.y = 0

engine.render.options.showBounds = true
engine.render.options.showPositions = true
engine.render.options.showAxes = true

# STATIC BODY

rectangle1 = Bodies.rectangle 100, 100, 100, 100
#	isStatic: true				# working
rectangle1.isStatic = true		# bugged

World.add engine.world, rectangle1

# TESTER

tester1 = Bodies.circle 300, 300, 50	# 200, 200 offset
tester2 = Bodies.circle 450, 450, 50	# 200, 200 offset
World.add engine.world, tester1
World.add engine.world, tester2

# MOVEMENT

impulse = (body, vx, vy) ->
	Body.applyForce body, body.position, {x: -body.velocity.x, y: -body.velocity.y}
	Body.applyForce body, body.position, {x: vx, y: vy}

reposition = (body, vx, vy) ->
	Body.translate body, {x: vx/2, y: vy/2}

last = 0
animate = (timestamp) ->
	unless last
		last = window.performance.now()
		timestamp = last
	delta = (timestamp - last) / 1000
	last = timestamp
	requestAnimationFrame animate
	if delta > 0

		# position movemnet
		reposition tester1, -1, -1.2
		#reposition tester2, -1.2, -1 	# working
		reposition tester2, -1.4, -1	# bugged

		# force movement
		#impulse tester1, -200, -240

		Engine.update engine, delta
		engine.render.controller.world engine

requestAnimationFrame animate