Matter racer

by Konstantin Cryman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.10.0/matter.min.js"></script>
<div id="container">
  <div id="controls">
        <button id="reload">reload</button> <button id="fullScreenToggler">Toggle Fullscreen</button>
  </div>
</div>

<script type="text/javascript">
/*
 * A speed-improved perlin and simplex noise algorithms for 2D.
 *
 * Based on example code by Stefan Gustavson ([email protected]).
 * Optimisations by Peter Eastman ([email protected]).
 * Better rank ordering method by Stefan Gustavson in 2012.
 * Converted to Javascript by Joseph Gentle.
 *
 * Version 2012-03-09
 *
 * This code was placed in the public domain by its original author,
 * Stefan Gustavson. You may use it as you see fit, but
 * attribution is appreciated.
 *
 */

(function(global){
  var module = global.noise = {};

  function Grad(x, y, z) {
    this.x = x; this.y = y; this.z = z;
  }
  
  Grad.prototype.dot2 = function(x, y) {
    return this.x*x + this.y*y;
  };

  Grad.prototype.dot3 = function(x, y, z) {
    return this.x*x + this.y*y + this.z*z;
  };

  var grad3 = [new Grad(1,1,0),new Grad(-1,1,0),new Grad(1,-1,0),new Grad(-1,-1,0),
               new Grad(1,0,1),new Grad(-1,0,1),new Grad(1,0,-1),new Grad(-1,0,-1),
               new Grad(0,1,1),new Grad(0,-1,1),new Grad(0,1,-1),new Grad(0,-1,-1)];

  var p = [151,160,137,91,90,15,
  131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23,
  190, 6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,
  88,237,149,56,87,174,20,125,136,171,168, 68,175,74,165,71,134,139,48,27,166,
  77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244,
  102,143,54, 65,25,63,161, 1,216,80,73,209,76,132,187,208, 89,18,169,200,196,
  135,130,116,188,159,86,164,100,109,198,173,186, 3,64,52,217,226,250,124,123,
  5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,
  223,183,170,213,119,248,152, 2,44,154,163, 70,221,153,101,155,167,...

CSS

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#reload{
  position: absolute;
  top: 0px;
  left: 0px; 
}
#fullScreenToggler{
  position: absolute;
  top: 30px;
  left: 0px; 
}

JavaScript

var fsOn = false;
var fsToggler = document.getElementById('fullScreenToggler');

fsToggler.addEventListener('click', function(){
  if( fsToggler ) {
    if( fsOn ) Fullscreen.cancel();
    if( !fsOn ) Fullscreen.request();
    fsOn = !fsOn;
  }
}, false);

document.getElementById('reload').addEventListener( 'click', function(){
			window.location.reload();
}, false );







var Engine = Matter.Engine,
		Events = Matter.Events,
		Vector = Matter.Vector,
    Render = Matter.Render,
    Runner = Matter.Runner,
    Composites = Matter.Composites,
    Common = Matter.Common,
    MouseConstraint = Matter.MouseConstraint,
    Mouse = Matter.Mouse,
    World = Matter.World,
    Query = Matter.Query,
    Svg = Matter.Svg,
    Bounds = Matter.Bounds,
    Bodies = Matter.Bodies;

// create engine
var engine = Engine.create(),
    world = engine.world;

// create renderer
var render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: Math.min(document.documentElement.clientWidth, 800),
    height: Math.min(document.documentElement.clientHeight, 600),
    hasBounds: true,
    showAngleIndicator: true
  }
});

Render.run(render);


// get the centre of the viewport
var viewportCentre = {
  x: render.options.width * 0.5,
  y: render.options.height * 0.5
};




// create runner
var runner = Runner.create();
Runner.run(runner, engine);

// add bodies
var terrain;

var WORLD = {
    seed: 0.15922414237675842,
    seed2:  0.15922414237675843,
    seed3: 0.15922414237675844,
    scale:  0.035,
    scale2:  0.025,
    scale3:  0.015,
    height: 50,
    height2: 450,
    height3: 1550,
    get: function( x, y ){
    		var y1, y2, y3, yTotal;
  			noise.seed( this.seed );
        y1 = noise.simplex2( x, y * this.scale ) * this.height;
  			noise.seed( this.seed2 );
        y2 = noise.simplex2( x, y * this.scale2 ) * this.height2;
  			noise.seed( this.seed3 );
        y3 = noise.simplex2( x, y * this.scale3 ) * this.height3;
    		return (y1 + y2 +...