Interactive physics and materials-mechanics simulations, hosted on GitHub Pages.
The UI is in Italian. All simulations run entirely in the browser — no build tools, no package managers, no external network requests.
The 3D simulators depend on Three.js. Run this script once to download it locally:
./vendor-dependencies.shThis saves lib/three.min.js and lib/OrbitControls.js. After that the project works fully offline.
python3 -m http.server 8080
# then open http://localhost:8080Any static file server works. You can also open index.html directly via file://, but Chrome and some other browsers restrict WebGL and cross-origin resource loading in that context — use a local server if anything fails to load.
| File | Simulation | Key concepts |
|---|---|---|
hooke-3d.html |
Hooke's Law (3D) — 3D spring with OrbitControls | F = −kx, damping, energy conservation |
hooke-2d.html |
Hooke's Law (2D) — Canvas rendering, position/energy graphs | F = −kx, oscillation period T = 2π√(m/k) |
| File | Simulation | Key concepts |
|---|---|---|
trazione.html |
Tensile test — stress–strain curve, 7 material presets, yield/fracture | σ = F/A₀, ε = ΔL/L₀, Young's modulus E = σ/ε |
compressione.html |
Compression test — Poisson contraction, buckling detection | Compressive stress, Poisson's ratio ν, Euler buckling |
flessione.html |
Bending test — three-point and four-point configurations | Bending moment M, deflection δ, neutral axis |
torsione.html |
Torsion test — circular and rectangular cross-sections | Shear stress τ = Tr/J, angle of twist φ = TL/GJ |
taglio.html |
Shear test — single and double shear configurations | Shear stress τ = F/A, shear modulus G |
fatica-flessione.html |
Bending fatigue — cycle counting, S-N curve, Miner's rule | Basquin equation, Palmgren–Miner damage D = Σ(nᵢ/Nᵢ) |
fatica-termica.html |
Thermal fatigue — temperature cycling, constrained thermal stress | Coffin–Manson equation, thermal strain εₜ = αΔT |
santy-sim.html |
SantySim structural demo — low-poly bridge deflection and collapse under moving load | Beam bending stress, mid-span deflection, structural failure |
All mechanical tests share a common set of visual failure effects — see Visual Effects.
The project is a collection of independent, self-contained HTML pages. Each page loads only the CSS and JavaScript it needs.
RainerumSim/
├── index.html # Main menu with animated thumbnails
├── hooke-2d.html # Hooke 2D simulation
├── hooke-3d.html # Hooke 3D simulation
├── trazione.html # Tensile test
├── compressione.html # Compression test
├── flessione.html # Bending test
├── torsione.html # Torsion test
├── taglio.html # Shear test
├── fatica-flessione.html # Bending fatigue
├── fatica-termica.html # Thermal fatigue
├── santy-sim.html # SantySim structural bridge demo
├── lib/ # Vendored Three.js (downloaded by vendor-dependencies.sh)
├── src/
│ ├── css/
│ │ ├── common.css # Shared layout, controls, panels, notifications
│ │ ├── index.css # Main menu styles
│ │ ├── sim-2d.css # Hooke 2D styles
│ │ ├── sim-3d.css # Hooke 3D styles
│ │ ├── sim-tensile.css # Tensile test styles
│ │ ├── sim-compression.css # Compression test styles
│ │ ├── sim-bending.css # Bending test styles
│ │ ├── sim-torsion.css # Torsion test styles
│ │ ├── sim-shear.css # Shear test styles
│ │ ├── sim-fatigue-bending.css
│ │ └── sim-thermal-fatigue.css
│ └── js/
│ ├── physics.js # Hooke's Law physics engine (spring, gravity, damping)
│ ├── ui-utils.js # Shared UI helpers (sliders, checkboxes, notifications)
│ ├── graph-renderer.js # Reusable Canvas graph drawing (position, energy)
│ ├── graph-modal.js # Expanded graph modal for Hooke simulations
│ ├── chart-modal.js # Expanded chart modal for mechanical tests
│ ├── shared-materials.js # Material property presets (steel, aluminium, etc.)
│ ├── particle-system.js # Debris, spark and crack effects on failure
│ ├── performance-monitor.js # FPS/frame-time overlay
│ ├── thumbnail-renderer.js # Animated preview thumbnails on the main menu
│ ├── sim-2d.js # Hooke 2D simulation logic
│ ├── sim-3d.js # Hooke 3D simulation logic
│ ├── sim-tensile.js # Tensile test logic
│ ├── sim-compression.js # Compression test logic
│ ├── sim-bending.js # Bending test logic
│ ├── sim-torsion.js # Torsion test logic
│ ├── sim-shear.js # Shear test logic
│ ├── sim-fatigue-bending.js # Bending fatigue logic
│ └── sim-thermal-fatigue.js # Thermal fatigue logic
└── vendor-dependencies.sh # Downloads Three.js to lib/
Every simulation page follows the same pattern:
- HTML — declares the canvas, control panel (sliders, dropdowns, checkboxes) and metric readouts.
- CSS — one shared stylesheet (
common.css) plus one simulation-specific stylesheet. - JavaScript — one or more shared modules loaded first, then the simulation-specific
sim-*.jsfile last.
Inside each sim-*.js file the simulator is a single object literal (e.g. TensileSimulator) that owns:
| Property group | What it contains |
|---|---|
| Three.js handles | scene, camera, renderer, controls, geometry meshes |
| Simulation state | isRunning, isPaused, simulationTime, physics variables |
| Constants block | Named numeric constants (e.g. TENSILE_CONSTANTS) to avoid magic numbers |
init() |
Sets up Three.js, creates geometry, attaches UI event listeners |
animate() |
The requestAnimationFrame loop — advances physics, updates geometry, redraws graphs |
resetSimulation() |
Restores initial state without reloading the page |
exportCSV() |
Serialises recorded data and triggers a browser download |
The 3D simulations (all pages except hooke-2d.html) use Three.js r140 with OrbitControls so the user can rotate and zoom the scene with the mouse.
| Module | Purpose |
|---|---|
physics.js |
Hooke's Law (F = −kx), gravity, damping, energy calculations, and the per-frame integration step used by the spring simulators |
ui-utils.js |
Thin wrappers around DOM inputs (sliders, checkboxes, colour pickers); notification toasts; panel toggle helpers |
graph-renderer.js |
Canvas-based position and energy graph drawing shared by the Hooke simulations |
graph-modal.js |
Full-screen expanded graph modal for the Hooke simulations |
chart-modal.js |
Full-screen expanded chart modal for mechanical-test simulations (stress–strain, force–displacement, torque–angle, force–deflection, force–compression, cycles–damage, thermal cycles–damage) |
shared-materials.js |
Material property table (Young's modulus, yield strength, ultimate strength, Poisson's ratio, colour) plus a Three.js material cache; used by tensile, compression and bending tests |
particle-system.js |
Manages debris, spark and crack particle effects on failure; spark effects are only shown for metallic materials; used by tensile, compression, bending, torsion and shear tests |
performance-monitor.js |
Optional FPS overlay; colour-coded green/yellow/red; also logs a console warning when JS heap usage exceeds 90 % |
thumbnail-renderer.js |
Draws the animated Canvas preview thumbnails shown on the main menu |
The spring system is integrated with a simple Euler step each frame:
F_total = −kx + mg − b·v·factor
a = F_total / m
v(t+dt) = v(t) + a·dt
x(t+dt) = x(t) + v(t+dt)·dt
The live formula panel shows kinetic energy Ek = ½mv², elastic potential energy Ep = ½kx², gravitational potential energy Eg = mgh, the oscillation period T = 2π√(m/k), and angular frequency ω = √(k/m).
Engineering stress and strain are calculated from the applied force and specimen dimensions:
σ = F / A₀ (engineering stress, MPa)
ε = ΔL / L₀ (engineering strain)
E = σ / ε (Young's modulus, elastic region)
The simulator tracks three stages: elastic (σ < σ_yield), plastic / strain-hardening (σ_yield ≤ σ < σ_ultimate), and necking / fracture. The specimen geometry is deformed in real time using a colour map that goes from green (low stress) through yellow and orange to red (near yield) then deep red (plastic).
Compressive stress follows the same σ = F/A formula. The Poisson effect is visualised by widening the specimen as it shortens. Euler's buckling criterion (F_crit = π²EI / L²) is used to detect lateral instability.
The three-point and four-point bending configurations calculate the maximum bending moment M and mid-span deflection δ. The neutral axis (zero stress line) is shown on the specimen; fibres above it are in compression and below in tension.
For a circular cross-section the maximum shear stress is τ = T·r / J (where J is the polar moment of inertia) and the angle of twist is φ = T·L / (G·J). Rectangular sections use an approximation for J.
Average shear stress is τ = F / A_shear. Double shear has two shear planes so τ = F / (2·A).
Cycles to failure are estimated from the Basquin equation:
σ_a = σ'_f · (2N_f)^b
Cumulative damage follows Palmgren–Miner's rule: D = Σ (nᵢ / Nᵢ). The simulation stops when D ≥ 1 (failure predicted).
When a component is constrained and its temperature changes by ΔT, the thermal strain is εₜ = α·ΔT (where α is the coefficient of thermal expansion). Because the constraint prevents free expansion, a thermal stress σₜ = E·α·ΔT develops. Cycles to failure use the Coffin–Manson relation for plastic strain cycling.
The tensile, compression and bending tests share a single material table defined in shared-materials.js:
| Material | E (GPa) | σ_yield (MPa) | σ_ult (MPa) | ν | Metallic |
|---|---|---|---|---|---|
| Acciaio (Steel) | 210 | 250 | 400 | 0.30 | ✓ |
| Alluminio (Aluminium) | 70 | 270 | 310 | 0.33 | ✓ |
| Rame (Copper) | 120 | 70 | 220 | 0.34 | ✓ |
| Titanio (Titanium) | 116 | 880 | 950 | 0.34 | ✓ |
| Ottone (Brass) | 100 | 200 | 350 | 0.34 | ✓ |
| Plastica (PVC) | 3 | 50 | 55 | 0.40 | ✗ |
| Gomma (Rubber) | 0.05 | 5 | 10 | 0.49 | ✗ |
The torsion and shear tests each maintain their own material table that adds shear-specific properties (shear modulus G, shear yield and shear ultimate strength) alongside the same seven base materials.
The fatigue tests define their own material sets with fatigue-specific parameters (S-N curve coefficients for bending fatigue; thermal expansion coefficients and Coffin–Manson parameters for thermal fatigue). The bending fatigue test provides six materials (no rubber) and the thermal fatigue test uses five (steel, aluminium, copper, brass and stainless steel).
The five classic mechanical tests (tensile, compression, bending, torsion, shear) share a failure-effects system (particle-system.js):
| Effect | Description | Metallic only? |
|---|---|---|
| Debris particles | Scatter from the fracture point | No |
| Spark particles | Bright yellow/orange sparks | Yes |
| Crack lines | Jagged lines drawn on the specimen | No |
| Camera shake | Brief viewport vibration on fracture | No |
Each effect can be individually toggled in the Effetti Visivi section of the control panel.
The fatigue simulations (bending fatigue and thermal fatigue) implement their own visual crack propagation directly on the specimen geometry without using particle-system.js.
Every mechanical-test simulator records data points during the simulation and provides a Scarica CSV button. Clicking it triggers a browser download of the recorded data (force, stress, strain, time, etc.) as a comma-separated values file.
See DEPLOYMENT.md for full instructions. In short:
- Run
./vendor-dependencies.shto vendor Three.js intolib/ - Commit the
lib/directory - Push to GitHub and enable Pages (Settings → Pages → select branch → Save)
- A modern browser with WebGL support (Chrome 120+, Firefox 120+, Safari 17+, Edge 120+)
- No internet connection required after
vendor-dependencies.shhas been run once - No build step, no package manager