Skip to content

Instantly share code, notes, and snippets.

@unconed

unconed/README.md

Last active October 11, 2015 09:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save unconed/75be68f2b8dbafbbbcff to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save unconed/75be68f2b8dbafbbbcff to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. unconed revised this gist Oct 11, 2015. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    Made with MathBox 2.
  2. unconed created this gist Oct 11, 2015.
    58 changes: 58 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,58 @@
    <!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>