# Diophantine Sphere Component Conversation Log

Created: June 7, 2026

Current folder before relocation:

`/Users/jenstandstad/Documents/glitch_diophantine_sphere`

## Initial Setup

The project began as an empty git folder. The sibling project `../glitch-bubble-simulator` was inspected and used as the structural template. Its standalone Glitch component shape was copied:

- `src/Component.tsx`
- `src/index.tsx`
- `src/dev.tsx`
- `src/styles.module.css`
- `src/types.ts`
- `vite.config.ts`
- `tsconfig.json`
- `package.json`
- `glitch.manifest.json`
- `README.md`

No sibling `SKILL.md` file was found. The readable sibling docs were the README files for `glitch-bubble-simulator` and `glitch_demographic_wave`.

## Core Visualization

The component was renamed and rebuilt as `diophantine-sphere`.

The initial mathematical model:

`|x| + |y| + |z| = C`

where `x`, `y`, and `z` are integers.

Each integer vector is reduced by `gcd(|x|, |y|, |z|)` so collinear integer vectors share one distinct ray. Points are then placed along those rays.

The component uses Three.js for the 3D scene.

## Controls Added

The first controls were:

- allow negative values
- radius
- complexity

Then these were extended into the current control set:

- `Surface`, `Single C`, `Range 1..C` mode switch
- `Allow negative values`
- `Normalize distance`
- `D` for distance / radius
- `C` for complexity
- `R` for dot radius

The public parameter labels in `src/index.tsx` were simplified to `D`, `C`, and `R`.

## Modes

### Surface

Shows a continuous surface, representing infinitely many points.

When `Normalize distance` is checked:

`x² + y² + z² = r²`

This is the round Euclidean sphere.

When `Normalize distance` is unchecked:

`|x| + |y| + |z| = r`

This is the continuous L1 surface, rendered as an octahedral surface.

### Single C

Shows only vectors satisfying:

`|x| + |y| + |z| = C`

This mode is intended to reveal the triangular grid pattern.

### Range 1..C

Shows all complexities from `1` through `C`.

Overlapping rays are merged. Point color indicates how many vectors collapse to the same ray direction.

## Distance Normalization

When `Normalize distance` is checked, ray points are placed on the Euclidean sphere:

`sqrt(x² + y² + z²) = D`

When unchecked, ray points are scaled until:

`|x| + |y| + |z| = D`

This lets the user compare the round Euclidean projection with the taxicab / complexity boundary.

## Color and Style

The visual style was shifted toward a green/yellow retro-futuristic palette.

The overlap color ramp now runs:

green -> yellow -> amber

The layout was simplified:

- explanatory footer hidden
- small kicker labels hidden
- controls are on the left
- square 3D viewport is on the right
- count boxes were moved out of the header flow so they do not shrink the viewport
- viewport remains square

The latest measured browser viewport size was approximately:

`643 x 643`

## 3D Scene Interaction

The viewport supports:

- drag rotation
- mouse wheel zoom
- pinch zoom using two-pointer distance tracking

Idle auto-rotation was reduced to 25% of the original speed.

After user drag or zoom interaction, idle rotation restarts from zero and slowly accelerates back.

## Surface Shading

The initial continuous sphere looked flat. The surface shell was changed from unlit `MeshBasicMaterial` to lit `MeshLambertMaterial`.

Lighting added:

- ambient light
- warm green/yellow key light
- green fill light
- pale rim light

The CSS viewport grid overlay was removed because it created vertical bars on the right side of the scene.

## Current Verification State

The following checks were run repeatedly after changes:

- `npm install`
- `npm run build`
- local Vite preview at `http://127.0.0.1:3003/`
- browser DOM/layout checks
- browser console error checks

The current build passes:

`npm run build`

The latest bundle exists at:

`dist/diophantine-sphere.iife.js`

## Notes

The project is currently located in the wrong folder and will be moved. This log was created so the design and implementation context travels with the folder.