p2js springs

by Gaurav D

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/phaser/2.0.5/phaser.min.js"></script>

<body onload="init()" style="margin:0px;">


  <div id="options" class="open">
    <div id="btns">
      <button id="btn_menu" type="button" role="button" aria-label="Toggle Navigation"></button>
    </div>
    <div style="text-align:center;">
      <h3>spring</h3>
      <p>damping: 1</p>
      <input id="damping" type="range" name="test" min="0" max="10" value="1" onchange="slide(event)" />
      <p>stiffness: 10</p>
      <input id="stiffness" type="range" min="0" max="10" value="10" onchange="slide(event)" />

      <h3>constraint</h3>
      <p>upper limit: -1</p>
      <input id="upper limit" type="range" min="-5" max="10" onchange="slide(event)" />
      <p>lower limit: -10</p>
      <input id="lower limit" type="range" min="-15" max="5" value="-10" onchange="slide(event)" />

      <p>constraint lock x axis</p>
      <input type="checkbox" name="zutat" value="constraint lock x axis" checked onchange="check(event)">

      <h3>wheel</h3>
      <p>weight: 1</p>
      <input id="weight" type="range" min="0.1" max="10" value="1" onchange="slide(event)" />
      <p style="font-weight:800; color:#e03a3a;">drag the wheel</p>
    </div>
  </div>
</body>

CSS

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local("Source Sans Pro Light"), local("SourceSansPro-Light"), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v6/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format("woff");
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local("Source Sans Pro"), local("SourceSansPro-Regular"), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v6/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format("woff");
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: local("Source Sans Pro Semibold"), local("SourceSansPro-Semibold"), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v6/toadOcfmlt9b38dHJxOBGJ6-ys_j0H4QL65VLqzI3wI.woff) format("woff");
}

html,
body {
  height: 100%;
}

body {
  background-color: #DDDDDD;
  color: #516774;
  border: 1px solid transparent;
  font-family: "Source Sans pro", sans-serif;
}

button {
  display: inline-block;
  margin: 0 1em;
  border: none;
  background: none;
}

button span {
  display: block;
}


/* ====================== lines button ==================================================*/

#btns {
  position: absolute;
  width: 60px;
  height: 100px;
  left: -60px;
}

#btn_menu {
  width: 50px;
  height: 40px;
  top: 100px;
  border-radius: 10px 0 0 10px;
  background: white;
}

#btn_menu:before {
  content: "\2261";
  font-size: 50px;
  line-height: 0.5;
}

#options.open #btn_menu:before {
  content: "\00d7";
  font-size: 30px;
  line-height: 0.5;
}

#options {
  position: absolute;
  width: 200px;
  height: 400px;
  right: -200px;
  top: 40px;
  background: white;
  border-radius: 0px 0px 0px 10px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#options.open {
  right:...

JavaScript

var game;
var w;
var h;

function init() {
  w = window.innerWidth;
  h = window.innerHeight;

  game = new Phaser.Game(w, h, Phaser.AUTO, '', {
    preload: preload,
    create: create,
    update: update
  });

  initGUI();
}


function preload() {
  this.game.stage.disableVisibilityChange = true;
  game.load.crossOrigin = true;
  game.load.image('pixel', 'http://i.imgur.com/AwfibOk.png');
  game.load.image('spring', 'http://i.imgur.com/GiqTEwo.png');
}

function create() {
  initPhaserP2_debug();

  // adding P2 physics to the game
  game.physics.startSystem(Phaser.Physics.P2JS);
  // setting gravity
  game.physics.p2.gravity.y = 250;

  game.physics.p2.restitution = 0.4;

  game.stage.backgroundColor = '#DDDDDD';

  // setting gravity
  game.physics.p2.gravity.y = 250;
  game.physics.p2.friction = 5;

  drag();

  initWheel();
  updateSlide();
}


function update() {
  updatePhaserP2_debug();
}


var line;
var springsArray = [];
var constraintsArray = [];
var target;
var mousePointer;
var mouseConstraint;

function initPhaserP2_debug() {

  // game.load.image('point', 'assets/point.png');

  line = new Phaser.Line(0, 0, 200, 200);

  //DRAG
  game.input.onDown.add(click, this);
  game.input.onUp.add(stopDrag, this);
}

function drag() {
  //MOUSE TARGET
  mousePointer = game.add.sprite(200, 200);
  game.physics.p2.enable(mousePointer);
  mousePointer.body.setCircle(5);
  mousePointer.body.debug = false;
  mousePointer.body.mass = 0.01;
  mousePointer.body.kinematic = true;
}

function click(pointer) {

  var bodies = game.physics.p2.hitTest(pointer.position);

  if (bodies.length != 0) {
    target = bodies[0];
    mouseConstraint = game.physics.p2.createRevoluteConstraint(mousePointer, [0, 0], target, [0, 0], 100);
  }
}

function stopDrag(pointer) {
  target = null;
  game.physics.p2.removeConstraint(mouseConstraint)
}




function addPhaserP2_debug(P2_object, type) {
  if (type == "spring") {
    let springSprite = game.add.tileSprite(0, 0, 24,...