### MathBox DOM Structure with Updates

Source: https://github.com/unconed/mathbox/blob/master/docs/intro.md

Illustrates the cumulative structure of the MathBox DOM after applying various configurations, including camera setup, Cartesian view with axes and grid, and property updates like color and focus.

```jsx
<root focus={3}>
  <camera proxy={true} position={[0, 0, 3]} />
  <cartesian range={[[-2, 2], [-1, 1]]} scale={[2, 1]}>
    <axis axis={1} width={3} color="black" />
    <axis axis={2} width={3} color="black" />
    <grid width={2} divideX={20} divideY={10} />
  </cartesian>
</root>
```

--------------------------------

### MathBox Initialization and Three.js Setup

Source: https://github.com/unconed/mathbox/blob/master/examples/test/transition.html

Initializes MathBox with core plugins and configures the Three.js scene, camera, and renderer. Sets the background color for the scene.

```javascript
mathbox = MathBox.mathBox({
  plugins: ["core", "controls", "cursor", "stats"],
  controls: {
    klass: THREE.OrbitControls,
  },
});

three = mathbox.three;
three.camera.position.set(-3.5, 2.2, -3.3);
three.renderer.setClearColor(new THREE.Color(0xffffff), 1.0);
```

--------------------------------

### Setup 3D Camera in MathBox

Source: https://github.com/unconed/mathbox/blob/master/docs/intro.md

Initializes a 3D camera for a MathBox scene. The camera's position is set to [0, 0, 3] and 'proxy' is enabled for interactive control. This is the first step in defining the viewing perspective.

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

```jsx
<root>
  <camera proxy={true} position={[0, 0, 3]} />
</root>
```

--------------------------------

### Setup Coordinate System and Axes

Source: https://github.com/unconed/mathbox/blob/master/docs/intro.md

Defines the core scene structure including a root element, camera, and cartesian coordinate system. It sets up axes and a grid within the cartesian view, defining their properties like width, color, and divisions.

```jsx
<root focus={3}>
  <camera proxy={true} position={[0, 0, 3]} />
  <cartesian range={[[-2, 2], [-1, 1]]} scale={[2, 1]}>
    <axis axis={1} width={3} color="black" />
    <axis axis={2} width={3} color="black" />
    <grid width={2} divideX={20} divideY={10} />
    {/* Data and shapes would be added here */}
  </cartesian>
</root>
```

--------------------------------

### Initialize MathBox and Three.js

Source: https://github.com/unconed/mathbox/blob/master/examples/test/vector.html

Sets up the MathBox instance with core plugins and configures the Three.js camera and renderer. This is the initial setup for creating visualizations.

```javascript
mathbox = MathBox.mathBox({
  plugins: ["core", "controls", "cursor"],
  controls: {
    klass: THREE.OrbitControls,
  },
  camera: {
    fov: 30,
  },
});

three = mathbox.three;
three.camera.position.set(0, 0, 6);
three.renderer.setClearColor(new THREE.Color(0xffffff), 1.0);
```

--------------------------------

### Initialize MathBox and Setup Scene

Source: https://github.com/unconed/mathbox/blob/master/examples/test/disc.html

Initializes the MathBox library with core plugins and sets up the 3D scene, including camera position and background color. Requires the MathBox library and Three.js.

```javascript
var mathbox = MathBox.mathBox({
  plugins: ["core", "controls", "cursor"],
  controls: {
    klass: THREE.OrbitControls,
  },
});

var three = mathbox.three;
three.camera.position.set(2.5, 1, -1.3);
three.renderer.setClearColor(new THREE.Color(0x000000), 1.0);
```

--------------------------------

### MathBox Initialization and Scene Setup

Source: https://github.com/unconed/mathbox/blob/master/examples/test/pointsizes.html

Initializes the MathBox library with plugins and Three.js controls, then configures the Three.js camera and renderer. This sets up the basic 3D environment for subsequent visualizations.

```javascript
mathbox = MathBox.mathBox({
  plugins: ["core", "controls", "cursor", "stats"],
  controls: {
    klass: THREE.OrbitControls,
  },
  camera: {
    fov: 60,
  },
});

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

--------------------------------

### MathBox Initialization and Three.js Setup

Source: https://github.com/unconed/mathbox/blob/master/examples/test/dom-vdom.html

Initializes the MathBox library with core plugins and configures the underlying Three.js camera and renderer. This sets up the 3D environment for subsequent visualizations.

```javascript
var mathbox = MathBox.mathBox({
  plugins: ["core", "controls", "cursor", "stats"],
  controls: {
    klass: THREE.OrbitControls,
  },
  camera: {
    near: 0.01,
    far: 1000,
  },
});

var three = mathbox.three;
three.camera.position.set(1.1, 1.45, 1);
three.camera.lookAt(new THREE.Vector3());
three.renderer.setClearColor(new THREE.Color(0xffffff), 1.0);
```

--------------------------------

### Define MathBox Scene with JSX Components

Source: https://github.com/unconed/mathbox/blob/master/docs/intro.md

Illustrates setting up a MathBox scene using JSX syntax, including camera, Cartesian coordinates, axes, grids, intervals for plotting functions, lines, points, vectors, and animation controls. This example shows a complete scene definition.

```jsx
<root focus={3}>
  <camera proxy={true} position={[0, 0, 3]} />
  <cartesian range={[[-2, 2], [-1, 1]]} scale={[2, 1]}>
    <axis axis={1} width={3} color="black" />
    <axis axis={2} width={3} color="black" />
    <grid width={2} divideX={20} divideY={10} />
    <interval expr={(emit, x, i, t) => {
          emit(x, Math.sin(x + t));
        }} width={64} channels={2} />
    <line width={5} color="#3090FF" />
    <point size={8} color="#3090FF" />
    <interval expr={(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" />
    <scale divide={10} />
    <ticks width={5} size={15} color="black" />
    <format digits={2} weight="bold" />
    <label color="red" zIndex={1} />
  </cartesian>
  <play target="cartesian" to={2} loop={true} pace={5} script={[{props: {range: [[-2, 2], [-1, 1]]}}, {props: {range: [[-4, 4], [-2, 2]]}}, {props: {range: [[-2, 2], [-1, 1]]}}]} />
</root>
```

--------------------------------

### MathBox Scene Setup and Mouse Interaction

Source: https://github.com/unconed/mathbox/blob/master/examples/test/readback.html

Initializes MathBox with Three.js, configures the camera and renderer, draws grids and points using mathematical expressions, and implements mouse hover detection by reading back a Render-to-Texture (RTT) buffer containing index data. It requires the MathBox library and Three.js.

```javascript
var mathbox = MathBox.mathBox({
  plugins: ["core", "controls", "cursor", "stats"],
  controls: { klass: THREE.OrbitControls },
  camera: { fov: 60 },
});

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

// Draw blue points inside a box
var blue = new THREE.Color(0x3090ff);
var view = mathbox
  .set({ scale: 720, focus: 3 })
  .camera({ position: [2, 2, 3], proxy: true });

view
  .grid({ width: 4, opacity: 0.5, axes: [1, 3], origin: [-1, -1, -1] })
  .grid({ width: 4, opacity: 0.5, axes: [1, 2], origin: [-1, -1, -1] })
  .grid({ width: 4, opacity: 0.5, axes: [2, 3], origin: [-1, -1, -1] });

view
  .area({ id: "points", centeredX: true, centeredY: true, width: 32, height: 32, axes: [1, 3], expr: function (emit, x, y, i, j, t) { emit(x, 0.5 * (Math.sin(x + t) * Math.sin(y + t)), y); } })
  .area({ id: "colors", centeredX: true, centeredY: true, width: 32, height: 32, axes: [1, 3], expr: function (emit, x, y, i, j, t) { var selectedI = i == hovered[0]; var selectedJ = j == hovered[1]; var alpha = hovered != none ? (selectedI + selectedJ) / 3 + 0.5 : 1; emit(1, 1, 1, alpha); } })
  .area({ id: "indexes", centeredX: true, centeredY: true, width: 32, height: 32, axes: [1, 3], expr: function (emit, x, y, i, j, t) { // Store I/J indices in red/green // Use alpha channel to mark occupancy emit(i / 255, j / 255, 0, 0); } })
  .point({ points: "#points", colors: "#colors", color: blue, size: 10, });

// Draw points in RTT, colored with indexes, at reduced resolution.
var scale = 1 / 4;
view
  .rtt({ size: "relative", width: scale, height: scale })
  .point({ points: "#points", colors: "#indexes", color: "#ffffff", size: 13, blending: "no" })
  .end();

// Readback RTT pixels
var readback = view.readback({ id: "indexbuffer", type: "unsignedByte" });

// Query readback buffer
var mouse = [-1, -1];
var none = [-1, -1];
var hovered = none;

var getIndexAt = function (x, y) {
  var data = readback.get("data");
  if (!data) {
    return none;
  }
  x = Math.round(x * scale);
  y = Math.round(y * scale);
  var w = readback.get("width");
  var h = readback.get("height");
  var o = (x + w * (h - y)) * 4;
  var r = data[o];
  var g = data[o + 1];
  var a = data[o + 3];
  return a == 0 ? [r, g] : none;
};

three.canvas.addEventListener("mousemove", function (event) {
  mouse = [ event.offsetX * window.devicePixelRatio, event.offsetY * window.devicePixelRatio ];
});

three.on("post", function () {
  hovered = getIndexAt(mouse[0], mouse[1]);
});

```

--------------------------------

### MathBox Initialization and THREE.js Setup

Source: https://github.com/unconed/mathbox/blob/master/examples/test/dom-latex.html

Initializes a MathBox instance with specified plugins and configures the THREE.js camera and renderer. This sets up the 3D environment for subsequent rendering operations.

```javascript
mathbox = MathBox.mathBox({
  plugins: ["core", "controls", "cursor", "stats"],
  controls: {
    klass: THREE.OrbitControls,
  },
  camera: {
    near: 0.01,
    far: 1000,
  },
});

three = mathbox.three;
three.camera.position.set(1.1, 1.45, 1);
three.camera.lookAt(new THREE.Vector3());
three.renderer.setClearColor(new THREE.Color(0xffffff), 1.0);
```

--------------------------------

### MathBox Initialization and Three.js Setup

Source: https://github.com/unconed/mathbox/blob/master/examples/math/procedural.html

Initializes MathBox with core plugins and Three.js integration. Configures the Three.js camera position and renderer background color.

```javascript
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(0x204060), 1.0);
```

--------------------------------

### MathBox Initialization and Setup

Source: https://github.com/unconed/mathbox/blob/master/examples/test/mask.html

Initializes MathBox with specified plugins and Three.js controls, sets up the camera and renderer, and configures the MathBox scene scale and focus.

```javascript
var mathbox = MathBox.mathBox({
 plugins: ["core", "controls", "cursor", "stats"],
 controls: {
  klass: THREE.OrbitControls,
 },
});
var three = mathbox.three;
three.camera.position.set(0, 0, 3);
three.renderer.setClearColor(new THREE.Color(0xffffff), 1.0);
mathbox.set({
 scale: 600,
 focus: 3,
});
```

--------------------------------

### MathBox RTT Setup and Visualization

Source: https://github.com/unconed/mathbox/blob/master/examples/test/compose.html

Initializes MathBox, configures the Three.js renderer, sets up camera and Cartesian coordinates, renders grids, and utilizes RTT for a secondary view with surface plotting.

```javascript
mathbox = MathBox.mathBox({
  plugins: ["core", "controls", "cursor"],
  controls: { klass: THREE.OrbitControls },
});

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

view = mathbox
  .set({ scale: 500, focus: 3 })
  .camera({
    proxy: true,
    position: [0, 0, 3],
  })
  .cartesian({
    range: [
      [-2, 2],
      [-1, 1],
      [-1, 1],
    ],
    scale: [2, 1, 1],
  });

view.grid({
  color: "black",
  divideX: 2,
  divideY: 2,
  zBias: 10,
  opacity: 0.75,
});

view2 = view
  .rtt({
    type: "unsignedByte",
  })
  .camera(
    {
      lookAt: [0, 0, 0],
    },
    {
      position: function (t) {
        return [Math.cos(t) * 3, Math.sin(t * 0.271), Math.sin(t) * 3];
      },
    }
  )
  .cartesian({
    range: [
      [-2, 2],
      [-1, 1],
      [-1, 1],
    ],
    scale: [2, 1, 1],
  })
  .grid({
    color: "black",
    divideX: 2,
    divideY: 2,
    zBias: 10,
    opacity: 0.75,
  });

view.compose({
  color: "#fff",
  opacity: 0.5,
  zWrite: false,
});

view.area({
  width: 16,
  height: 16,
  rangeX: [0, 1],
  rangeY: [0, 1],
  expr: function (emit, x, y, i, j) {
    emit(x, y, 0, 1);
  },
  minFilter: "linear",
  magFilter: "linear",
});

view.interval({
  width: 16,
  range: [0, 1],
  expr: function (emit, x, i) {
    emit(x, 0, 0);
  },
  minFilter: "linear",
  magFilter: "linear",
});

view.compose({
  color: "#fff",
  opacity: 0.333,
  zWrite: false,
});

view
  .area({
    width: 3,
    height: 16,
  })
  .interval({
    width: 8,
    minFilter: "linear",
    magFilter: "linear",
    expr: function (emit, x, i, t) {
      x = x;
      y = Math.sin(x + t) * 0.5 + 0.5;
      emit(y, y, y, 1);
    },
  })
  .surface({
    color: 0xffffff,
    points: "<<",
    map: "<",
    zBias: -5,
  });

view.compose({
  color: "#fff",
  opacity: 0.333,
  zWrite: false,
});

```

--------------------------------

### Setup Cartesian System, Axes, and Grid

Source: https://github.com/unconed/mathbox/blob/master/examples/test/point.html

Configures the 3D Cartesian coordinate system with defined ranges and scales. It then adds axes and a grid to visualize the space.

```javascript
view = mathbox
  .set({
    scale: 1440,
    focus: three.camera.position.length(),
  })
  .cartesian({
    range: [
      [-2, 2],
      [0, 1],
      [-2, 2],
    ],
    scale: [2, 1, 2],
  });

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

--------------------------------

### Initialize MathBox and Three.js Scene

Source: https://github.com/unconed/mathbox/blob/master/examples/test/split.html

Sets up the MathBox instance with plugins and configures the Three.js camera and renderer. This is the foundational step for creating visualizations.

```javascript
var mathbox = MathBox.mathBox({
  plugins: ["core", "controls", "cursor"],
  controls: {
    klass: THREE.OrbitControls,
  },
});

var three = mathbox.three;
three.camera.position.set(2.3, 1, 2);
three.renderer.setClearColor(new THREE.Color(0xffffff), 1.0);
```

--------------------------------

### MathBox Initialization and Setup

Source: https://github.com/unconed/mathbox/blob/master/examples/test/resample2.html

Initializes MathBox with core plugins and sets up the Three.js renderer clear color. Configures global MathBox settings like scale and RTT buffers.

```javascript
mathbox = MathBox.mathBox({
  plugins: ["core"],
});

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

mathbox
  .set({
    scale: 720,
  })
  .rtt({
    id: "render",
    minFilter: "nearest",
    magFilter: "nearest",
    type: "unsignedByte",
  });
```

--------------------------------

### Draw Vector

Source: https://github.com/unconed/mathbox/blob/master/examples/test/split.html

Renders a vector based on the processed data. It specifies the color, line width, and whether to draw the start and end points.

```javascript
view.vector({
  color: 0x3090ff,
  width: 6,
  start: true,
  end: true,
});
```

--------------------------------

### MathBox Cartesian View and Grid Setup

Source: https://github.com/unconed/mathbox/blob/master/examples/test/transition.html

Creates a Cartesian coordinate system within MathBox, defining its range, scale, and axes. Adds a grid to visualize the space.

```javascript
view = mathbox.cartesian({
  range: [
    [-3, 3],
    [0, 1],
    [-3, 3],
  ],
  scale: [2, 1, 2],
});

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

--------------------------------

### MathBox Setup and Default zOrder Drawing

Source: https://github.com/unconed/mathbox/blob/master/examples/test/zorder.html

Initializes MathBox with Three.js, sets up the camera and renderer, and creates a Cartesian view. Demonstrates drawing surfaces with default zOrder behavior for occlusion.

```javascript
mathbox = MathBox.mathBox({
  plugins: ["core", "controls", "cursor"],
  controls: { klass: THREE.OrbitControls, },
});

three = mathbox.three;
three.camera.position.set(2.3, 1, 2);
three.renderer.setClearColor(new THREE.Color(0xffffff), 1.0);

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

// Left: Draw in document order, front-to-back, with incorrect occlusion
view.transform({
  position: [-1.1, 0, 0],
})
.area({ width: 2, height: 2, })
.transform({
  position: [0, 0, 0.2],
})
.surface({
  opacity: 0.5,
  color: "#c04000",
})
.end()
.transform({
  position: [0, 0, 0],
})
.surface({
  opacity: 0.5,
  color: "#40c000",
})
.end()
.transform({
  position: [0, 0, -0.2],
})
.surface({
  opacity: 0.5,
  color: "#3090ff",
})
.end();
```

--------------------------------

### Render Vector Visualization

Source: https://github.com/unconed/mathbox/blob/master/examples/test/vector.html

Renders a vector using the data sampled from the 'sampler' interval. The vector is styled with a specific color and width, and is set to start rendering immediately.

```javascript
view.vector({
  points: "#sampler",
  color: 0x3090ff,
  width: 4,
  start: true,
});
```

--------------------------------

### Initialize MathBox and Render Strip

Source: https://github.com/unconed/mathbox/blob/master/examples/test/strip.html

This snippet shows the setup for MathBox with Three.js, including camera and renderer configuration. It then defines a Cartesian view, generates data using array and repeat methods, and finally renders a colored strip visualization. Dependencies include MathBox and Three.js.

```javascript
var mathbox = MathBox.mathBox({
  plugins: ["core", "controls", "cursor", "stats"],
  controls: { klass: THREE.OrbitControls },
});

var three = mathbox.three;
three.camera.position.set(-0.5, 0.4, -1.3);
three.renderer.setClearColor(new THREE.Color(0xffffff), 1.0);

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

view.array({
  width: 100,
  items: 2,
  channels: 2,
  live: false,
  // expr is iterated once
  expr: function (emit, i) {
    emit((i / 100) * 2 - 1, 0);
    emit((i / 100) * 2 - 1, Math.random());
  },
});

view.repeat({
  height: 2,
});

view.spread({
  unit: "absolute",
  height: [1.5 / 100, 0, 0],
});

view.join({
  order: "wy",
});

view.strip({
  color: 0xc05020,
  shaded: false,
});
```

--------------------------------

### MathBox Initialization and Setup

Source: https://github.com/unconed/mathbox/blob/master/examples/test/vertexcolor.html

Initializes MathBox with plugins and controls, sets up the Three.js renderer, and configures the camera and Cartesian coordinate system. It also defines axes and grids for the 3D scene.

```javascript
var mathbox = MathBox.mathBox({
  plugins: ["core", "controls", "cursor", "stats"],
  controls: {
    klass: THREE.OrbitControls,
  },
});

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

var view = mathbox
  .set({
    scale: 720,
    focus: 5,
  })
  .camera({
    proxy: true,
    position: [2, 1, 3],
  })
  .cartesian({
    range: [
      [0, 1],
      [0, 1],
      [0, 1],
    ],
    scale: [1, 2 / 3, 1],
  });

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

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

--------------------------------

### Initialize MathBox and Three.js Scene

Source: https://github.com/unconed/mathbox/blob/master/examples/test/transpose.html

Sets up the MathBox instance with core plugins and OrbitControls, then configures the Three.js camera and renderer for the scene.

```javascript
mathbox = MathBox.mathBox({
  plugins: ["core", "controls", "cursor"],
  controls: {
    klass: THREE.OrbitControls,
  },
});

three = mathbox.three;
three.camera.position.set(2.85, 3.84, -1.8);
three.renderer.setClearColor(new THREE.Color(0xffffff), 1.0);
```

--------------------------------

### MathBox Initialization and Rendering Setup

Source: https://github.com/unconed/mathbox/blob/master/examples/test/vertexfeedback.html

JavaScript code demonstrating the initialization of MathBox, configuration of the Three.js renderer, and setting up render-to-texture (RTT) passes with shaders and compositing.

```javascript
mathbox = MathBox.mathBox({
  plugins: ["core", "cursor"],
});

three = mathbox.three;
three.renderer.setClearColor(new THREE.Color(0x000000), 1.0);
gl = three.renderer.getContext();

mathbox
  .set({
    scale: 720,
  })
  .camera({
    position: [0.3, 0.1, 2],
  })
  .rtt({
    id: "render",
    width: 64 * 4,
    height: 36 * 4,
    type: "unsignedByte",
    minFilter: "nearest",
    magFilter: "nearest",
  })
  .camera(
    {
      lookAt: [0, 0, 0],
    },
    {
      position: function (t) {
        time = t * 1.5;
        x = Math.cos(time) * 3;
        z = Math.sin(time) * 3;
        y = Math.sin(time * 0.341) * 3;
        return [x, (x + z) * 0.2 + y, z];
      },
    }
  )
  .cartesian({
    range: [
      [-2, 2],
      [-1, 1],
      [-1, 1],
    ],
    scale: [2, 1, 1],
  })
  .transform({
    scale: [0.7, 0.7, 0.7],
  })
  .grid({
    divideX: 4,
    divideY: 4,
    zBias: 10,
    opacity: 0.25,
    color: 0xffdfe0,
    width: 10,
  })
  .end()
  .end()
  .end()
  .rtt({
    id: "rtt1",
    history: 4,
    width: 64 * 4,
    height: 36 * 4,
    type: "unsignedByte",
  })
  .shader({
    code: "#map-rotate",
  })
  .resample({
    id: "resample1",
    indices: 3,
    channels: 4,
  })
  .compose({
    color: "#ffffff",
    zWrite: false,
  })
  .compose({
    source: "#render",
    blending: THREE.AdditiveBlending,
    color: "#ffffff",
    zWrite: false,
  })
  .end()
  .rtt({
    id: "rtt2",
    width: 64 * 4,
    height: 36 * 4,
    type: "unsignedByte",
  })
  .shader({
    code: "#map-temporal-blur",
  })
  .resample({
    id: "resample2",
    source: "#rtt1",
    indices: 3,
    channels: 4,
  })
  .compose({
    color: "#fff",
    zWrite: false,
  })
  .end()
  .resample({
    width: 65,
    height: 37,
  })
  .repeat({
    depth: 2,
    id: "lerp",
  })
  .shader({
    code: "#map-xy-to-xyz",
  })
  .resample({
    indices: 3,
    channels: 3,
  })
  .transpose({
    order: "xywz",
    id: "transpose",
  })
  .transpose({
    source: "#lerp",
    order: "xywz",
    id: "color",
  })
  .shader({
    code: "#map-z-to-color",
  })
  .resample({
    source: "#lerp",
    id: "color1",
    indices: 2,
    channels: 4,
  })
  .shader({
    code: "#map-z-to-color-2",
  })
  .resample({
    source: "#lerp",
    id: "color2",
    indices: 2,
    channels: 4,
  })
  .cartesian(
    {
      range: [
        [-16 / 9 - 0.001, 16 / 9 + 0.001],
        [-1, 1],
        [-1, 1],
      ],
      scale: [16 / 9, 1, 1],
    },
    {
      quaternion: function (t) {
        time = t / 3;
        c = Math.cos(time / 4);
        s = Math.sin(time / 4);
        c2 = Math.cos(time / 11.71) * 1.71;
        s2 = Math.sin(time / 11.71) * 1.71;
        return [s * s2, s * c2, 0, c];
      },
    }
  )
  .vector({
    points: "#transpose",
    colors: "#color1",
    color: "#ffffff",
    start: false,
    end: false,
    width: 20,
    opacity: 0.15,
    zWrite: false,
    blending: "add",
  })
  .point({
    points: "#transpose",
    colors: "#color2",
    color: "#ffffff",
    size: 5,
    zBias: 5,
  });

grid = mathbox.select("grid:nth-of-type(2)");

```

--------------------------------

### Initialize MathBox and Three.js

Source: https://github.com/unconed/mathbox/blob/master/examples/test/spread.html

Initializes MathBox with core plugins and Three.js controls, then sets the background color for the Three.js renderer.

```javascript
var mathbox = MathBox.mathBox({
  plugins: ["core", "controls", "cursor"],
  controls: {
    klass: THREE.OrbitControls,
  },
});

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

--------------------------------

### MathBox: Cartesian View Setup and Surface Rendering

Source: https://github.com/unconed/mathbox/blob/master/examples/test/subdivide.html

JavaScript code using the MathBox library to set up a 3D Cartesian coordinate system and render multiple surfaces. It demonstrates chaining API calls for view configuration, surface generation, subdivision, and applying shaders.

```javascript
mathbox = MathBox.mathBox({
  plugins: ["core", "controls", "cursor", "stats"],
  controls: {
    klass: THREE.OrbitControls,
  },
});

three = mathbox.three;
three.camera.position.set(-3.5, 2.2, -3.3);
three.renderer.setClearColor(new THREE.Color(0xffffff), 1.0);

// Cartesian view
view = mathbox
  .set({
    focus: 3.5,
  })
  .cartesian({
    range: [
      [-3, 3],
      [0, 1],
      [-3, 3],
    ],
    scale: [2, 1, 2],
  });

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

// Three identical surfaces stacked above each other
view
  .area({
    width: 9,
    height: 9,
    axes: "xz",
    expr: function (emit, x, z, i, j, time) {
      var y = 0.25 * (Math.sin(x * 1.25 + Math.sin(z + time) - time * 1.34) * Math.sin(z * 1.17 - time * 0.79)) + 1;
      emit(x, y - 0.66, z);
      emit(x, y, z);
      emit(x, y + 0.66, z);
    },
    channels: 3,
    items: 3,
  })
  // Draw first surface
  .group()
  .slice({ items: [0, 1] })
  .group()
  .slice({ height: [0, 5] })
  .surface({
    fill: false,
    lineX: true,
    lineY: true,
    color: 0xffafaf,
    width: 2,
    zBias: 3,
  })
  .end()
  // Subdivide with near-invisible bevel to flat shade
  .subdivide({ width: 3, height: 3, bevel: 0.001 })
  .surface({ shaded: true, color: 0xffafaf })
  .end()
  // Draw second surface
  .group()
  .slice({ items: [1, 2] })
  .group()
  // Draw partial undivided wireframe
  .slice({ height: [0, 5] })
  .surface({
    fill: false,
    lineX: true,
    lineY: true,
    color: 0x5fcfff,
    width: 2,
    zBias: 3,
  })
  .end()
  // Subdivide with fractional bevel to flat shade with rounded joins
  .subdivide({ width: 3, height: 3, bevel: 1 / 3 })
  .surface({ shaded: true, color: 0x5fcfff })
  .group()
  // Draw partial divided wireframe
  .slice({ height: [0, 12] })
  .surface({
    fill: false,
    lineX: true,
    lineY: true,
    color: 0x5fcfff,
    width: 1,
    opacity: 0.75,
    zBias: 3,
  })
  .end()
  .end()
  // Draw third surface
  .group()
  .slice({ items: [2, 3] })
  // Subdivide evenly
  .subdivide({ width: 2, height: 2 })
  // Memoize to cache data
  .memo()
  // Apply 2D blur to smooth mesh
  // Clamp to ensure edge samples don't go out of bounds
  .clamp()
  .shader({ code: "#blur-2d" })
  .resample({ indices: 2 })
  // Memoize to cache data
  .memo()
  // Subdivide evenly
  .subdivide({ width: 2, height: 2 })
  // Memoize to cache data
  .memo()
  // Apply 2D blur to smooth mesh
  // Clamp to ensure edge samples don't go out of bounds
  .clamp()
  .shader({ code: "#blur-2d" })
  .resample({ indices: 2 })
  // Memoize to cache data
  .memo()
  // Subdivide evenly
  .subdivide({ width: 2, height: 2 })
  // Memoize to cache data
  .memo()
  // Apply 2D blur to smooth mesh
  // Clamp to ensure edge samples don't go out of bounds
  .clamp()
  .shader({ code: "#blur-2d" })
  .resample({ indices: 2 })
  // Memoize to cache data
  .memo()
  // Apply 2D blur to smooth mesh
  // Clamp to ensure edge samples don't go out of bounds
  .clamp()
  .shader({ code: "#blur-2d" })
  .resample({ indices: 2 })
  // Draw surface and wire
  .surface({ shaded: true, color: 0x4fff0f })
  .group()
  // Draw partial divided wireframe
  .slice({ height: [0, 33] })
  .surface({
    fill: false,
    lineX: true,
    lineY: true,
    color: 0x4fff6f,
    width: 1,
    opacity: 0.75,
    zBias: 3,
  })
  .end()
  .group()
  .resample({
    shader: null,
    size: "relative",
    height: 1 / 8,
  })
  // Draw partial subsampled wireframe
  .slice({ height: [0, 5] })
  .line({ color: 0x4fff6f, width: 2, zBias: 3 })
  .end()
  .group()
  .transpose({ order: "yx" })
  .resample({
    shader: null,
    size: "relative",
    height: 1 / 8,
  })
  // Draw partial subsampled wireframe
  .slice({ width: [0, 33], height: [0, 5] })
  .line({ color: 0x4fff6f, width: 2, zBias: 3 })
  .end()
  .end();
```

--------------------------------

### MathBox 4D Stereographic Setup

Source: https://github.com/unconed/mathbox/blob/master/examples/test/stereographic4.html

Configures a 4D stereographic projection using MathBox's `stereographic4` and `transform4` methods. It applies transformations to position and render multiple grid planes in different orientations within the 4D space.

```javascript
// Stereographic 4D
var wrapper = mathbox.transform();
var view = wrapper
  .stereographic4({
    range: [
      [-4, 4],
      [-4, 4],
      [-4, 4],
      [-1, 1],
    ],
    scale: [4, 4, 4, 1],
  })
  .transform4();

/// Grids
view
  .transform4({ position: [1, 0, 0, 0] })
  .grid({ axes: [2, 4], detailX: 75, detailY: 75, width: 2, opacity: 0.5, zBias: -60 })
  .grid({ axes: [3, 4], detailX: 75, detailY: 75, width: 2, opacity: 0.5, zBias: -60 })
  .grid({ axes: [2, 3], detailX: 75, detailY: 75, width: 2, opacity: 0.5, zBias: -60 });

///
view
  .transform4({ position: [0, 1, 0, 0] })
  .grid({ axes: [1, 4], detailX: 75, detailY: 75, width: 2, opacity: 0.5, zBias: -60 })
  .grid({ axes: [3, 4], detailX: 75, detailY: 75, width: 2, opacity: 0.5, zBias: -60 })
  .grid({ axes: [1, 3], detailX: 75, detailY: 75, width: 2, opacity: 0.5, zBias: -60 });

///
view
  .transform4({ position: [0, 0, 1, 0] })
  .grid({ axes: [1, 4], detailX: 75, detailY: 75, width: 2, opacity: 0.5, zBias: -60 })
  .grid({ axes: [2, 4], detailX: 75, detailY: 75, width: 2, opacity: 0.5, zBias: -60 })
  .grid({ axes: [1, 2], detailX: 75, detailY: 75, width: 2, opacity: 0.5, zBias: -60 });

///
view
  .transform4({ position: [-1, 0, 0, 0] })
  .grid({ axes: [2, 4], detailX: 75, detailY: 31, width: 2, opacity: 0.5, zBias: -60 })
  .grid({ axes: [3, 4], detailX: 75, detailY: 75, width: 2, opacity: 0.5, zBias: -60 })
  .grid({ axes: [2, 3], detailX: 75, detailY: 75, width: 2, opacity: 0.5, zBias: -60 });

///
view
  .transform4({ position: [0, -1, 0, 0] })
  .grid({ axes: [1, 4], detailX: 75, detailY: 75, width: 2, opacity: 0.5, zBias: -60 })
  .grid({ axes: [3, 4], detailX: 75, detailY: 75, width: 2, opacity: 0.5, zBias: -60 })
  .grid({ axes: [1, 3], detailX: 75, detailY: 75, width: 2, opacity: 0.5, zBias: -60 });

///
view
  .transform4({ position: [0, 0, -1, 0] })
  .grid({ axes: [1, 4], detailX: 75, detailY: 75, width: 2, opacity: 0.5, zBias: -60 })
  .grid({ axes: [2, 4], detailX: 75, detailY: 75, width: 2, opacity: 0.5, zBias: -60 })
  .grid({ axes: [1, 2], detailX: 75, detailY: 75, width: 2, opacity: 0.5, zBias: -60 });

///
view
  .transform4({ position: [0, 0, 0, 1] })
  .grid({ axes: [1, 3], detailX: 75, detailY: 75, width: 2, opacity: 0.5, zBias: -60 })
  .grid({ axes: [2, 3], detailX: 75, detailY: 75, width: 2, opacity: 0.5, zBias: -60 })
  .grid({ axes: [1, 2], detailX: 75, detailY: 75, width: 2, opacity: 0.5, zBias: -60 });

///
view
  .transform4({ position: [0, 0, 0, -1] })
  .grid({ axes: [1, 3], detailX: 75, detailY: 75, width: 2, opacity: 0.5, zBias: -60 })
  .grid({ axes: [2, 3], detailX: 75, detailY: 75, width: 2, opacity: 0.5, zBias: -60 })
  .grid({ axes: [1, 2], detailX: 75, detailY: 75, width: 2, opacity: 0.5, zBias: -60 });
```

--------------------------------

### Initialize MathBox with VR and UI Plugins

Source: https://github.com/unconed/mathbox/blob/master/examples/vr/surface.html

Sets up the MathBox instance, enabling VR, UI, and controls plugins. It configures the VR controls to use the Three.js VRControls class.

```javascript
mathbox = MathBox.mathBox({
  plugins: ["VR", "ui", "controls"],
  controls: {
    klass: THREE.VRControls,
  },
});
```