D3 Examples - Hypersolids

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" /> 
<title>Hypersolids</title>
<style>
html, body { 
  background: #fff;
  color: #555;
  width: 960px;
  margin: 0 auto;
  font-family: sans-serif;
}
canvas {
  border: none;
  display: inline-block;
  margin: 0 20px;
} 
#hypercube-options {
  margin: 60px 0 0 85px;
}
label {
  margin: 0 20px;
  font-size: 15px;
  cursor: pointer;
}
h4 {
  display: inline-block;
  width: 300px;
  text-align:center; 
  font-size: 15px;
  margin: 60px 0 15px 0;
}
</style>
<script type="text/javascript" src="hypersolid.js"></script>
<script type="text/javascript" src="hypersolid.shapebank.js"></script>
</head>
<body>
  <h4>Simplex</h4>
  <h4>Tesseract</h4>
  <h4>Orthoplex</h4>
  <canvas id="simplex-canvas">Unfortunately, your browser does not support coolness.</canvas>
  <canvas id="hypercube-canvas">Unfortunately, your browser does not support coolness.</canvas>
  <canvas id="cross-canvas">Unfortunately, your browser does not support coolness.</canvas>
  <form id="hypercube-options">
    <label><input type="checkbox" name="rotate_xy" />Rotate xy</label>
    <label><input type="checkbox" name="rotate_yz" />Rotate yz</label>
    <label><input type="checkbox" name="rotate_xz" />Rotate xz</label>
    <label><input type="checkbox" name="rotate_xw" />Rotate xw</label>
    <label><input type="checkbox" name="rotate_yw" />Rotate yw</label>
    <label><input type="checkbox" name="rotate_zw" />Rotate zw</label>
  </form>
<script type="text/javascript">
  var simplex = Hypersolid.Simplex();
  var simplexView = Hypersolid.Viewport(simplex, document.getElementById('simplex-canvas'), {
    width: 260,
    height: 260,
    scale: 2,
    lineWidth: 3,
    lineJoin: 'round'
  }); 
  simplexView.draw();
​
  var cube = Hypersolid.Hypercube();
  var cubeView = Hypersolid.Viewport(cube, document.getElementById('hypercube-canvas'), {
    width: 260,
    height: 260,
    scale: 2,
    lineWidth: 3,
    lineJoin: 'round'
  });
  cubeView.draw();
​
  var cross = Hypersolid.Cross();
  var crossView = Hypersolid.Viewport(cross, document.getElementById('cross-canvas'), {
    width: 260,
    height: 260,
    scale: 2,
    lineWidth: 3,
    lineJoin: 'round'
  });
  crossView.draw();
​
  // starting rotation
  rotate("xz", 0.35);
  rotate("yz", 0.25);
​
  // animation
  options = document.getElementById('hypercube-options');
  function render() {
    if (options) {
      checkboxes = options.getElementsByTagName('input');
    }
    if (options.rotate_xz.checked) {
      rotate("xz", 0.008);
    }
    if (options.rotate_yz.checked) {
      rotate("yz", 0.008);
    }
    if (options.rotate_xw.checked) {
      rotate("xw", 0.008);
    }
    if (options.rotate_yw.checked) {
      rotate("yw", 0.008);
    }
    if (options.rotate_xy.checked) {
      rotate("xy", 0.008);
    }
    if (options.rotate_zw.checked) {
      rotate("zw", 0.008);
    }
  };
​
  function rotate(plane, x) {
    simplex.rotate(plane, x);
    simplexView.draw();
    cube.rotate(plane, x);
    cubeView.draw();
    cross.rotate(plane, x);
    crossView.draw();
  };
​
  window.requestAnimFrame = window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame    ||
  window.oRequestAnimationFrame      ||
  window.msRequestAnimationFrame     ||
  function( callback ){
    window.setTimeout(callback, 1000 / 60);
  };
​
  (function animloop(){
    requestAnimFrame(animloop);
    render();
  })();
</script>
​
    