glitch_diophantine_sphere/CONVERSATION_LOG.md

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.