Made with MathBox 2.
Last active
October 11, 2015 09:18
-
-
Save unconed/75be68f2b8dbafbbbcff to your computer and use it in GitHub Desktop.
MathBox example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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