Skip to content

Instantly share code, notes, and snippets.

@unconed
Last active October 11, 2015 09:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save unconed/75be68f2b8dbafbbbcff to your computer and use it in GitHub Desktop.
Save unconed/75be68f2b8dbafbbbcff to your computer and use it in GitHub Desktop.
MathBox example

Made with MathBox 2.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://acko.net/files/mathbox2/mathbox-bundle.min.js"></script>
<title>MathBox Sandbox</title>
</head>
<body></body>
<script type="text/javascript">
// Load mathbox with controls
var mathbox = mathBox({
plugins: ['core', 'cursor', 'controls'],
controls: {
klass: THREE.OrbitControls,
},
});
if (mathbox.fallback) throw "WebGL error";
// Set renderer background
var three = mathbox.three;
three.renderer.setClearColor(new THREE.Color(0xffffff), 1.0);
// Set mathbox units and place camera
mathbox.set({ scale: 720, focus: 3 });
mathbox.camera({ proxy: true, position: [0, 0, 3] });
// Create cartesian view
var view = mathbox.cartesian({
range: [[-10, 10], [-5, 5], [-1, 1]],
scale: [6/4, 3/4, 3/4],
});
// 2D axes / grid
view.axis({ axis: 1, width: 3 });
view.axis({ axis: 2, width: 3 });
view.grid({ width: 1.5, divideX: 20, divideY: 10 });
// Sine Wave Curve
view
.interval({
length: 32,
channels: 2,
expr: function (emit, x, i, t) {
emit(x, 0.5 * Math.sin(x + t));
},
})
.line({
width: 5,
color: '#3090FF',
})
.point({
size: 10,
color: '#3090FF',
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment