diff --git a/src/pendulum/drawing.ts b/src/pendulum/drawing.ts index b50d8ca..a8f5c46 100644 --- a/src/pendulum/drawing.ts +++ b/src/pendulum/drawing.ts @@ -80,13 +80,17 @@ export function drawConstraint(ctx: CanvasRenderingContext2D, ball1: BallState, export function drawWorld(ctx: CanvasRenderingContext2D, world: PhysicalWorldState, - ballDrawers: BallDrawer[] + ballDrawers: BallDrawer[], + { + showForces = false + } = {} ) { for (const constraint of world.constraints) { const b1 = world.balls[constraint.p1Idx]; const b2 = world.balls[constraint.p2Idx]; drawConstraint(ctx, b1, b2); // Draw force vectors for debugging + if (!showForces) continue; const scale = 100; // Scale for visibility if (constraint.p1ConstraintForce) { ctx.beginPath(); diff --git a/src/pendulum/mod.tsx b/src/pendulum/mod.tsx index 5b40a22..6a1178c 100644 --- a/src/pendulum/mod.tsx +++ b/src/pendulum/mod.tsx @@ -7,6 +7,7 @@ export default function Pendulum() { const canvasRef = useRef(null); const [subStep, setSubStep] = useState(10); // number of sub-steps per frame const [constraintIterations, setConstraintIterations] = useState(1); // number of constraint iterations per sub-step + const [showForces, setShowForces] = useState(false); // whether to show constraint forces // refs to hold pendulum instances and animation state so we can reset from UI const worldRef = useRef(null); @@ -45,7 +46,9 @@ export default function Pendulum() { } ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); if (worldRef.current) { - drawWorld(ctx, worldRef.current, worldRef.current.ballDrawers); + drawWorld(ctx, worldRef.current, worldRef.current.ballDrawers, { + showForces, + }); } rafRef.current = requestAnimationFrame(animate); }; @@ -119,7 +122,7 @@ export default function Pendulum() { window.removeEventListener("pointermove", onPointerMove); window.removeEventListener("pointerup", onPointerUp); }; - }, [constraintIterations, subStep]); + }, [constraintIterations, showForces, subStep]); // reset handler to re-create pendulums and avoid large dt on next frame const reset = () => { @@ -159,6 +162,14 @@ export default function Pendulum() { className="ml-2 w-16 px-2 py-1 border border-gray-300 rounded focus:outline-none" /> +