Skip to content

Instantly share code, notes, and snippets.

@mathdoodle
Last active August 29, 2015 14:23
Show Gist options
  • Save mathdoodle/ef303872a0cebb34a797 to your computer and use it in GitHub Desktop.
Save mathdoodle/ef303872a0cebb34a797 to your computer and use it in GitHub Desktop.
MathBox WireCube
{
"uuid": "347dd1cf-d490-4c45-9d07-62a9803abc47",
"description": "MathBox WireCube",
"dependencies": {
"DomReady": "latest",
"davinci-mathbox": "latest",
"davinci-blade": "1.1.1"
},
"operatorOverloading": true
}
<!doctype html>
<html>
<head>
<style>
/* STYLE-MARKER */
</style>
<script type="text/javascript" src="http://use.typekit.com/nde6wmn.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS": { availableFonts: ["TeX"] },
extensions: ["tex2jax.js"],
jax: ["input/TeX","output/HTML-CSS"],
tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]},
messageStyle: 'none'
});
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<!-- SCRIPTS-MARKER -->
</head>
<body>
<div id='info'></div>
<script>
// CODE-MARKER
</script>
</body>
</html>
DomReady.ready(function() {
ThreeBox.preload(['../shaders/MathBox.glsl.html',], load);
});
function load() {
var mathbox: MathBox.Stage = mathBox({
cameraControls: true,
cursor: true,
controlClass: ThreeBox.OrbitControls,
elementResize: true,
fullscreen: true,
screenshot: true,
stats: false,
scale: 1,
}).start();
if (top == window) mathbox.start();
// We just don't happen to not be doing a slideshow.
var script = [];
var director = new MathBox.Director(mathbox, script);
// Arrow controls
// Controls for stand-alone
window.addEventListener('keydown', function (e) {
if (e.keyCode == 38 || e.keyCode == 37) director.back();
else if (e.keyCode == 40 || e.keyCode == 39) director.forward();
else {
return;
}
document.getElementById('info').style.opacity = '0';
});
setUp(mathbox);
var phi = 0;
mathbox.world().loop().hookPreRender(function () {
phi = Date.now() * 0.00045
mathbox.set('camera', {phi: phi});
});
}
/**
* Construct the viewport, camera, and all the objects in the stage.
*/
function setUp(mathbox: MathBox.Stage) {
mathbox.viewport({type: 'cartesian'})
.camera({
orbit: 12.5,
phi: Math.PI/2,
theta: 0.5})
.transition(300);
// We get a wireframe with the final three settings.
// Three.js is now using triangles so the result is a bit wierd.
mathbox.platonic({
type: 'cube',
mathScale: [1.8, 1.8, 1.8],
color: 0xcccccc,
line: true,
mesh: false,
shaded: false
});
}
html, body { height: 100%; }
body { margin: 0; padding: 0 }
canvas { display: block }
div + div + div { max-width: 80%; }
.mathbox-label {
font-family: 'klavika-web', sans-serif;
font-weight: normal;
font-style: normal;
text-shadow:
3px 0px 1px rgb(255, 255, 255),
-3px 0px 1px rgb(255, 255, 255),
0px -3px 1px rgb(255, 255, 255),
0px 3px 1px rgb(255, 255, 255),
2px 2px 1px rgb(255, 255, 255),
-2px 2px 1px rgb(255, 255, 255),
2px -2px 1px rgb(255, 255, 255),
-2px -2px 1px rgb(255, 255, 255),
3px 2px 1px rgb(255, 255, 255),
-3px 2px 1px rgb(255, 255, 255),
3px -2px 1px rgb(255, 255, 255),
-3px -2px 1px rgb(255, 255, 255),
1px 3px 1px rgb(255, 255, 255),
-1px 3px 1px rgb(255, 255, 255),
1px -3px 1px rgb(255, 255, 255),
-1px -3px 1px rgb(255, 255, 255),
-1px -1px 1px rgb(255, 255, 255),
-1px 1px 1px rgb(255, 255, 255),
1px -1px 1px rgb(255, 255, 255),
1px 1px 1px rgb(255, 255, 255);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment