← Back to Bit

MATHEMATICS OF BIT

Geometric and computational foundations of the Bit character from TRON (1982)

1. Binary State Machine

Bit is modeled as a finite state machine with three states:

$$S \in \{\text{neutral},\; \text{yes},\; \text{no}\}$$

The neutral state is the resting configuration. External input drives transitions to the yes or no state, and after a timeout (1500 ms), the machine returns to neutral:

$$\delta(S_{\text{neutral}}, I_{\text{yes}}) = S_{\text{yes}}$$ $$\delta(S_{\text{neutral}}, I_{\text{no}}) = S_{\text{no}}$$ $$\delta(S_{\text{yes}}, \tau) = S_{\text{neutral}}$$ $$\delta(S_{\text{no}}, \tau) = S_{\text{neutral}}$$

where $\tau$ represents the timeout event. Each state maps to a distinct polyhedron and color:

2. The Golden Ratio

The golden ratio appears throughout the geometry of both the icosahedron and dodecahedron:

$$\varphi = \frac{1 + \sqrt{5}}{2} \approx 1.618033989$$

The vertices of a regular icosahedron lie at cyclic permutations of:

$$(0,\; \pm 1,\; \pm \varphi)$$

The vertices of a regular dodecahedron lie at:

$$(\pm 1, \pm 1, \pm 1), \quad (0, \pm \varphi^{-1}, \pm \varphi), \quad (\pm \varphi^{-1}, \pm \varphi, 0), \quad (\pm \varphi, 0, \pm \varphi^{-1})$$

In the implementation, $\varphi$ is computed directly:

var PHI = (1 + Math.sqrt(5)) / 2;

3. Stellated Icosahedron (Neutral)

The neutral geometry is constructed by stellating a regular icosahedron -- raising a spike from each triangular face.

Construction

  1. Begin with THREE.IcosahedronGeometry(1, 0), which produces 12 vertices and 20 equilateral triangular faces.
  2. Extract unique vertices by deduplication. Each vertex position is rounded to 5 decimal places to form a key string, and duplicates are collapsed via a hash map.
  3. For each triangular face with vertices $\vec{v}_1, \vec{v}_2, \vec{v}_3$:
    • Compute the centroid: $\vec{c} = \dfrac{\vec{v}_1 + \vec{v}_2 + \vec{v}_3}{3}$
    • Compute the face normal via cross product: $\vec{n} = (\vec{v}_2 - \vec{v}_1) \times (\vec{v}_3 - \vec{v}_1)$, then normalize.
    • Ensure the normal points outward: if $\vec{n} \cdot \vec{c} < 0$, negate $\vec{n}$.
    • Place the spike apex at: $\vec{a} = \vec{c} + 0.3 \cdot \hat{n}$
  4. Replace each original triangle with three new triangles: $(\vec{v}_1, \vec{v}_2, \vec{a})$, $(\vec{v}_2, \vec{v}_3, \vec{a})$, $(\vec{v}_3, \vec{v}_1, \vec{a})$.

The result: 20 faces $\times$ 3 = 60 triangular faces, stored as a raw Float32Array in a Three.js BufferGeometry.

4. Regular Octahedron (Yes)

The yes state uses a regular octahedron, the simplest of the three geometries:

new THREE.OctahedronGeometry(1.2, 0)

The octahedron is a Platonic solid -- one of only five convex regular polyhedra. Its Euler characteristic confirms:

$$V - E + F = 6 - 12 + 8 = 2$$

The smooth, rounded feel of the octahedron (relative to the spiky alternatives) makes it the natural choice for the affirmative state.

5. Stellated Dodecahedron (No)

The no state is the most aggressive geometry: a stellated dodecahedron with randomized spike heights.

Construction

  1. Begin with THREE.DodecahedronGeometry(1, 0). Three.js internally triangulates each of the 12 pentagonal faces, producing a set of triangles.
  2. Reconstruct pentagonal faces: group the triangles back into their parent pentagons. Two triangles belong to the same pentagon if:
    • Their normals are nearly parallel: $\vec{n}_1 \cdot \vec{n}_2 > 0.95$
    • Their centroids are close: $\|\vec{c}_1 - \vec{c}_2\| < 1.2$
  3. For each pentagonal group $g$:
    • Compute the face center $\vec{c}_g$ as the average of all vertices in the group.
    • Compute the outward normal $\hat{n}_g$ from the first triangle; negate if $\hat{n}_g \cdot \vec{c}_g < 0$.
    • Apply a seeded random variation to the spike height.
  4. For each sub-triangle in the group, create three spike triangles toward the apex $\vec{a} = \vec{c}_g + h \cdot \hat{n}_g$.

Seeded Randomness

Spike heights vary per face using a deterministic pseudo-random function (a GPU hash trick):

function seededRandom(seed) {
    var x = Math.sin(seed * 127.1 + seed * 311.7) * 43758.5453;
    return x - Math.floor(x);
}

The seed for face $g$ is $7g + 3$. This produces a value in $[0, 1)$, which scales the spike height:

$$h = 1.8 \times (0.8 + r \times 1.0)$$

where $r = \text{seededRandom}(7g + 3)$. The effective range is:

$$h \in [1.44,\; 3.24]$$

This variation gives the no form its irregular, threatening silhouette.

6. Animation Mathematics

Rotation

Each frame, the mesh rotates around two axes at rates that depend on the current state:

$$\theta_y(t+1) = \theta_y(t) + \omega$$ $$\theta_x(t+1) = \theta_x(t) + 0.4\omega$$

where $\omega$ is the per-frame angular speed:

The y-axis rotates 2.5x faster than the x-axis (ratio $1 : 0.4$), creating an asymmetric tumble.

Floating

A sinusoidal vertical displacement gives Bit a hovering quality:

$$y(t) = 0.15 \sin(1.5t)$$

where $t$ is the elapsed time in seconds from a THREE.Clock. The amplitude is 0.15 units and the period is $\frac{2\pi}{1.5} \approx 4.19$ seconds.

7. Dual Polyhedra

The icosahedron and dodecahedron are dual polyhedra. Duality means:

V E F
Icosahedron 12 30 20
Dodecahedron 20 30 12

Bit morphs between stellations of these duals: the neutral state stellates the icosahedron, the no state stellates the dodecahedron. The binary character literally oscillates between dual geometric forms.

8. Information Theory

From an information-theoretic perspective, Bit encodes exactly one bit of Shannon entropy. Assuming equal probability of yes and no:

$$H = -\sum_{i} p_i \log_2 p_i = -(0.5 \log_2 0.5 + 0.5 \log_2 0.5) = 1 \text{ bit}$$

This is the irreducible minimum of meaningful information: a single binary decision. The character is the physical (digital) embodiment of this quantity.

9. Lighting Model

The scene uses Phong shading with flat interpolation, creating the crystalline faceted look. The lighting rig consists of four sources:

  1. Ambient light -- color #404040, intensity 0.4. Provides baseline illumination so no face is fully black.
  2. Main directional light -- white, intensity 1.0, positioned at $(2, 3, 2)$. The primary light source.
  3. Fill directional light -- blue-tinted (#4488cc), intensity 0.3, positioned at $(-2, -1, -2)$. Softens shadows on the opposite side.
  4. Rim point light -- cyan (#00ddff), intensity 0.5, range 20, positioned at $(0, 2, 4)$. Adds a TRON-style edge glow.

The material is MeshPhongMaterial with:

The Phong reflection model computes the color at each fragment as:

$$I = k_a I_a + \sum_j \left[ k_d (\hat{n} \cdot \hat{l}_j) I_j + k_s (\hat{r}_j \cdot \hat{v})^{\alpha} I_j \right]$$

where $k_a$ is the ambient coefficient, $k_d$ the diffuse, $k_s$ the specular, $\hat{n}$ the face normal, $\hat{l}_j$ the light direction, $\hat{r}_j$ the reflection vector, $\hat{v}$ the view direction, and $\alpha = 80$ the shininess exponent.