Files

171 lines
4.0 KiB
Markdown

# 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.