Prompt utilisé pour régénérer cette page :
Page: Curve Drawer - Draw and Evolve Polynomial
Title: "Curve Drawer"
Description: "Draw your own curve and find its equation"
Icon: "gesture"
Tags: ["genetic", "math", "interactive"]
Status: ["sandbox"]
Category: artificial-intelligence
=== STRUCTURE ===
index.md front matter:
title: "Curve Drawer"
description: "Draw your own curve and find its equation"
icon: "gesture"
tags: ["genetic", "math", "interactive"]
status: ["sandbox"]
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">Draw a curve!</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="clear-btn" label="Clear" >}}
_options.right.md (weight: 30, title: "Options"):
<dl> with 4 options:
- Approx degree select (id="approx-degree"): Quadratic(2), Cubic(3), Quartic(4 selected), Quintic(5), Sextic(6), Septic(7), Octic(8), 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="Reduce mutation rate as error decreases"
_algorithm.after.md (weight: 85, title: "Algorithm"):
H3 "Genetic Algorithm" + explanation:
- How It Works: 5 numbered steps (Representation, Fitness, Selection, Crossover, Mutation)
- Key Parameters: Population 100, Elite 5, Mutation 30%, Crossover 70%, 50 sample points
- Why It Works: No derivatives, Global search, Convergence
=== 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
GROW_PROBABILITY=0.05, SHRINK_PROBABILITY=0.03, MIN_DEGREE=2, TOP_N=5
Drawing state: isDrawing=false, drawnPoints=[], hasDrawnCurve=false
Canvas coordinate system: X_RANGE=[-5,5], Y_RANGE=[-5,5], PADDING=40
State: mainCanvas, mainCtx, historyCanvas, historyCtx, population[], generation,
bestError=Infinity, bestCoeffs=null, topCandidates=[], errorHistory[],
isRunning, animationId, initialMutationRate, cachedColors
Drawing interaction:
Mouse: mousedown=handleDrawStart, mousemove=handleDrawMove, mouseup/mouseleave=handleDrawEnd
Touch: touchstart/touchmove/touchend with same handlers
Canvas cursor: 'crosshair' when not running, 'default' when running
handleDrawStart: clear previous points, start new drawing
handleDrawMove: add point if distance > 0.05 from last
handleDrawEnd: sort by X, deduplicate (average Y), set hasDrawnCurve if >= 3 points, resetEvolution
Coordinate conversion: canvasToMathX/Y, mathToCanvasX/Y (linear mapping with PADDING)
sanitizePoint(x, y): clamp to X_RANGE/Y_RANGE
Polynomial evaluation: evalPolynomial(coeffs, x) using Horner's method
formatPolynomial(coeffs): superscript notation (x², x³, etc.), skip terms < 0.01
Genetic Algorithm:
createIndividual(): random coefficients [-5, 5], length = approxDegree+1 (or MIN_DEGREE+1 if grow)
fitness(individual): negative MSE against drawnPoints
crossover(parent1, parent2): pad shorter with zeros, GA.uniformCrossover, trim leading zeros
mutate(genes): adaptive mutation (reduce rate/strength when bestError < 1),
structural mutation if growDegree (GROW_PROBABILITY add term, SHRINK_PROBABILITY remove),
then GA.gaussianMutate
GA integration:
resetEvolution(): stop, GA.createPopulation, evaluateFitness, reset all stats
updateBest(): sort population by fitness, track bestError/bestCoeffs, store top N candidates
run(): GA.evolve with custom crossover/mutate, evaluateFitness, update stats,
auto-stop at generation>50 && bestError<0.001
Display:
updateStats(): generation, error (toFixed/toExponential), confidence (Excellent/Good/Fair/Searching),
coefficients (with degree label if grow mode), evolved equation display
draw(): clear, grid lines (alpha 0.1), axes (alpha 0.5), scale markers, axis labels,
top N candidates (alpha 0.15), drawn points (line + dots), best evolved curve, instructions text, legend
drawHistory(): log-scale error plot on history canvas
Keyboard: Space=toggleRun, C=clearDrawing (ignores input/select focus)
=== SCSS (default.scss) ===
layout-main main: flex column, center, padding 2rem, gap 1.5rem
.equation-display: flex column center, font-family monospace
.target/.evolved: flex row, span 0.875rem muted min-width 60px, code 1.1rem with bg/radius
.evolved code: color --draw-color-primary
section.graph-container.container: max-width 800px, overflow hidden
#graph-canvas: width/height 100%, background --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.
Mouse: draw on canvas (mousedown/mousemove/mouseup + touch equivalents)
Keyboard: Space=toggle, C=clear
Page entièrement générée et maintenue par IA, sans intervention humaine.