@jjlmoya/utils-science 1.26.0 → 1.27.0

package/src/tool/natural-selection-drift/runtime.ts

@@ -0,0 +1,89 @@
+import { runSelectionDrift, summarizeOutcome } from './logic';
+import { drawBackground, drawParticles, evolveParticles } from './render';
+import {
+  readConfig,
+  seedParticles,
+  showActiveValue,
+  updateMetrics,
+  updateSliderValues,
+  type RuntimeElements,
+} from './simulation';
+
+function bindSliders(elements: RuntimeElements, runSimulation: () => void) {
+  const sliders = [
+    [elements.populationInput, elements.populationValue],
+    [elements.generationsInput, elements.generationsValue],
+    [elements.mutationInput, elements.mutationValue],
+    [elements.pressureInput, elements.pressureValue],
+    [elements.driftInput, elements.driftValue],
+    [elements.allelesInput, elements.allelesValue],
+    [elements.innovationInput, elements.innovationValue],
+  ] as const;
+
+  sliders.forEach(([input, valueNode]) => {
+    if (!input || !valueNode) return;
+    input.addEventListener('pointerdown', () => showActiveValue(input, valueNode));
+    input.addEventListener('input', () => {
+      updateSliderValues(elements);
+      runSimulation();
+    });
+  });
+}
+
+function startLoop(
+  canvas: HTMLCanvasElement,
+  ctx: CanvasRenderingContext2D,
+  elements: RuntimeElements,
+  state: { particles: never[]; outcome: { diversity: number } | null; runSeed: number }
+) {
+  let frameCount = 0;
+  const frame = () => {
+    frameCount += 1;
+    const dpr = window.devicePixelRatio || 1;
+    const rect = canvas.getBoundingClientRect();
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, rect.width, rect.height);
+    const config = readConfig(elements, state.runSeed);
+    drawBackground(ctx, rect, config.selectionPressure);
+    if (state.outcome) state.particles = evolveParticles(state.particles, config, state.outcome) as never[];
+    drawParticles(ctx, rect, state.particles, { pressure: config.selectionPressure, drift: config.driftIntensity });
+    if (frameCount % 6 === 0) updateMetrics(elements, state.particles);
+    requestAnimationFrame(frame);
+  };
+
+  requestAnimationFrame(frame);
+  return frame;
+}
+
+export function createNaturalSelectionRuntime(elements: RuntimeElements) {
+  const canvas = elements.canvas;
+  const ctx = canvas?.getContext('2d');
+  if (!canvas || !ctx) return () => {};
+
+  let runSeed = 0;
+  let particles = [];
+  let outcome = null;
+  const state = { particles, outcome, runSeed };
+
+  const runSimulation = () => {
+    runSeed += 1;
+    updateSliderValues(elements);
+    const config = readConfig(elements, runSeed);
+    const points = runSelectionDrift(config);
+    outcome = summarizeOutcome(points);
+    particles = seedParticles(config, outcome);
+    state.particles = particles;
+    state.outcome = outcome;
+    state.runSeed = runSeed;
+    updateMetrics(elements, particles);
+  };
+  bindSliders(elements, runSimulation);
+
+  window.addEventListener('resize', runSimulation);
+  runSimulation();
+  startLoop(canvas, ctx, elements, state);
+
+  return () => window.removeEventListener('resize', runSimulation);
+}

package/src/tool/natural-selection-drift/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { naturalSelectionDrift } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await naturalSelectionDrift.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/natural-selection-drift/simulation.ts

@@ -0,0 +1,161 @@
+import type { summarizeOutcome } from './logic';
+
+export type RuntimeElements = {
+  populationInput: HTMLInputElement | null;
+  generationsInput: HTMLInputElement | null;
+  mutationInput: HTMLInputElement | null;
+  pressureInput: HTMLInputElement | null;
+  driftInput: HTMLInputElement | null;
+  allelesInput: HTMLInputElement | null;
+  innovationInput: HTMLInputElement | null;
+  populationValue: HTMLElement | null;
+  generationsValue: HTMLElement | null;
+  mutationValue: HTMLElement | null;
+  pressureValue: HTMLElement | null;
+  driftValue: HTMLElement | null;
+  allelesValue: HTMLElement | null;
+  innovationValue: HTMLElement | null;
+  aliveBadge: HTMLElement | null;
+  dominantTrait: HTMLElement | null;
+  fitnessScore: HTMLElement | null;
+  diversityScore: HTMLElement | null;
+  populationScore: HTMLElement | null;
+  alleleRanking: HTMLElement | null;
+  ui: {
+    aliveLabel: string;
+    alleleDefault: string;
+  };
+};
+
+export type Particle = {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  size: number;
+  allele: number;
+  alive: boolean;
+  hue: number;
+  energy: number;
+  bias: number;
+  age: number;
+};
+
+type Outcome = ReturnType<typeof summarizeOutcome>;
+type SimConfig = ReturnType<typeof readConfig>;
+
+const hues = [160, 208, 284, 28, 338, 118, 246, 52];
+const palette = ['allele-1', 'allele-2', 'allele-3', 'allele-4', 'allele-5', 'allele-6', 'allele-7', 'allele-8'];
+
+const readValue = (input: HTMLInputElement | null, fallback: number) => Number(input?.value || fallback);
+const setText = (node: HTMLElement | null, value: string) => {
+  if (node) node.textContent = value;
+};
+
+export function readConfig(elements: RuntimeElements, runSeed: number) {
+  return {
+    population: readValue(elements.populationInput, 120),
+    generations: readValue(elements.generationsInput, 60),
+    mutationRate: readValue(elements.mutationInput, 12) / 100,
+    selectionPressure: readValue(elements.pressureInput, 55) / 100,
+    driftIntensity: readValue(elements.driftInput, 28) / 100,
+    alleleCount: readValue(elements.allelesInput, 3),
+    innovationRate: readValue(elements.innovationInput, 2) / 100,
+    seed: runSeed,
+    habitat: 'forest' as const,
+    trait: 'camouflage' as const,
+  };
+}
+
+export function updateSliderValues(elements: RuntimeElements) {
+  setText(elements.populationValue, String(readValue(elements.populationInput, 120)));
+  setText(elements.generationsValue, String(readValue(elements.generationsInput, 60)));
+  setText(elements.mutationValue, `${readValue(elements.mutationInput, 12)}%`);
+  setText(elements.pressureValue, `${readValue(elements.pressureInput, 55)}%`);
+  setText(elements.driftValue, `${readValue(elements.driftInput, 28)}%`);
+  setText(elements.allelesValue, String(readValue(elements.allelesInput, 3)));
+  setText(elements.innovationValue, `${readValue(elements.innovationInput, 2)}%`);
+}
+
+export function showActiveValue(input: HTMLInputElement | null, valueNode: HTMLElement | null) {
+  if (!input || !valueNode) return;
+  valueNode.classList.add('is-visible');
+  const update = () => {
+    const range = Number(input.max) - Number(input.min);
+    const value = Number(input.value) - Number(input.min);
+    valueNode.style.left = `${range > 0 ? (value / range) * 100 : 0}%`;
+  };
+  update();
+  input.addEventListener('input', update, { once: true });
+  input.addEventListener('pointerup', () => valueNode.classList.remove('is-visible'), { once: true });
+  input.addEventListener('blur', () => valueNode.classList.remove('is-visible'), { once: true });
+}
+
+export function seedParticles(config: SimConfig, result: Outcome) {
+  const total = Math.max(48, Math.min(180, Math.round(config.population / 3)));
+  const dominantBias = result.dominant === 'alleleA' ? 0.56 : 0.38;
+  const alleleCount = Math.max(2, Number(config.alleleCount || 3));
+  return Array.from({ length: total }, (_, index) => {
+    const allele = index % alleleCount;
+    const angle = Math.random() * Math.PI * 2;
+    const radius = 0.08 + Math.random() * 0.48;
+    return {
+      x: 0.5 + Math.cos(angle) * radius,
+      y: 0.5 + Math.sin(angle) * radius,
+      vx: (Math.random() - 0.5) * 0.003,
+      vy: (Math.random() - 0.5) * 0.003,
+      size: 1.8 + Math.random() * 3.2,
+      allele,
+      alive: true,
+      hue: hues[allele % hues.length],
+      energy: 0.45 + Math.random() * 0.55,
+      bias: dominantBias,
+      age: Math.random() * 20,
+    } satisfies Particle;
+  });
+}
+
+export function buildCountMap(particles: Particle[]) {
+  const counts = new Map<number, number>();
+  particles.forEach((p) => {
+    if (!p.alive) return;
+    counts.set(p.allele, (counts.get(p.allele) || 0) + 1);
+  });
+  return counts;
+}
+
+export function updateRanking(elements: RuntimeElements, particles: Particle[]) {
+  const counts = buildCountMap(particles);
+  const ranking = Array.from(counts.entries())
+    .map(([allele, count]) => ({ allele, count }))
+    .sort((a, b) => b.count - a.count);
+  setText(elements.dominantTrait, ranking.length > 0 ? `Allele ${ranking[0].allele + 1}` : elements.ui.alleleDefault);
+  const maxCount = Math.max(1, ...ranking.map((item) => item.count));
+  if (elements.alleleRanking) {
+    elements.alleleRanking.innerHTML = ranking
+      .map((item, index) => {
+        const fill = Math.max(0.1, item.count / maxCount);
+        const colorIndex = item.allele % palette.length;
+        return `<div class="ns-allele-chip ${palette[colorIndex]} is-updated" style="--rank-scale:${fill}" data-allele="${item.allele}">
+          <span>#${index + 1} Allele ${item.allele + 1}</span>
+          <strong>${item.count}</strong>
+          <div class="ns-allele-bar"><i></i></div>
+        </div>`;
+      })
+      .join('');
+  }
+}
+
+export function updateMetrics(elements: RuntimeElements, particles: Particle[]) {
+  const aliveCount = particles.filter((p) => p.alive).length;
+  setText(elements.aliveBadge, `${aliveCount} ${elements.ui.aliveLabel}`);
+  setText(elements.populationScore, String(aliveCount));
+  const liveRatio = particles.length ? Math.round((aliveCount / particles.length) * 100) : 0;
+  setText(elements.fitnessScore, `${liveRatio}%`);
+  const counts = buildCountMap(particles);
+  const values = Array.from(counts.values());
+  const total = values.reduce((sum, value) => sum + value, 0);
+  const spread = total > 0 && values.length > 0 ? 1 - Math.max(...values) / total : 0;
+  setText(elements.diversityScore, `${Math.max(0, Math.round(spread * 100))}%`);
+  updateRanking(elements, particles);
+}

package/src/tools.ts

@@ -10,6 +10,7 @@ import { TEMPERATURE_TIMELINE_TOOL } from './tool/temperature-timeline/index';
 import { LORENZ_ATTRACTOR_TOOL } from './tool/lorenz-attractor/index';
 import { STELLAR_HABITABILITY_ZONE_TOOL } from './tool/stellar-habitability-zone/index';
 import { RADIOACTIVE_DECAY_TOOL } from './tool/radioactive-decay/index';
+import { NATURAL_SELECTION_DRIFT_TOOL } from './tool/natural-selection-drift/index';
 
 export const ALL_TOOLS: ToolDefinition[] = [
   COLONY_COUNTER_TOOL,
@@ -22,5 +23,5 @@ export const ALL_TOOLS: ToolDefinition[] = [
   LORENZ_ATTRACTOR_TOOL,
   STELLAR_HABITABILITY_ZONE_TOOL,
   RADIOACTIVE_DECAY_TOOL,
+  NATURAL_SELECTION_DRIFT_TOOL,
 ];
-