Equation Solver

Discover polynomial equations through genetic evolution — a population of candidate formulas competes to best fit your data points
Target: f(x) = ?
Evolved: f(x) = ?
Page: Equation Solver - Polynomial Regression
Title: "Equation Solver"
Description: "Polynomial regression using genetic algorithm"
Icon: "function-variant"
Tags: ["genetic", "math"]
Status: ["validated"]
Category: artificial-intelligence

=== STRUCTURE ===

index.md front matter:
  title: "Equation Solver"
  description: "Polynomial regression using genetic algorithm"
  icon: "function-variant"
  tags: ["genetic", "math"]
  status: ["validated"]

index.md body:
  <section class="graph-container container visual size-800 ratio-1-1 canvas-contain">
    <canvas id="graph-canvas"></canvas>
  </section>
  <section class="equation-display">
    <div class="target"><span>Target:</span><code id="target-display">f(x) = ?</code></div>
    <div class="evolved"><span>Evolved:</span><code id="evolved-display">f(x) = ?</code></div>
  </section>

=== WIDGET FILES ===

_stats.right.md (weight: 10, title: "Statistics"):
  <dl> with 4 stat items:
    - Generation (id="stat-generation", init "0")
    - Error (id="stat-error", init "-")
    - Confidence (id="stat-confidence", init "-")
    - Coefficients (id="stat-coeffs", init "-")

_history.right.md (weight: 15, title: "Convergence"):
  <section class="history-container card" style="aspect-ratio: 4/1; width: 100%;">
    <canvas id="history-canvas" style="width: 100%; height: 100%;"></canvas>
  </section>

_controls.right.md (weight: 20, title: "Controls"):
  <div class="equation-controls"> with 2 buttons:
    - {{< button id="start-btn" label="Start" >}}
    - {{< button id="reset-btn" label="Reset" >}}

_options.right.md (weight: 30, title: "Options"):
  <dl> with 5 options:
    - Target select (id="func-type"): Linear(poly-1), Quadratic(poly-2), Cubic(poly-3 selected), Quartic(poly-4), Sine(sine), Exponential(exp), Mixed(mixed)
    - Approx degree select (id="approx-degree"): Quadratic(2), Cubic(3), Quartic(4 selected), Quintic(5), Sextic(6), Septic(7), Octic(8), Grow(grow)
    - Population number input (id="population-size"): min=20, max=500, value=100, step=10
    - Mutation range (id="mutation-rate"): min=5, max=80, value=30
    - Adaptive checkbox (id="adaptive-mutation"): checked, title about reducing mutation as error decreases

_algorithm.after.md (weight: 85, title: "Algorithm"):
  Same content as draw-curve: GA explanation with 5 steps, key parameters, why it works.

=== JAVASCRIPT (default.js) ===

Imports: GA from '/_lib/ga_v1.js', panic from '/_lib/panic_v3.js'
Pattern: IIFE, strict mode.

Config defaults:
  populationSize=100, eliteCount=5, mutationRate=0.3, mutationStrength=0.5, crossoverRate=0.7
  approxDegree=4, adaptiveMutation=true, growDegree=false
  funcType='polynomial', targetDegree=3
  GROW_PROBABILITY=0.05, SHRINK_PROBABILITY=0.03, MIN_DEGREE=2
  X_RANGE=[-5,5], SAMPLE_POINTS=50, TOP_N=5

State: mainCanvas, mainCtx, historyCanvas, historyCtx, population[], generation,
  bestError=Infinity, bestCoeffs=null, topCandidates[], errorHistory[],
  isRunning, animationId, initialMutationRate, fixedMinY/fixedMaxY, cachedColors
  targetCoeffs[], targetFunc (function or null for polynomial)

Target function types:
  polynomial: random coefficients with scale 10/2^i for higher powers, degree = targetDegree
  sine: a*sin(b*x + c) where a=[-2,2], b=[0.5,2.5], c=[-1.5,1.5]
  exp: a*exp(b*x) + c where a=[-1,1], b=[-0.25,0.25], c=[-2.5,2.5]
  mixed: a*x^2 + b*sin(c*x) + d where a=[-0.25,0.25], b=[-1.5,1.5], c=[0.5,2.5], d=[-2.5,2.5]

Key differences from draw-curve:
  - Has target function generation (generateTarget) instead of user drawing
  - func-type selector for choosing target type (poly-1..4, sine, exp, mixed)
  - fixedMinY/fixedMaxY computed from target curve with 50% margin
  - Auto-stop at bestError < 0.00001 (stricter than draw-curve's 0.001)
  - formatTarget() formats based on funcType (polynomial vs sine/exp/mixed notation)
  - No drawing interaction on canvas (no mouse/touch handlers)

Functions identical structure to draw-curve:
  getCachedColors(), invalidateColorCache(), evalPolynomial() (Horner's), evalTarget(),
  formatPolynomial() (superscript notation), formatTarget() (handles all funcTypes),
  createIndividual(), fitness() (negative MSE over SAMPLE_POINTS), crossover() (pad+uniform+trim),
  mutate() (adaptive + structural grow/shrink + gaussianMutate),
  initCanvas() (800x800), init(), handleKeyDown (Space=toggle, R=reset),
  reset() (generate target, create population, evaluate, update, draw),
  updateBest(), toggleRun(), run() (GA.evolve, evaluateFitness, auto-stop),
  updateStats() (same confidence levels but Excellent at 0.0001, Good at 0.01),
  draw() (clear, axes, top N candidates, target curve, best evolved, legend),
  drawHistory() (log-scale error plot)

Event listeners:
  start-btn -> toggleRun, reset-btn -> reset
  func-type change: parse "poly-N" to set funcType='polynomial'+targetDegree, or funcType=value; reset
  approx-degree change: 'grow' sets growDegree=true+approxDegree=8, else set degree; reset
  population-size change, mutation-rate input, adaptive-mutation change

=== SCSS (default.scss) ===

Identical to draw-curve SCSS:
  layout-main main: flex column center, padding 2rem, gap 1.5rem
  .equation-display: flex column center, monospace font
    .target/.evolved: flex row, span 0.875rem muted, code 1.1rem
    .evolved code: --draw-color-primary
  section.graph-container.container: max-width 800px, overflow hidden
    #graph-canvas: width/height 100%, --background-color-surface
  .equation-controls: flex, gap 0.5rem, .button flex:1
  .confidence-high: #27ae60 !important
  .confidence-medium: #f39c12 !important
  .confidence-low: #e74c3c !important

=== STATE MANAGEMENT ===
No localStorage. All state in JS variables.
Keyboard: Space=toggle play/pause, R=reset
No mouse interaction on canvas.
Theme: listens for prefers-color-scheme change -> invalidateColorCache + draw
Page entièrement générée et maintenue par IA, sans intervention humaine.
See also
