Skip to content

Instantly share code, notes, and snippets.

@mathdoodle

mathdoodle/doodle.json

Last active August 29, 2015 14:23
Show Gist options
  • Save mathdoodle/dd4959698ec38817d519 to your computer and use it in GitHub Desktop.
Save mathdoodle/dd4959698ec38817d519 to your computer and use it in GitHub Desktop.
Download ZIP
MathBox Austenite
Raw
doodle.json
{
"uuid": "4d172d8e-8bff-4f6c-a6d0-10b692aaf781",
"description": "MathBox Austenite",
"dependencies": {
"DomReady": "latest",
"davinci-mathbox": "latest",
"davinci-blade": "1.1.1"
},
"operatorOverloading": true
}
Raw
index.html
<!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>
Raw
script.ts
DomReady.ready(function() {
ThreeBox.preload(['../shaders/MathBox.glsl.html',], load);
});
function load() {
var mathbox = 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) {
var dots = [
// corners
[1, 1, 1],
// face centered
[0, 0, 1],
[0, 1, 0],
[1, 0, 0],
];
var lattice = [
// +x face
[1, 0, 0],
[1, 1, 1],
[1, 0, 0],
[1, -1, 1],
[1, 0, 0],
[1, 1, -1],
[1, 0, 0],
[1, -1, -1],
// +y face
[0, 1, 0],
[1, 1, 1],
[0, 1, 0],
[-1, 1, 1],
[0, 1, 0],
[1, 1, -1],
[0, 1, 0],
[-1, 1, -1],
// +z face
[0, 0, 1],
[1, 1, 1],
[0, 0, 1],
[-1, 1, 1],
[0, 0, 1],
[1, -1, 1],
[0, 0, 1],
[-1, -1, 1],
];
// Viewport camera/setup
mathbox
// Polar viewport
.viewport({
type: 'cartesian',
range: [[-1, 1], [-1, 1], [-1, 1]],
scale: [1, 1, 1],
rotation: [0, 0, 0],
position: [1, 1, 1],
})
.camera({
orbit: 12.5,
phi: τ/4,
theta: .5,
})
.transition(300)
// There a 8 curve-vector pairs.
// Curve uses the dots
// 1
.curve({
id: 'cell',
live: false,
n: 4,
data: dots,
points: true,
line: false,
pointSize: 30,
zIndex: 40,
mathPosition: [0, 0, 0],
})
.vector({
id: 'lattice',
live: false,
n: 12,
data: lattice,
arrow: false,
points: false,
line: true,
lineWidth: 5,
color: 0xb0b0b0,
mathPosition: [0, 0, 0],
})
// 2
.curve({
id: 'cell',
live: false,
n: 4,
data: dots,
points: true,
line: false,
pointSize: 30,
zIndex: 40,
color: 0x5489f2,
mathPosition: [-2, 0, 0],
})
.vector({
id: 'lattice',
live: false,
n: 12,
data: lattice,
arrow: false,
points: false,
line: true,
lineWidth: 5,
color: 0xc0c0c0,
mathPosition: [-2, 0, 0],
})
// 3
.curve({
id: 'cell',
live: false,
n: 4,
data: dots,
points: true,
line: false,
pointSize: 30,
zIndex: 40,
color: 0x5489f2,
mathPosition: [0, -2, 0],
})
.vector({
id: 'lattice',
live: false,
n: 12,
data: lattice,
arrow: false,
points: false,
line: true,
lineWidth: 5,
color: 0xc0c0c0,
mathPosition: [0, -2, 0],
})
// 4
.curve({
id: 'cell',
live: false,
n: 4,
data: dots,
points: true,
line: false,
pointSize: 30,
zIndex: 40,
color: 0x88adf7,
mathPosition: [-2, -2, 0],
})
.vector({
id: 'lattice',
live: false,
n: 12,
data: lattice,
arrow: false,
points: false,
line: true,
lineWidth: 5,
color: 0xd0d0d0,
mathPosition: [-2, -2, 0],
})
// 5
.curve({
id: 'cell',
live: false,
n: 4,
data: dots,
points: true,
line: false,
pointSize: 30,
zIndex: 40,
color: 0x5489f2,
mathPosition: [0, 0, -2],
})
.vector({
id: 'lattice',
live: false,
n: 12,
data: lattice,
arrow: false,
points: false,
line: true,
lineWidth: 5,
color: 0xc0c0c0,
mathPosition: [0, 0, -2],
})
// 6
.curve({
id: 'cell',
live: false,
n: 4,
data: dots,
points: true,
line: false,
pointSize: 30,
zIndex: 40,
color: 0x88adf7,
mathPosition: [-2, 0, -2],
})
.vector({
id: 'lattice',
live: false,
n: 12,
data: lattice,
arrow: false,
points: false,
line: true,
lineWidth: 5,
color: 0xd0d0d0,
mathPosition: [-2, 0, -2],
})
// 7
.curve({
id: 'cell',
live: false,
n: 4,
data: dots,
points: true,
line: false,
pointSize: 30,
zIndex: 40,
color: 0x88adf7,
mathPosition: [0, -2, -2],
})
.vector({
id: 'lattice',
live: false,
n: 12,
data: lattice,
arrow: false,
points: false,
line: true,
lineWidth: 5,
color: 0xd0d0d0,
mathPosition: [0, -2, -2],
})
// 8
.curve({
id: 'cell',
live: false,
n: 4,
data: dots,
points: true,
line: false,
pointSize: 30,
zIndex: 40,
color: 0xd5e2fc,
mathPosition: [-2, -2, -2],
})
.vector({
id: 'lattice',
live: false,
n: 12,
data: lattice,
arrow: false,
points: false,
line: true,
lineWidth: 5,
color: 0xe0e0e0,
mathPosition: [-2, -2, -2],
})
}
Raw
style.less
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