examples/empty.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MathBox - Empty</title>
  <script src="../build/mathbox-bundle.js"></script>
  <link rel="stylesheet" href="../build/mathbox.css">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
</head>
<body>
  <script>
    var mathbox = mathBox({
      plugins: ['core', 'controls', 'cursor', 'mathbox'],
      controls: {
        // Orbit controls, i.e. Euler angles, with gimbal lock
        klass: THREE.OrbitControls,

        // Trackball controls, i.e. Free quaternion rotation
        //klass: THREE.TrackballControls,
      },
    });
    if (mathbox.fallback) throw "WebGL not supported"

    var three = mathbox.three;
    three.renderer.setClearColor(new THREE.Color(0xFFFFFF), 1.0);


    // Do stuff with mathbox,
    // for example: (see docs/intro.md)
    /*

    // Place camera
    var camera =
      mathbox
      .camera({
        proxy: true,
        position: [0, 0, 3],
      });

    // 2D cartesian
    var view =
      mathbox
      .cartesian({
        range: [[-2, 2], [-1, 1]],
        scale: [2, 1],
      });

    // Axes + grid
    view
      .axis({
        axis: 1,
        width: 3,
      })
      .axis({
        axis: 2,
        width: 3,
      })
      .grid({
        width: 2,  
        divideX: 20,
        divideY: 10,        
      });

    // Make axes black
    mathbox.select('axis').set('color', 'black');

    // Calibrate focus distance for units
    mathbox.set('focus', 3);

    // Add some data
    var data =
      view
      .interval({
        expr: function (emit, x, i, t) {
          emit(x, Math.sin(x + t));
        },
        width: 64,
        channels: 2,
      });
    
    // Draw a curve
    var curve =
      view
      .line({
        width: 5,
        color: '#3090FF',
      });

    // Draw some points
    var points =
      view
      .point({
        size: 8,
        color: '#3090FF',
      });
    
    // Draw vectors
    var vector =
      view.interval({
        expr: function (emit, x, i, t) {
          emit(x, 0);
          emit(x, -Math.sin(x + t));
        },
        width: 64,
        channels: 2,
        items: 2,
      })
      .vector({
        end: true,
        width: 5,
        color: '#50A000',
      });
    
    // Draw ticks and labels
    var scale =
      view.scale({
        divide: 10,
      });
    
    var ticks =
      view.ticks({
        width: 5,
        size: 15,
        color: 'black',
      });
    
    var format =
      view.format({
        digits: 2,
        weight: 'bold',
      });

    var labels =
      view.label({
        color: 'red',
        zIndex: 1,
      });
          
    // Animate
    var play = mathbox.play({
      target: 'cartesian',
      pace: 5,
      to: 2,
      loop: true,
      script: [
        {props: {range: [[-2, 2], [-1, 1]]}},
        {props: {range: [[-4, 4], [-2, 2]]}},
        {props: {range: [[-2, 2], [-1, 1]]}},
      ]
    });
            
    //*/

    
  </script>
</body>
</html>