LiquidFun examples

by joshcomley

HTML

<script src="https://google.github.io/liquidfun/testbed/liquidfun.js"></script>
<script src="https://google.github.io/liquidfun/testbed/testbed/renderer.js"></script>
<script src="https://google.github.io/liquidfun/testbed/testbed/three.js"></script>
<script src="https://google.github.io/liquidfun/testbed/testbed/utils.js"></script>
<script src="https://google.github.io/liquidfun/testbed/testbed/tests/testElasticParticles.js"></script>
 <div style="position:absolute;float:right;z-index:1;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;background:white">

      <select id="tests" onchange="window.testSwitch(this.value)">
        <option value="TestDamBreak">Dam Break</option>
        <option value="TestDrawingParticles" selected="selected">Drawing Particles</option>
        <option value="TestElasticParticles">Elastic Particles</option>
        <option value="TestImpulse">Impulse</option>
        <option value="TestLiquidTimer">Liquid Timer</option>
        <option value="TestParticles">Particles</option>
        <option value="TestRigidParticles">Rigid Particles</option>
        <option value="TestSoup">Soup</option>
        <option value="TestSoupStirrer">Soup Stirrer</option>
        <option value="TestSparky">Sparky</option>
        <option value="TestSurfaceTension">SurfaceTension</option>
        <option value="TestTheoJansen">Theo Jansen</option>
        <option value="TestWaveMachine">Wave Machine</option>
      </select>

  </div>

JavaScript

// shouldnt be a global :(
var particleColors = [
  new b2ParticleColor(0xff, 0x00, 0x00, 0xff), // red
  new b2ParticleColor(0x00, 0xff, 0x00, 0xff), // green
  new b2ParticleColor(0x00, 0x00, 0xff, 0xff), // blue
  new b2ParticleColor(0xff, 0x8c, 0x00, 0xff), // orange
  new b2ParticleColor(0x00, 0xce, 0xd1, 0xff), // turquoise
  new b2ParticleColor(0xff, 0x00, 0xff, 0xff), // magenta
  new b2ParticleColor(0xff, 0xd7, 0x00, 0xff), // gold
  new b2ParticleColor(0x00, 0xff, 0xff, 0xff) // cyan
];
var container;
world = null;
var threeRenderer;
renderer = null;
var camera;
scene = null;
var objects = [];
var timeStep = 1.0 / 60.0;
var velocityIterations = 8;
var positionIterations = 3;
test = {};
var projector = new THREE.Projector();
var planeZ = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
var g_groundBody = null;

var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

function printErrorMsg(msg) {
  var domElement = document.createElement('div');
  domElement.style.textAlign = 'center';
  domElement.innerHTML = msg;
  document.body.appendChild(domElement);
}

function initTestbed() {
  camera = new THREE.PerspectiveCamera(70
    , windowWidth / windowHeight
    , 1, 1000);

  try {
    threeRenderer = new THREE.WebGLRenderer();
  } catch( error ) {
    printErrorMsg('<p>Sorry, your browser does not support WebGL.</p>'
                + '<p>This testbed application uses WebGL to quickly draw'
                + ' LiquidFun particles.</p>'
                + '<p>LiquidFun can be used without WebGL, but unfortunately'
                + ' this testbed cannot.</p>'
                + '<p>Have a great day!</p>');
    return;
  }

  threeRenderer.setClearColor(0xEEEEEE);
  threeRenderer.setSize(windowWidth, windowHeight);
	
  camera.position.x = 0;
  camera.position.y = 0;
  camera.position.z = 100;
  scene = new THREE.Scene();
  camera.lookAt(scene.position);
//	window.threeRenderer = threeRenderer;
//  window.scene = scene;
//  window.camera =...