frame 0
idle
⚗️
Click ⚡ Compile & Run
No parameters yet.
Three functions — the full API
defineParameters() — return an array of control definitions. SimForge renders them as live sliders and inputs below the canvas.
return [
{ name:"speed", type:"slider", min:0.1, max:5, default:2, step:0.1 },
{ name:"count", type:"number", min:1, max:500, default:100 },
{ name:"wrap", type:"checkbox", default:true }
]
init(params) — called once on Play/Reset. Build and return your entities array.
update(entities, params) — called ~60× per second. Return the next state. Use spread to avoid mutation:
return entities.map(e => ({ ...e, x: e.x + e.vx, y: e.y + e.vy }));
Entity properties
x, yPosition (canvas: 800×550 default)
vx, vyVelocity components
shape'circle' | 'rect' | 'triangle'
radiusSize in pixels
colorAny CSS color; 'transparent' skips draw
angleRotation radians (triangles)
trailArray of {x,y} — draws motion path
labelString drawn above entity
Useful snippets
// Distance
const d = Math.sqrt((a.x-b.x)**2 + (a.y-b.y)**2);
// Bounce walls (W=800, H=550)
if (e.x<0||e.x>W) e.vx*=-1;
if (e.y<0||e.y>H) e.vy*=-1;
// Wrap edges
e.x = ((e.x % W) + W) % W;
// Trail (last 30 positions)
const trail=[...(e.trail||[]),{x:e.x,y:e.y}].slice(-30);
// Random HSL color
`hsl(${Math.random()*360|0}, 70%, 60%)`
Tips
• Ctrl+Enter compiles without clicking the button.
• Slider changes apply live — no recompile needed.
• Use ⏭ Step to advance one frame for debugging.
• The About tab lets you document your simulation for educators.
Target FPS
Canvas width
Canvas height
Background
Motion trails