<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Dodecaplex</title>
<style>
html, body {
background: #fff;
color: #555;
width: 960px;
margin: 0 auto;
font-family: sans-serif;
}
canvas {
border: none;
margin: 0 280px;
}
#hypercube-options {
margin: 10px 0 0 85px;
}
label {
margin: 0 20px;
font-size: 15px;
cursor: pointer;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script type="text/javascript" src="hypersolid.js"></script>
</head>
<body>
<canvas id="octaplex-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">
d3.text("120cell.ascii", function(err, text) {
var data = Hypersolid.parseVEF(text);
function NewShape() {};
Hypersolid.NewShape = function() {
return new NewShape();
};
NewShape.prototype = Hypersolid.Shape(data[0],data[1],data[2]);
var octaplex = Hypersolid.NewShape();
var octaplexView = Hypersolid.Viewport(octaplex, document.getElementById('octaplex-canvas'), {
width: 440,
height: 440,
scale: 2,
lineWidth: 2.5,
lineJoin: 'round'
});
octaplexView.draw();
// 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) {
octaplex.rotate(plane, x);
octaplexView.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>