examples/test/history.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>MathBox - History</title>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/three@0.137.0/build/three.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/three@0.137.0/examples/js/controls/OrbitControls.js"
    ></script>
    <!--
      - a minified version mathbox.min.js is also available;
      - recommend using a specific version (not @latest) in public sites
    -->
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/mathbox@latest/build/bundle/mathbox.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/mathbox@latest/build/mathbox.css"
    />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1" />
  </head>
  <body>
    <script>
      mathbox = MathBox.mathBox({
        plugins: ["core", "controls", "cursor"],
        controls: {
          klass: THREE.OrbitControls,
        },
      });
      three = mathbox.three;

      three.camera.position.set(3.5, 1.4, -2.3);
      three.renderer.setClearColor(new THREE.Color(0xffffff), 1.0);

      view = mathbox
        .set({
          scale: 720,
          focus: 2,
        })
        .cartesian(
          {
            range: [
              [-3, 3],
              [-0.25, 0.75],
              [-3, 3],
            ],
            scale: [2, 1, 2],
          },
          {
            quaternion: function (time) {
              t = Math.max(time, 0) / 25;
              t = t < 0.5 ? t * t : t - 0.25;

              o = 0.5 - 0.5 * Math.cos(Math.min(1, t) * MathBox.π);

              c = Math.cos(t);
              s = Math.sin(t);
              return [0, -s, 0, c];
            },
          }
        );

      view.axis({
        width: 5,
        axis: 1,
        end: true,
      });
      view.axis({
        width: 5,
        axis: 2,
        end: true,
      });
      view.axis({
        width: 5,
        axis: 3,
        end: true,
      });

      view.grid({
        width: 5,
        opacity: 0.5,
        axes: [1, 3],
      });

      view.interval({
        width: 32,
        items: 1,
        axis: 1,
        history: 96,
        expr: function (emit, x, i, time) {
          time /= 3;
          z = Math.sin(time * 5) * 3;
          y =
            0.25 +
            Math.cos(
              x +
                z +
                Math.sin(1.52 * x - (z * z) / 3 + x * z * 0.25 + time) +
                time * 3
            ) *
              0.25;
          emit(x, y, z);
        },
        channels: 3,
      });
      view.transpose({
        order: "xwzy",
      });
      view.vector({
        color: 0x3080ff,
        width: 10,
        start: true,
        end: false,
      });
      view.transpose({
        source: "interval",
        order: "ywzx",
      });
      view.vector({
        color: 0x3080ff,
        opacity: 0.5,
        width: 4,
        start: false,
        end: false,
      });
    </script>
  </body>
</html>