4d-grapher

Implicit 4D Grapher

The 4D Grapher is an innovative project designed to visualize objects within the four-dimensional space (\mathbb{R}^4) with coordinates (x, y, z, w). The main challenge lies in translating these 4D points into a form that can be comprehended in our three-dimensional world. This is accomplished through a unique one-point projection along the w-axis, allowing users to experience a single "slice" of the complete 4D object.

Features and Capabilities

Projection

The process of projection converts higher-dimensional points into lower-dimensional representations. The positioning of the camera at (0, 0, d) and a point at (x, y, z) results in the following projection formula:

[ x' = \frac{xd}{d-z}, \quad y' = \frac{yd}{d-z} ]

This scaling adjusts based on distance from the camera, and when extended to 4D, the scale factor is given by (\frac{d}{d-w}). The resulting transformations for the coordinates are:

[ x' = x \cdot \text{scale}, \quad y' = y \cdot \text{scale}, \quad z' = z \cdot \text{scale} ]

Rotations

In 4D space, rotations occur around a plane, with six distinct rotation planes available: xy, xz, xw, yz, yw, and zw. For example, the rotation formulas in the xw plane are:

[ x' = x\cos\theta - w\sin\theta, \quad w' = x\sin\theta + w\cos\theta, \quad y' = y, \quad z' = z ]

This generalization of 2D rotation is crucial for visualizing movements within 4D.

Marching Cubes

To create a smooth surface rendering of the 4D objects, a method known as Marching Cubes is employed. This involves fixing w as a constant value (the "slice") and evaluating a function (f(x, y, z, w)) on a 3D grid, after which the Marching Cubes algorithm extracts the isosurface at a specific contour level. By classifying each voxel corner as inside or outside and utilizing interpolation for edge intersections, a smooth surface is generated:

[ p = p_1 + \frac{\text{iso} - v_1}{v_2 - v_1} \cdot (p_2 - p_1) ]

This comprehensive approach allows for the dynamic rendering of the surface, as adjusting w or any rotation angle necessitates a complete recomputation of the surface.

Development Journey

The project development involved several key stages:

• Day 1: Initiated with a rotating cube in 2D for projection testing.
• Day 2: A tesseract was rendered, confirming the successful translation from 4D to 2D.
• Days 3-4: Integration of equation input and enhancements for point connections.
• Days 5-9: Transitioned from point clouds to robust 3D meshes using marching cubes, culminating in a functional rendering pipeline.
• Day 10: Finalized with UI enhancements, including bounding box implementation.

The code, showcasing the evolution from initial attempts to the current implementation, can be explored in the archive/ directory.

Technology Stack

The 4D Grapher is built using several advanced technologies:

• three.js for rendering and built-in marching cubes implementation.
• Vite for development and build processes.
• Netlify for deployment of the application.

Usage

For those interested in exploring the 4D Grapher, a live demo is available at live demo. This provides an interactive way to input equations, rotate dimensions, and visualize the complexities of four-dimensional space.