grok4.20 “If you ever open-source the globe + the SVD → kinematic pipeline, people in the AV perception community (OpenPCDet, MMDetection3D, comma.ai OpenPilot forks) will immediately recognize it as “eigenportfolio-style embedding for dynamic objects.” That’s how close the math is.”
grok4.4 v00
gemini v00
<!DOCTYPE html>
<html class="bg-[#050608] text-zinc-300">
<head>
<meta charset="UTF-8">
<title>Sovereign | 5D Kinematic Globe – Lens View</title>
<script src="<https://cdn.tailwindcss.com>"></script>
<script src="<https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js>"></script>
<style>
::-webkit-scrollbar { display: none; }
body { margin: 0; overflow: hidden; font-family: 'Courier New', Courier, monospace; }
canvas { display: block; position: absolute; inset: 0; z-index: 0; }
#ui-layer { position: relative; z-index: 10; pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
</style>
</head>
<body class="bg-[#050608] h-screen w-screen">
<div id="ui-layer" class="w-full h-full p-5 flex justify-between select-none">
<!-- LEFT PANEL – Controls + Global Metrics -->
<div class="flex flex-col gap-4 w-72">
<div class="border border-zinc-800 bg-black/75 backdrop-blur-sm p-4 rounded-lg pointer-events-auto shadow-lg shadow-black/60">
<h2 class="text-blue-400 font-bold uppercase text-xs tracking-wider border-b border-zinc-800 pb-2 mb-3">HEGEMON LENS V2</h2>
<div class="text-xs space-y-1.5 text-zinc-400">
<div class="flex justify-between"><span>Topology</span><span class="text-zinc-200">Spherical 5D</span></div>
<div class="flex justify-between"><span>Render Engine</span><span class="text-zinc-200">WebGL</span></div>
<div class="flex justify-between"><span>Sync Status</span><span class="text-amber-400 font-medium">SIMULATION</span></div>
</div>
</div>
<div class="border border-zinc-800 bg-black/75 backdrop-blur-sm p-4 rounded-lg pointer-events-auto text-xs">
<h3 class="text-blue-400 uppercase text-[11px] font-bold mb-2">GLOBAL LENS METRICS</h3>
<div id="global-metrics" class="space-y-1 text-zinc-400">
<div class="flex justify-between"><span>Active Vectors</span><span id="g-count" class="text-emerald-400 font-bold">0000</span></div>
<div class="flex justify-between"><span>Avg Bayesian Pull</span><span id="g-bayes" class="text-white font-bold">0.0000</span></div>
<div class="flex justify-between"><span>Avg Entropy (Z)</span><span id="g-entropy" class="text-zinc-300 font-bold">0.0000</span></div>
<div class="flex justify-between"><span>Dominant Regime</span><span id="g-phase" class="font-bold text-amber-400">—</span></div>
</div>
</div>
<div class="border border-zinc-800 bg-black/60 p-3 rounded-lg pointer-events-auto text-[10px] grid grid-cols-2 gap-x-3 gap-y-1.5">
<div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full bg-[#33cc66]"></div>Recovery</div>
<div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full bg-[#19e633]"></div>Bull</div>
<div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full bg-[#ffdd33]"></div>Top</div>
<div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full bg-[#ff8833]"></div>Early Recession</div>
<div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full bg-[#ff3333]"></div>Recession</div>
<div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full bg-[#c63366]"></div>Bear</div>
</div>
</div>
<!-- RIGHT PANEL – Hover/Click Inspector -->
<div id="inspector-pane" class="w-80 border border-zinc-800 bg-black/85 backdrop-blur-md p-5 rounded-lg pointer-events-auto hidden flex-col transition-all duration-200 shadow-2xl shadow-black/70">
<div class="flex justify-between items-center border-b border-zinc-800 pb-3 mb-4">
<h2 id="ui-ticker" class="text-amber-300 font-bold uppercase text-base tracking-widest">—</h2>
<span id="ui-sdr-hex" class="px-2.5 py-1 rounded text-xs font-mono font-bold bg-zinc-900 text-white border border-zinc-700">#000000</span>
</div>
<div class="space-y-3 text-sm">
<div class="flex justify-between"><span class="text-zinc-500">Stance</span><span id="ui-stance" class="text-emerald-400 font-bold">—</span></div>
<div class="flex justify-between"><span class="text-zinc-500">Regime</span><span id="ui-phase" class="text-blue-300 font-bold">—</span></div>
<div class="flex justify-between"><span class="text-zinc-500">Entropy (Z)</span><span id="ui-entropy" class="text-zinc-200">0.0000</span></div>
<div class="flex justify-between"><span class="text-zinc-500">Kinematic</span><span id="ui-kinematics" class="text-zinc-200">0.00, 0.00</span></div>
<div class="flex justify-between"><span class="text-zinc-500">Bayes Pull</span><span id="ui-bayes" class="text-white">0.0000</span></div>
</div>
<div class="mt-5 border border-zinc-800 p-1.5 rounded-full overflow-hidden">
<div id="gradient-bar" class="h-2 w-full rounded-full bg-gradient-to-r from-[#050608] to-white"></div>
</div>
</div>
</div>
<div id="canvas-container"></div>
<script>
// ───────────────────────────────────────────────
// SOVEREIGN GLASS LENS – Standalone V2
// ───────────────────────────────────────────────
const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x050608, 0.0018);
const camera = new THREE.PerspectiveCamera(55, innerWidth / innerHeight, 0.1, 2000);
camera.position.set(0, 35, 110);
const renderer = new THREE.WebGLRenderer({ antialias: false, powerPreference: "low-power" });
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
document.getElementById('canvas-container').appendChild(renderer.domElement);
// Lighting – makes glass lens feel real
scene.add(new THREE.AmbientLight(0xaaaaaa, 0.4));
const lensLight = new THREE.PointLight(0x88ccff, 2.2, 500);
lensLight.position.set(20, 60, 50);
scene.add(lensLight);
const GLOBE_RADIUS = 60;
// Glass-like boundary (Local Void)
const sphereMat = new THREE.MeshPhongMaterial({
color: 0x27272a, wireframe: true, transparent: true, opacity: 0.38,
shininess: 100, specular: 0x99eeff
});
const boundingSphere = new THREE.Mesh(new THREE.SphereGeometry(GLOBE_RADIUS, 48, 32), sphereMat);
scene.add(boundingSphere);
// Great Attractor core + glow
scene.add(new THREE.Mesh(new THREE.SphereGeometry(4, 64, 64), new THREE.MeshBasicMaterial({color: 0xffdd44})));
scene.add(new THREE.Mesh(new THREE.SphereGeometry(9, 32, 32), new THREE.MeshBasicMaterial({
color: 0xffaa00, transparent: true, opacity: 0.22, blending: THREE.AdditiveBlending
})));
// Dark matter sand
const sandCount = 12000;
const sandGeo = new THREE.BufferGeometry();
const pos = new Float32Array(sandCount * 3);
for (let i = 0; i < sandCount * 3; i += 3) {
const r = GLOBE_RADIUS * Math.cbrt(Math.random());
const theta = Math.random() * Math.PI * 2;
const phi = Math.acos(2 * Math.random() - 1);
pos[i] = r * Math.sin(phi) * Math.cos(theta);
pos[i+1] = r * Math.sin(phi) * Math.sin(theta);
pos[i+2] = r * Math.cos(phi);
}
sandGeo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
const sandMat = new THREE.PointsMaterial({ color: 0x4b4b52, size: 0.16, transparent: true, opacity: 0.5 });
scene.add(new THREE.Points(sandGeo, sandMat));
// ─── Kinematic Instanced Streaks ───
const MAX_MOVERS = 1800;
let activeMovers = 0;
const streakGeo = new THREE.CylinderGeometry(0.42, 0.42, 7, 6);
streakGeo.translate(0, 3.5, 0);
streakGeo.rotateX(Math.PI / 2);
const shaderMat = new THREE.ShaderMaterial({
vertexShader: `
attribute vec3 instanceColor;
varying vec3 vColor;
void main() {
vColor = instanceColor * 1.12;
gl_Position = projectionMatrix * modelViewMatrix * instanceMatrix * vec4(position, 1.0);
}`,
fragmentShader: `varying vec3 vColor; void main() { gl_FragColor = vec4(vColor, 0.94); }`,
transparent: true, depthWrite: false, blending: THREE.AdditiveBlending
});
const movers = new THREE.InstancedMesh(streakGeo, shaderMat, MAX_MOVERS);
const dummy = new THREE.Object3D();
const colors = new Float32Array(MAX_MOVERS * 3);
movers.instanceColor = new THREE.InstancedBufferAttribute(colors, 3);
movers.count = 0;
scene.add(movers);
let ledger = [];
const phaseColors = {
"EARLY_RECOVERY": [0.2,0.85,0.45], "BULL_MARKET": [0.15,0.95,0.25],
"MARKET_TOP": [0.95,0.85,0.15], "EARLY_RECESSION": [0.95,0.55,0.15],
"FULL_RECESSION": [0.95,0.15,0.15], "BEAR_MARKET": [0.65,0.15,0.35]
};
const phaseKeys = Object.keys(phaseColors);
function generateMockData() {
activeMovers = Math.floor(Math.random() * 400) + 800;
ledger = [];
for (let i = 0; i < activeMovers; i++) {
const phase = phaseKeys[Math.floor(Math.random() * phaseKeys.length)];
const c = phaseColors[phase];
colors[i*3] = c[0]; colors[i*3+1] = c[1]; colors[i*3+2] = c[2];
const x = (Math.random()-0.5)*28;
const y = (Math.random()-0.5)*28;
const z = Math.random() * 65;
ledger.push({
ticker: `H${Math.floor(Math.random()*9000+1000)}`,
x, y, z,
bayes: Math.random() * 0.98 + 0.02,
phase,
stance: z > 48 ? "CIRCUIT_LOCK" : (z > 20 ? "ACCUMULATE" : "OBSERVE"),
hex: '#' + c.map(v=>Math.round(v*255).toString(16).padStart(2,'0')).join('').toUpperCase(),
pos: new THREE.Vector3(x, z - GLOBE_RADIUS*0.6, y),
vel: new THREE.Vector3(x*0.04, 0, y*0.04)
});
}
movers.count = activeMovers;
movers.geometry.attributes.instanceColor.needsUpdate = true;
updateGlobalMetrics();
}
function updateGlobalMetrics() {
if (!activeMovers) return;
const avgBayes = ledger.reduce((s,d)=>s+d.bayes,0) / activeMovers;
const avgZ = ledger.reduce((s,d)=>s+(d.z||0),0) / activeMovers;
const counts = {};
ledger.forEach(d => counts[d.phase] = (counts[d.phase]||0) + 1);
const domPhase = Object.keys(counts).reduce((a,b)=>counts[a]>counts[b]?a:b, "—");
document.getElementById('g-count').textContent = activeMovers.toString().padStart(4,'0');
document.getElementById('g-bayes').textContent = avgBayes.toFixed(4);
document.getElementById('g-entropy').textContent = avgZ.toFixed(4);
document.getElementById('g-phase').textContent = domPhase;
document.getElementById('g-phase').className = `font-bold ${domPhase.includes('BULL')||domPhase.includes('RECOVERY')?'text-emerald-400':'text-amber-400'}`;
}
// ─── Interaction ───
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
let lockedId = null;
window.addEventListener('mousemove', e => {
mouse.x = (e.clientX / innerWidth) * 2 - 1;
mouse.y = -(e.clientY / innerHeight) * 2 + 1;
updateInspector();
});
window.addEventListener('click', e => {
mouse.x = (e.clientX / innerWidth) * 2 - 1;
mouse.y = -(e.clientY / innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const hit = raycaster.intersectObject(movers);
lockedId = hit.length ? hit[0].instanceId : null;
document.body.style.cursor = lockedId ? 'none' : 'default';
updateInspector();
});
function updateInspector() {
raycaster.setFromCamera(mouse, camera);
const hits = raycaster.intersectObject(movers);
const idx = lockedId ?? (hits.length ? hits[0].instanceId : -1);
const data = ledger[idx];
const pane = document.getElementById('inspector-pane');
if (data) {
document.getElementById('ui-ticker').textContent = data.ticker;
const hexEl = document.getElementById('ui-sdr-hex');
hexEl.textContent = data.hex;
hexEl.style.color = data.hex;
hexEl.style.backgroundColor = data.hex + '22';
const stanceEl = document.getElementById('ui-stance');
stanceEl.textContent = data.stance;
stanceEl.className = data.stance.includes('ACCUMULATE') ? 'text-emerald-400 font-bold' :
data.stance.includes('LOCK') ? 'text-red-400 font-bold' : 'text-blue-300 font-bold';
document.getElementById('ui-phase').textContent = data.phase;
document.getElementById('ui-entropy').textContent = (data.z||0).toFixed(4);
document.getElementById('ui-kinematics').textContent = `${data.x.toFixed(2)}, ${data.y.toFixed(2)}`;
document.getElementById('ui-bayes').textContent = data.bayes.toFixed(4);
document.getElementById('gradient-bar').style.background = `linear-gradient(90deg, #050608, ${data.hex})`;
pane.classList.remove('hidden');
pane.classList.add('flex');
} else {
pane.classList.add('hidden');
pane.classList.remove('flex');
}
}
// ─── Animation Loop ───
function animate() {
requestAnimationFrame(animate);
boundingSphere.rotation.y += 0.0004;
scene.children[3].rotation.y -= 0.00025; // sand
for (let i = 0; i < activeMovers; i++) {
const d = ledger[i];
d.pos.add(d.vel);
const dist = d.pos.length();
if (dist > GLOBE_RADIUS * 1.02) d.pos.multiplyScalar(-0.97);
dummy.position.copy(d.pos);
dummy.lookAt(d.pos.clone().add(d.vel));
const force = Math.hypot(d.x, d.y);
dummy.scale.set(1, 1, 1 + force * 0.09);
dummy.updateMatrix();
movers.setMatrixAt(i, dummy.matrix);
}
movers.instanceMatrix.needsUpdate = true;
// Gentle camera orbit
const t = Date.now() * 0.00008;
camera.position.x = Math.sin(t) * 130;
camera.position.z = Math.cos(t) * 130;
camera.lookAt(0,0,0);
renderer.render(scene, camera);
}
// Start
generateMockData();
setInterval(generateMockData, 14000); // refresh feel every ~14s
animate();
window.addEventListener('resize', () => {
camera.aspect = innerWidth / innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(innerWidth, innerHeight);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JC-SDK | Sovereign Globe Matrix</title>
<style>
body { margin: 0; overflow: hidden; background-color: #f0f2f5; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
canvas { display: block; }
/* Outlook-Centric Glassmorphism Pane */
#inspector-pane {
position: absolute; top: 20px; right: 20px; width: 340px;
background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(200, 200, 200, 0.5);
border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.1);
padding: 24px; display: none; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.header-row { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #e1dfdd; padding-bottom: 12px; margin-bottom: 16px; }
h2 { margin: 0; font-size: 1.5rem; color: #201f1e; font-weight: 600; letter-spacing: -0.5px; }
.sdr-badge { padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.data-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.95rem; }
.data-label { color: #605e5c; font-weight: 500; }
.data-value { color: #0078d4; font-weight: 600; font-family: 'Courier New', Courier, monospace; }
#gradient-bar { height: 6px; width: 100%; border-radius: 3px; margin-top: 20px; }
#status-indicator { position: absolute; bottom: 20px; left: 20px; color: #a19f9d; font-size: 0.85rem; font-family: monospace; }
</style>
</head>
<body>
<div id="inspector-pane">
<div class="header-row">
<h2 id="ui-ticker">TICKER</h2>
<span id="ui-sdr-hex" class="sdr-badge">#000000</span>
</div>
<div class="data-row"><span class="data-label">Bayesian Gravity:</span><span id="ui-bayes" class="data-value">0.0000</span></div>
<div class="data-row"><span class="data-label">SVD Mesh Fold:</span><span id="ui-svd" class="data-value">0.0000</span></div>
<div class="data-row"><span class="data-label">Quantum Mark (Psi):</span><span id="ui-qmark" class="data-value">0.0000</span></div>
<div class="data-row"><span class="data-label">Kinematic Velocity:</span><span id="ui-vel" class="data-value">0.00</span></div>
<div id="gradient-bar"></div>
</div>
<div id="status-indicator">JC-SDK WEB3NODE // SPHERICAL TOPOLOGY LIVE // LEDGER: SYNCING</div>
<script src="<https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js>"></script>
<script>
// --- 1. LEAN SCENE & CAMERA ---
const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0xf0f2f5, 0.0015);
const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 30, 120);
const renderer = new THREE.WebGLRenderer({ antialias: false, powerPreference: "low-power", alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);
const GLOBE_RADIUS = 50;
// --- 2. THE LOCAL VOID (The Glass Sphere Boundary) ---
const sphereGeo = new THREE.SphereGeometry(GLOBE_RADIUS, 32, 32);
const sphereMat = new THREE.MeshBasicMaterial({ color: 0xc8c6c4, wireframe: true, transparent: true, opacity: 0.05 });
const boundingSphere = new THREE.Mesh(sphereGeo, sphereMat);
scene.add(boundingSphere);
// --- 3. THE AIRY SAND (Background Dark Matter / Liquidity) ---
const sandCount = 15000;
const sandGeo = new THREE.BufferGeometry();
const sandPos = new Float32Array(sandCount * 3);
for(let i=0; i<sandCount*3; i+=3) {
// Distribute randomly within the sphere
const r = GLOBE_RADIUS * Math.cbrt(Math.random());
const theta = Math.random() * 2 * Math.PI;
const phi = Math.acos(2 * Math.random() - 1);
sandPos[i] = r * Math.sin(phi) * Math.cos(theta);
sandPos[i+1] = r * Math.sin(phi) * Math.sin(theta);
sandPos[i+2] = r * Math.cos(phi);
}
sandGeo.setAttribute('position', new THREE.BufferAttribute(sandPos, 3));
const sandMat = new THREE.PointsMaterial({ color: 0xa19f9d, size: 0.1, transparent: true, opacity: 0.4 });
const sandSystem = new THREE.Points(sandGeo, sandMat);
scene.add(sandSystem);
// --- 4. THE MOVERS (Pastel Streaks via InstancedMesh) ---
const MOVER_COUNT = 2000;
// Using a cylinder to represent a "streak" of movement
const streakGeo = new THREE.CylinderGeometry(0.2, 0.2, 4, 8);
streakGeo.translate(0, 2, 0); // Pivot at the base
streakGeo.rotateX(Math.PI / 2); // Align length with Z-axis for lookAt()
const pastelShader = new THREE.ShaderMaterial({
vertexShader: `
attribute vec3 instanceColor;
attribute float instanceAlpha;
varying vec3 vColor;
varying float vAlpha;
void main() {
vColor = instanceColor;
vAlpha = instanceAlpha;
gl_Position = projectionMatrix * modelViewMatrix * instanceMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
varying vec3 vColor;
varying float vAlpha;
void main() {
// Soften colors to pastel directly on GPU
vec3 pastel = mix(vColor, vec3(1.0), 0.4);
gl_FragColor = vec4(pastel, vAlpha);
}
`,
transparent: true,
depthWrite: false
});
const moversMesh = new THREE.InstancedMesh(streakGeo, pastelShader, MOVER_COUNT);
const dummy = new THREE.Object3D();
const colors = new Float32Array(MOVER_COUNT * 3);
const alphas = new Float32Array(MOVER_COUNT);
const ledgerData = [];
// Initialize Ledger Data & Physics State
for (let i = 0; i < MOVER_COUNT; i++) {
const bayes = Math.random();
const qmark = Math.random();
const svd = Math.random() * 1.5;
// Start position inside sphere
const pos = new THREE.Vector3().randomDirection().multiplyScalar(Math.random() * GLOBE_RADIUS);
// Velocity vector
const vel = new THREE.Vector3().randomDirection().multiplyScalar(0.1 + Math.random() * 0.4);
const r = Math.random(), g = Math.random(), b = Math.random();
colors[i*3] = r; colors[i*3+1] = g; colors[i*3+2] = b;
alphas[i] = 0.3 + (qmark * 0.7); // Q-Mark controls opacity/pulse
ledgerData.push({
id: i,
ticker: `NODE-${Math.floor(Math.random()*9000)+1000}`,
pos: pos, vel: vel,
bayes: bayes, svd: svd, qmark: qmark,
hex: '#' + [r,g,b].map(x => Math.round(x*255).toString(16).padStart(2, '0')).join('').toUpperCase()
});
}
moversMesh.instanceColor = new THREE.InstancedBufferAttribute(colors, 3);
moversMesh.setAttribute('instanceAlpha', new THREE.InstancedBufferAttribute(alphas, 1));
scene.add(moversMesh);
// --- 5. RAYCASTING (Outlook Inspector Update) ---
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
const uiPane = document.getElementById('inspector-pane');
window.addEventListener('mousemove', (event) => {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
// Expand raycaster threshold to hit thin streaks easily
raycaster.params.InstancedMesh.threshold = 1.5;
const intersects = raycaster.intersectObject(moversMesh);
if (intersects.length > 0) {
const data = ledgerData[intersects[0].instanceId];
document.getElementById('ui-ticker').innerText = data.ticker;
document.getElementById('ui-sdr-hex').innerText = data.hex;
document.getElementById('ui-sdr-hex').style.backgroundColor = data.hex;
document.getElementById('ui-bayes').innerText = data.bayes.toFixed(4);
document.getElementById('ui-svd').innerText = data.svd.toFixed(4);
document.getElementById('ui-qmark').innerText = data.qmark.toFixed(4);
document.getElementById('ui-vel').innerText = data.vel.length().toFixed(3);
document.getElementById('gradient-bar').style.background = `linear-gradient(90deg, #f0f2f5 0%, ${data.hex} 100%)`;
uiPane.style.display = 'block';
document.body.style.cursor = 'crosshair';
} else {
uiPane.style.display = 'none';
document.body.style.cursor = 'default';
}
});
// --- 6. KINEMATIC RENDER LOOP ---
const targetPos = new THREE.Vector3();
function animate() {
requestAnimationFrame(animate);
// Rotate the macro structure slightly
sandSystem.rotation.y += 0.0005;
boundingSphere.rotation.y -= 0.0002;
// Update physical trajectories for all instanced streaks
for (let i = 0; i < MOVER_COUNT; i++) {
const data = ledgerData[i];
// Move position along velocity vector
data.pos.add(data.vel);
// Gravitational Pull of the Bayesian Center
// High bayes = pulled to center. Low bayes = drifts to edge.
const distToCenter = data.pos.length();
const bayesianTargetRadius = GLOBE_RADIUS * (1.0 - data.bayes);
if (distToCenter > GLOBE_RADIUS) {
// Wrap around if it hits the Local Void boundary (Snow Globe effect)
data.pos.multiplyScalar(-0.99);
}
// Calculate geometry orientation (Streak points in direction of travel)
targetPos.copy(data.pos).add(data.vel);
dummy.position.copy(data.pos);
dummy.lookAt(targetPos);
// Scale thickness by SVD, length by velocity magnitude
dummy.scale.set(0.5 + data.svd, 0.5 + data.svd, data.vel.length() * 10);
dummy.updateMatrix();
moversMesh.setMatrixAt(i, dummy.matrix);
}
moversMesh.instanceMatrix.needsUpdate = true;
// Gentle camera orbit
camera.position.x = Math.sin(Date.now() * 0.0002) * 120;
camera.position.z = Math.cos(Date.now() * 0.0002) * 120;
camera.lookAt(0, 0, 0);
renderer.render(scene, camera);
}
animate();
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>
^gemini visualization of globe.html
below is live html dash
