Made with MathBox 2.
MathBox example
<!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