Prompt utilisé pour régénérer cette page :
Page: Von Neumann's Elephant - Interactive Parametric Curve Visualization
Description: "Interactive visualization of John von Neumann's famous four-parameter elephant curve"
Icon: "elephant"
Tags: mathematics, visualization, curve-fitting, fourier
Status: new
=== FILE STRUCTURE ===
Files in this page directory:
- index.md (front matter + main HTML with ARIA attributes)
- _stats.right.md (weight: 10) - State display
- _controls.right.md (weight: 20) - Play/Pause/Reset/Wiggle icon buttons
- _options.right.md (weight: 30) - Parameter sliders in fieldsets
- _legend.right.md (weight: 40) - Color legend
- _algorithm.after.md (weight: 90) - Mathematical explanation
- default.js - Main visualization JavaScript (IIFE, imports panic_v3.js)
- default.scss - All page styles with CSS custom properties
=== INDEX.MD ===
Front matter:
title: "Von Neumann's Elephant"
description: "Interactive visualization of John von Neumann's famous four-parameter elephant curve"
icon: "elephant"
tags: ["mathematics", "visualization", "curve-fitting", "fourier"]
status: ["new"]
Body HTML:
<section class="container visual size-600 ratio-1-1 canvas-contain" aria-label="Von Neumann elephant visualization">
<canvas id="elephant-canvas" role="img" aria-label="Interactive elephant curve visualization">
Von Neumann elephant visualization canvas. Enable JavaScript to view the animation.
</canvas>
</section>
Note: ARIA attributes for accessibility, fallback text inside canvas.
=== WIDGET: _stats.right.md (weight: 10) ===
Title: "Statistics"
Heading: ##### State
Contains <dl> inside <div class="elephant-stats">:
- Parameters: id="stat-parameters" (initial: 4)
- Trunk Wiggle: id="stat-wiggle" (initial: 0.0)
- Points: id="stat-points" (initial: 0)
- Progress: id="stat-progress" (initial: 0%)
=== WIDGET: _controls.right.md (weight: 20) ===
Title: "Controls"
Contains 4 icon buttons (native <button> elements, not shortcode):
- id="btn-play" class="item button is-play" with {{< icon name="play" >}}
- id="btn-pause" class="item button is-pause" with {{< icon name="pause" >}}
- id="btn-reset" class="item button" with {{< icon name="refresh" >}}
- id="btn-wiggle" class="item button" with {{< icon name="waves" >}}
All with type="button", aria-label attributes, wrapped in <div class="elephant-controls" role="group" aria-label="Visualization controls">
=== WIDGET: _options.right.md (weight: 30) ===
Title: "Parameters"
Contains <div class="elephant-options"> with two fieldsets:
Fieldset "The 5th Parameter":
- slider-wiggle: Trunk Wiggle, range 0-60, default 30, display id="display-wiggle"
Fieldset "Animation":
- slider-speed: Wiggle Speed, range 5-50, default 20, display id="display-speed"
- slider-draw: Draw Speed, range 1-20, default 8, display id="display-draw"
Each slider in <div class="option"> with label containing value span and aria-describedby.
=== WIDGET: _legend.right.md (weight: 40) ===
Title: "Legend"
Contains <div class="elephant-legend">:
- Heading: ##### Legend
- <ul class="legend-list" role="list">
- Single item: <span class="swatch body"> + "Elephant body (4 parameters)"
=== WIDGET: _algorithm.after.md (weight: 90) ===
Title: "Algorithm"
Wrapped in <div class="algorithm">, contains:
- ### Fourier Series Curve Fitting
- #### Parametric Equations: x(t) and y(t) as Fourier sums with sigma notation in <code class="equation"> blocks
- #### The Four Parameters: 4 complex Fourier coefficients = 8 degrees of freedom
- #### The Fifth Parameter: localized sinusoidal perturbation with Gaussian envelope formula
- #### Mathematical Insight: overfitting warning ("with enough parameters, you can fit any data")
=== JAVASCRIPT: default.js ===
IIFE pattern, 'use strict'. Imports: panic from '/_lib/panic_v3.js'
Author: Cylian
Based on: "Drawing an elephant with four complex parameters" (Mayer, Khairy & Howard, 2010, American Journal of Physics 78(6):648-649)
CONFIG object:
coefficients (from the paper's 4 complex parameters p1-p4):
x(t) terms: Bx1=50, Bx2=18, Ax3=12, Ax5=-14
y(t) terms: Ay1=-60, By1=-30, By2=8, By3=-10
pointCount: 500, lineWidth: 3
animationSpeed: 0.02, trunkAmplitude: 30
drawSpeed: 8, drawDelay: 0
State variables:
canvas, ctx
elephantPoints[], currentDrawIndex, isDrawing, isAnimating
isRunning, animationId, animationTime
trunkWiggle (the 5th parameter, initialized from CONFIG.trunkAmplitude)
centerX, centerY, scale
colors{}, resizeHandler
Functions:
MATH:
- computeElephantCurve(wiggle): generates 500 points using Fourier series
x(t) = (Bx1+wiggle)*sin(t) + Bx2*sin(2t) + Ax3*cos(3t) + Ax5*cos(5t)
y(t) = Ay1*cos(t) + By1*sin(t) + By2*sin(2t) + By3*sin(3t)
Returns array of {x,y} for t in [0, 2*PI], step = 2*PI/pointCount
RENDERING:
- getCSSVar(name): getComputedStyle(documentElement).getPropertyValue('--' + name)
- clearCanvas(): fills with colors.background
- transformPoint(point): rotates 90 degrees clockwise: returns {x: centerX + point.y*scale, y: centerY + point.x*scale}
- drawElephantCurve(points, endIndex): strokes curve up to endIndex with colors.elephant,
lineWidth=CONFIG.lineWidth, lineCap/lineJoin='round'. closePath() if fully drawn.
- render(): clears, computes wiggle (trunkWiggle*sin(animationTime) if animating, else 0),
draws curve, draws parameter info overlay
- drawParameterInfo(currentWiggle): monospace 14px overlay at top-left showing param count and wiggle value
STATISTICS:
- updateStats(): updates 4 DOM elements:
stat-parameters (4 or 5 depending on isAnimating),
stat-wiggle (currentWiggle.toFixed(1)),
stat-points (currentDrawIndex or CONFIG.pointCount),
stat-progress (percentage or 100%)
ANIMATION:
- animate(): continuously running requestAnimationFrame loop:
If isDrawing: increments currentDrawIndex by CONFIG.drawSpeed, stops at pointCount
If isRunning && isAnimating: increments animationTime by CONFIG.animationSpeed
Always calls updateStats() and render()
CONTROLS:
- start(): isRunning=true, updateControlState()
- pause(): isRunning=false, updateControlState()
- reset(): stops everything, sets isDrawing=true, currentDrawIndex=0, animationTime=0
- toggleWiggle(): toggles isAnimating, updates #btn-wiggle .is-active class
- updateControlState(): toggles .is-running on .elephant-controls
- updateWiggleState(): toggles .is-active on #btn-wiggle
- bindSlider(sliderId, displayId, setter, decimals=0): generic slider with validation (isNaN/isFinite)
INIT:
- updateColors(): caches color-accent (elephant), color-text-secondary (text), background-color-surface (background)
- setupCanvas(): 600px fixed size, DPR scaling, center=size/2, scale=size*0.8/200
- setupControls(): binds 4 buttons and 3 sliders:
slider-wiggle -> trunkWiggle, slider-speed -> CONFIG.animationSpeed (v/1000), slider-draw -> CONFIG.drawSpeed
- debounce(fn, delay): simple debounce
- cleanup(): cancelAnimationFrame + remove resize handler
- init(): cleanup, get canvas, setupCanvas+Controls, start draw animation, start animate loop
=== SCSS: default.scss ===
CSS variable: --elephant-color-body: var(--color-accent)
Sections:
1. Canvas (#elephant-canvas):
width/height 100%, min-height 400px, display block, themed bg, border-radius
2. Controls (.elephant-controls):
flex center, gap var(--layout-spacing), margin-top spacing
button.button: reset native (border/bg/padding/font transparent)
.is-play: display flex. .is-pause: display none. Reversed when &.is-running.
#btn-wiggle: opacity 0.6, transition 0.2s. &.is-active: opacity 1, accent color. &:hover: opacity 1.
3. Options (.elephant-options):
flex column, gap 0.75*spacing
fieldset: no border/padding/margin. legend: 0.875rem weight 600, primary color.
.option: flex column gap 0.25rem. label: flex space-between. span: secondary color, mono font, min-width 4rem, right-aligned.
input[type="range"]: 4px track, 2px radius, 14px round thumb. Focus outline 2px. :focus:not(:focus-visible) no outline.
Webkit + Moz thumb styles with hover scale(1.2) transition.
4. Statistics (.elephant-stats dl):
grid (1fr auto), gap 0.5rem 1rem. dt: secondary 0.875rem. dd: margin 0, right-aligned, mono 0.875rem, primary color.
5. Legend (.elephant-legend):
flex column gap 0.5rem. .legend-list: no list-style, flex column gap 0.5rem.
.legend-item: flex center gap 0.75rem, 0.875rem. .swatch: 12px circle. .swatch.body: bg --elephant-color-body.
6. Quote (.elephant-quote):
margin-top, padding, bg surface, border-radius, left 4px accent border.
blockquote: italic, secondary color, 1.6 line-height. cite: block, normal style, 0.875rem, tertiary color, em-dash prefix.
7. Algorithm (layout-after .algorithm):
h4: margin + primary color. p: secondary, 1.6 line-height. code: mono, bg surface, padding, 3px radius.
.equation: block, centered, mono, bg surface, 1rem padding, border-radius, overflow-x auto.
Page entièrement générée et maintenue par IA, sans intervention humaine.