Upload index.html

index.html

@@ -476,6 +476,89 @@ function computePositions() {
   return positions;
 }
 
+// ── Find best open position for custom model (center-biased) ─
+function findOpenPosition(idx) {
+  const w = canvas.width / DPR;
+  const h = canvas.height / DPR;
+  const cx = w / 2, cy = h / 2;
+  const myR = modelCaptureRadius[idx];
+  const margin = myR + EDGE_MARGIN;
+  const cols = 20, rows = 20;
+  let bestX = cx, bestY = cy, bestScore = -Infinity;
+  const maxDist = Math.sqrt(cx * cx + cy * cy);
+
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < cols; c++) {
+      const px = margin + (w - 2 * margin) * (c / (cols - 1));
+      const py = margin + (h - 2 * margin) * (r / (rows - 1));
+      // Minimum clearance from any existing model
+      let minClear = Infinity;
+      for (let j = 0; j < activeModelCount; j++) {
+        if (j === idx) continue;
+        const dx = px - positions[j].x, dy = py - positions[j].y;
+        const dist = Math.sqrt(dx * dx + dy * dy) - modelCaptureRadius[j] - myR;
+        if (dist < minClear) minClear = dist;
+      }
+      // Score: 70% center proximity, 30% clearance
+      const centerScore = 1 - Math.sqrt((px - cx) ** 2 + (py - cy) ** 2) / maxDist;
+      const clearScore = Math.max(0, Math.min(minClear / 200, 1));
+      const score = centerScore * 0.7 + clearScore * 0.3;
+      if (score > bestScore) {
+        bestScore = score;
+        bestX = px; bestY = py;
+      }
+    }
+  }
+  return { x: bestX, y: bestY };
+}
+
+// ── Separate models in-place (no spiral reassignment) ────────
+// Starts from current positions, only resolves overlaps locally.
+// Models move the minimum distance needed — no cross-screen flights.
+function separateInPlace() {
+  const cx = (canvas.width / DPR) / 2;
+  const cy = (canvas.height / DPR) / 2;
+  // Clone current positions as starting points
+  const result = [];
+  for (let i = 0; i < activeModelCount; i++) {
+    result.push({ x: positions[i].x, y: positions[i].y });
+  }
+
+  // Run separation solver (same logic as computePositions but no spiral init)
+  for (let iter = 0; iter < 200; iter++) {
+    let moved = false;
+    for (let a = 0; a < activeModelCount; a++) {
+      for (let b = a + 1; b < activeModelCount; b++) {
+        const dx = result[b].x - result[a].x;
+        const dy = result[b].y - result[a].y;
+        const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+        const minDist = modelCaptureRadius[a] + modelCaptureRadius[b] + SEPARATION_PAD;
+        if (dist < minDist) {
+          const overlap = (minDist - dist) / 2;
+          const nx = dx / dist;
+          const ny = dy / dist;
+          const wA = 1 - massNorm[a] * 0.7;
+          const wB = 1 - massNorm[b] * 0.7;
+          const total = wA + wB;
+          result[a].x -= nx * overlap * (wA / total);
+          result[a].y -= ny * overlap * (wA / total);
+          result[b].x += nx * overlap * (wB / total);
+          result[b].y += ny * overlap * (wB / total);
+          moved = true;
+        }
+      }
+    }
+    // Edge clamping
+    for (let i = 0; i < activeModelCount; i++) {
+      const r = modelCaptureRadius[i];
+      result[i].x = Math.max(r + EDGE_MARGIN, Math.min(canvas.width / DPR - r - EDGE_MARGIN, result[i].x));
+      result[i].y = Math.max(r + EDGE_MARGIN, Math.min(canvas.height / DPR - r - EDGE_MARGIN, result[i].y));
+    }
+    if (!moved) break;
+  }
+  return result;
+}
+
 let positions = computePositions();
 
 // ── Model Data Array ───────────────────────────────────────
@@ -496,6 +579,124 @@ function syncModelData() {
   }
 }
 
+// ── Smooth Layout Animation State ────────────────────────────
+const layoutTargetX = new Float64Array(BASE_MODEL_COUNT + 1);
+const layoutTargetY = new Float64Array(BASE_MODEL_COUNT + 1);
+const layoutActive = new Uint8Array(BASE_MODEL_COUNT + 1);
+const LAYOUT_LERP = 0.07;
+
+// Saved positions before custom model insertion (for precise return on removal)
+const preInsertX = new Float64Array(BASE_MODEL_COUNT);
+const preInsertY = new Float64Array(BASE_MODEL_COUNT);
+
+// Orbit scale animation (shrinks all models when custom model is added)
+let orbitScale = 1.0;
+let orbitScaleTarget = 1.0;
+const ORBIT_SCALE_LERP = 0.05;
+
+// Store original orbit bases (at scale 1.0)
+const orbitBaseOriginal = new Float64Array(BASE_MODEL_COUNT + 1);
+for (let i = 0; i < BASE_MODEL_COUNT; i++) {
+  orbitBaseOriginal[i] = modelOrbitBase[i];
+}
+
+function applyOrbitScale(scale) {
+  for (let j = 0; j < activeModelCount; j++) {
+    modelOrbitBase[j] = orbitBaseOriginal[j] * scale;
+    modelCaptureRadius[j] = modelOrbitBase[j] * 1.2;
+    md[j].captureRadius = modelCaptureRadius[j];
+  }
+}
+
+function updateLayoutAnimation() {
+  // Animate orbit scale
+  if (Math.abs(orbitScale - orbitScaleTarget) > 0.001) {
+    orbitScale += (orbitScaleTarget - orbitScale) * ORBIT_SCALE_LERP;
+    applyOrbitScale(orbitScale);
+  }
+  // Animate positions toward targets
+  for (let j = 0; j < activeModelCount; j++) {
+    if (!layoutActive[j]) continue;
+    const dx = layoutTargetX[j] - positions[j].x;
+    const dy = layoutTargetY[j] - positions[j].y;
+    if (dx * dx + dy * dy < 1) {
+      positions[j].x = layoutTargetX[j];
+      positions[j].y = layoutTargetY[j];
+      layoutActive[j] = 0;
+    } else {
+      positions[j].x += dx * LAYOUT_LERP;
+      positions[j].y += dy * LAYOUT_LERP;
+    }
+  }
+}
+
+// ── Pop Scale Animation (custom model) ──────────────────────
+let customPopScale = 0;
+let customPopTarget = 0;
+let customPopVelocity = 0;
+const POP_STIFFNESS = 0.08;
+const POP_DAMPING = 0.72;
+
+function updatePopAnimation() {
+  if (!customModelActive && customPopScale <= 0.001) return;
+  const force = (customPopTarget - customPopScale) * POP_STIFFNESS;
+  customPopVelocity = customPopVelocity * POP_DAMPING + force;
+  customPopScale += customPopVelocity;
+  if (customPopScale < 0) { customPopScale = 0; customPopVelocity = 0; }
+  // Scale custom model's capture radius with pop (on top of orbit scale)
+  if (customModelActive && customPopTarget === 1) {
+    const idx = CUSTOM_MODEL_IDX;
+    const baseR = orbitBaseOriginal[idx] * orbitScale;
+    modelOrbitBase[idx] = baseR;
+    modelCaptureRadius[idx] = baseR * 1.2 * customPopScale;
+    md[idx].captureRadius = modelCaptureRadius[idx];
+  }
+  // When shrinking and settled, finalize removal
+  if (customPopTarget === 0 && customPopScale < 0.001 && Math.abs(customPopVelocity) < 0.001) {
+    customPopScale = 0;
+    customPopVelocity = 0;
+    finalizeRemoval();
+  }
+}
+
+function finalizeRemoval() {
+  // Safety: eject any particles still referencing the custom model
+  const cidx = CUSTOM_MODEL_IDX;
+  for (let i = 0; i < PARTICLE_COUNT; i++) {
+    const p = particles[i];
+    if (p.attractorIdx === cidx) {
+      p.phase = 0;
+      p.attractorIdx = -1;
+    }
+  }
+  activeModelCount = BASE_MODEL_COUNT;
+  customModelActive = false;
+  totalMassNorm = 0;
+  for (let j = 0; j < activeModelCount; j++) totalMassNorm += massNorm[j];
+  const totalTgt = PARTICLE_COUNT * TARGET_ORBIT_FRACTION;
+  for (let j = 0; j < activeModelCount; j++) {
+    modelTargetPop[j] = totalTgt * (massNorm[j] / totalMassNorm);
+    spawnWeight[j] = massNorm[j];
+  }
+  totalSpawnWeight = totalMassNorm;
+  // Scale orbits back to full size
+  orbitScaleTarget = 1.0;
+  // Return base models to their exact pre-insertion positions
+  for (let j = 0; j < activeModelCount; j++) {
+    const dx = preInsertX[j] - positions[j].x;
+    const dy = preInsertY[j] - positions[j].y;
+    if (dx * dx + dy * dy > 1) {
+      layoutTargetX[j] = preInsertX[j];
+      layoutTargetY[j] = preInsertY[j];
+      layoutActive[j] = 1;
+    } else {
+      positions[j].x = preInsertX[j];
+      positions[j].y = preInsertY[j];
+    }
+  }
+  computeNeighbors();
+}
+
 // ── Elastic Pull State ──────────────────────────────────────
 const elasticDx = new Float64Array(BASE_MODEL_COUNT + 1);
 const elasticDy = new Float64Array(BASE_MODEL_COUNT + 1);
@@ -1240,6 +1441,12 @@ function frame() {
     if (labelBounceAlpha <= 0) labelBounceRect = null;
   }
 
+  // Animate pop scale for custom model
+  updatePopAnimation();
+
+  // Animate layout transitions (position + orbit scale)
+  updateLayoutAnimation();
+
   // Update elastic pull (before particles read md[j].x/y)
   updateElasticPull();
 
@@ -1333,7 +1540,18 @@ function frame() {
   // Draw model cores last — task icons
   for (let j = 0; j < activeModelCount; j++) {
     const iconCol = (customModelActive && j === CUSTOM_MODEL_IDX) ? ORANGE : COLOR;
-    drawTaskIcon(ctx, md[j].x, md[j].y, models[j].task, iconCol);
+    if (customModelActive && j === CUSTOM_MODEL_IDX && customPopScale < 1) {
+      const sc = customPopScale;
+      if (sc > 0.01) {
+        ctx.save();
+        ctx.translate(md[j].x, md[j].y);
+        ctx.scale(sc, sc);
+        drawTaskIcon(ctx, 0, 0, models[j].task, iconCol);
+        ctx.restore();
+      }
+    } else {
+      drawTaskIcon(ctx, md[j].x, md[j].y, models[j].task, iconCol);
+    }
   }
 
   // Update pinned label position (follows elastic pull)
@@ -1682,28 +1900,37 @@ function insertCustomModel(customModel) {
   const idx = CUSTOM_MODEL_IDX;
   models[idx] = customModel;
 
+  // Save base model positions BEFORE any changes (for precise return on removal)
+  for (let j = 0; j < BASE_MODEL_COUNT; j++) {
+    preInsertX[j] = positions[j].x;
+    preInsertY[j] = positions[j].y;
+  }
+
   // Compute mass normalization relative to existing base range
   const dl = Math.log(customModel.downloads);
   const rawMass = Math.pow(dl, exponent);
   const normVal = Math.max(0, Math.min(1, (rawMass - massMin) / massRange));
-  // Extend massNorm array
   if (massNorm.length <= idx) massNorm.push(normVal);
   else massNorm[idx] = normVal;
 
-  // Set orbit parameters
-  modelOrbitBase[idx] = 30 + 180 * normVal;
-  modelCaptureRadius[idx] = modelOrbitBase[idx] * 1.2;
+  // Store original orbit base for the custom model
+  orbitBaseOriginal[idx] = 30 + 180 * normVal;
+
+  // Activate
+  activeModelCount = BASE_MODEL_COUNT + 1;
+  customModelActive = true;
 
-  // Create md entry before activating (so syncModelData can write to it)
+  // Create md entry BEFORE applyOrbitScale (which reads md[j].captureRadius)
   md[idx] = {
     x: 0, y: 0,
     massNorm: normVal,
-    captureRadius: modelCaptureRadius[idx]
+    captureRadius: 0
   };
 
-  // Activate
-  activeModelCount = BASE_MODEL_COUNT + 1;
-  customModelActive = true;
+  // Shrink all orbits to fit the extra model (scale factor)
+  const newScale = BASE_MODEL_COUNT / activeModelCount;
+  orbitScaleTarget = newScale;
+  applyOrbitScale(newScale);
 
   // Recompute total mass norm and spawn weights
   totalMassNorm = 0;
@@ -1715,20 +1942,46 @@ function insertCustomModel(customModel) {
   }
   totalSpawnWeight = totalMassNorm;
 
-  // Recompute positions and sync all model data
-  positions = computePositions();
-  syncModelData();
+  // Find best open position for custom model (center-biased, clearance-aware)
+  const openPos = findOpenPosition(idx);
+  md[idx].x = openPos.x;
+  md[idx].y = openPos.y;
+  if (positions.length <= idx) positions.push({ x: openPos.x, y: openPos.y });
+  else { positions[idx].x = openPos.x; positions[idx].y = openPos.y; }
+
+  // Resolve any overlaps locally — models only move minimum distance needed
+  const separated = separateInPlace();
+  for (let j = 0; j < BASE_MODEL_COUNT; j++) {
+    const dx = separated[j].x - positions[j].x;
+    const dy = separated[j].y - positions[j].y;
+    if (dx * dx + dy * dy > 4) {
+      layoutTargetX[j] = separated[j].x;
+      layoutTargetY[j] = separated[j].y;
+      layoutActive[j] = 1;
+    }
+  }
+  // Update custom model position from separation too
+  positions[idx].x = separated[idx].x;
+  positions[idx].y = separated[idx].y;
+  md[idx].x = separated[idx].x;
+  md[idx].y = separated[idx].y;
+
   computeNeighbors();
 
-  // Reset elastic state
-  elasticDx.fill(0); elasticDy.fill(0);
-  elasticVx.fill(0); elasticVy.fill(0);
+  // Reset elastic state for custom model only
+  elasticDx[idx] = 0; elasticDy[idx] = 0;
+  elasticVx[idx] = 0; elasticVy[idx] = 0;
+
+  // Start pop-in animation (0% → 100% with elastic overshoot)
+  customPopScale = 0;
+  customPopVelocity = 0;
+  customPopTarget = 1;
 
   // Set rotation direction (random)
   modelRotDir[idx] = Math.random() < 0.5 ? 1 : -1;
 }
 
-// ── removeCustomModel: eject particles, deactivate ──────────
+// ── removeCustomModel: eject particles, start pop-out ────────
 function removeCustomModel() {
   if (!customModelActive) return;
   const idx = CUSTOM_MODEL_IDX;
@@ -1737,7 +1990,6 @@ function removeCustomModel() {
   for (let i = 0; i < PARTICLE_COUNT; i++) {
     const p = particles[i];
     if (p.attractorIdx === idx) {
-      // Convert orbital state to cartesian velocity
       const m = md[idx];
       const r = p.orbitRadius || 1;
       const rawOmega = p.angularMomentum / (r * r);
@@ -1746,32 +1998,15 @@ function removeCustomModel() {
       p.vy = Math.cos(p.angle) * omega * r;
       p.phase = 0;
       p.attractorIdx = -1;
-      // orangeBlend will decay naturally in updateParticle
     }
   }
 
-  // Deactivate
-  activeModelCount = BASE_MODEL_COUNT;
-  customModelActive = false;
+  // Prevent new captures during pop-out
+  modelCaptureRadius[idx] = 0;
+  md[idx].captureRadius = 0;
 
-  // Recompute spawn weights for base models only
-  totalMassNorm = 0;
-  for (let j = 0; j < activeModelCount; j++) totalMassNorm += massNorm[j];
-  const totalTgt = PARTICLE_COUNT * TARGET_ORBIT_FRACTION;
-  for (let j = 0; j < activeModelCount; j++) {
-    modelTargetPop[j] = totalTgt * (massNorm[j] / totalMassNorm);
-    spawnWeight[j] = massNorm[j];
-  }
-  totalSpawnWeight = totalMassNorm;
-
-  // Recompute layout
-  positions = computePositions();
-  syncModelData();
-  computeNeighbors();
-
-  // Reset elastic state
-  elasticDx.fill(0); elasticDy.fill(0);
-  elasticVx.fill(0); elasticVy.fill(0);
+  // Start pop-out animation (finalizeRemoval called when scale reaches 0)
+  customPopTarget = 0;
 }
 
 })();