@classytic/labs 0.1.0

package/dist/physics/waves/ripple.mjs

@@ -0,0 +1,234 @@
+'use client';
+
+import { Tex as Tex$1 } from "../../core/tex.mjs";
+import { Chip, Slider } from "../../kit/controls.mjs";
+import { Callout, ControlBar, Field, LabFrame } from "../../kit/frame.mjs";
+import { HintLadder, useHints } from "../../kit/pedagogy.mjs";
+import { useFrameTick } from "../../kit/anim.mjs";
+import { PlayWrap, usePlayGate } from "../../kit/play.mjs";
+import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CanvasLayer, useControlSurface } from "@classytic/stage";
+
+//#region src/physics/waves/ripple.tsx
+/**
+* RippleTankLab — two-source interference in 2-D, the famous ripple tank. Two point
+* sources send out circular waves; where crests meet crests the water heaves
+* (CONSTRUCTIVE, a bright antinodal line, path difference = nλ) and where a crest
+* meets a trough it goes flat (DESTRUCTIVE, a dark nodal line, Δ = (n+½)λ). Drag the
+* sources, change the wavelength, and the fan of interference fringes opens and
+* closes. Two views: "ripples" (the live animated field) and "fringes" (the static
+* interference amplitude — crisp bright/dark hyperbolas).
+*
+* A genuine per-cell field → CanvasLayer heatmap. Distances are in pixels so the
+* wavefronts stay circular regardless of the box's aspect. Honours reduced-motion.
+*/
+const VIEW = {
+	xMin: 0,
+	xMax: 1,
+	yMin: 0,
+	yMax: 1
+};
+function RippleTankLab({ wavelength = .1, view: view0 = "ripples", title = "Ripple tank — two-source interference", prompt, objectives, hints: hintList, controlId, height = 320 }) {
+	const [lam, setLam] = useState(wavelength);
+	const [view, setView] = useState(view0);
+	const [mounted, setMounted] = useState(false);
+	const t = useRef(0);
+	const hints = useHints(hintList);
+	const gate = usePlayGate();
+	const s1 = useRef({
+		x: .35,
+		y: .5
+	});
+	const s2 = useRef({
+		x: .65,
+		y: .5
+	});
+	const drag = useRef(null);
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+	useEffect(() => {
+		const up = () => {
+			drag.current = null;
+		};
+		window.addEventListener("pointerup", up);
+		return () => window.removeEventListener("pointerup", up);
+	}, []);
+	const repaint = useFrameTick(gate.running && mounted && view === "ripples", (frame) => {
+		t.current += frame.dtMs / 1e3;
+	});
+	const draw = (ctx, _c) => {
+		const W = ctx.canvas.clientWidth || 640, H = height, CELL = 4;
+		const lamPx = Math.max(8, lam * W), k = 2 * Math.PI / lamPx, om = 2 * Math.PI * .7, tt = t.current;
+		const p1 = {
+			x: s1.current.x * W,
+			y: (1 - s1.current.y) * H
+		};
+		const p2 = {
+			x: s2.current.x * W,
+			y: (1 - s2.current.y) * H
+		};
+		for (let px = 0; px < W; px += CELL) for (let py = 0; py < H; py += CELL) {
+			const r1 = Math.hypot(px - p1.x, py - p1.y), r2 = Math.hypot(px - p2.x, py - p2.y);
+			let L;
+			if (view === "ripples") L = 50 + (Math.sin(k * r1 - om * tt) + Math.sin(k * r2 - om * tt)) / 2 * 40;
+			else L = 8 + Math.abs(Math.cos(k * (r1 - r2) / 2)) * 82;
+			ctx.fillStyle = `hsl(205 68% ${L.toFixed(0)}%)`;
+			ctx.fillRect(px, py, 5, 5);
+		}
+		for (const p of [p1, p2]) {
+			ctx.fillStyle = "#fff";
+			ctx.strokeStyle = "#111";
+			ctx.lineWidth = 2;
+			ctx.beginPath();
+			ctx.arc(p.x, p.y, 6, 0, Math.PI * 2);
+			ctx.fill();
+			ctx.stroke();
+		}
+	};
+	const pick = (m) => {
+		drag.current = Math.hypot(m[0] - s1.current.x, m[1] - s1.current.y) <= Math.hypot(m[0] - s2.current.x, m[1] - s2.current.y) ? 0 : 1;
+		move(m);
+	};
+	const move = (m) => {
+		const s = drag.current === 0 ? s1 : s2;
+		s.current = {
+			x: Math.max(.04, Math.min(.96, m[0])),
+			y: Math.max(.06, Math.min(.94, m[1]))
+		};
+		repaint();
+	};
+	useControlSurface(controlId, {
+		wavelength: {
+			type: "number",
+			label: "wavelength",
+			min: .05,
+			max: .2,
+			step: .005,
+			get: () => lam,
+			set: setLam
+		},
+		view: {
+			type: "enum",
+			label: "view",
+			options: ["ripples", "fringes"],
+			get: () => view,
+			set: (v) => setView(v)
+		},
+		run: {
+			type: "action",
+			label: gate.playing ? "pause" : "play",
+			invoke: () => gate.setPlaying(!gate.playing)
+		}
+	});
+	const figure = /* @__PURE__ */ jsx(PlayWrap, {
+		gate,
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				borderRadius: 14,
+				overflow: "hidden",
+				background: "#0b1726",
+				border: "1px solid var(--stage-grid)"
+			},
+			children: /* @__PURE__ */ jsx(CanvasLayer, {
+				view: VIEW,
+				height,
+				draw,
+				onPointerMath: (m) => {
+					if (drag.current == null) pick(m);
+					else move(m);
+				},
+				ariaLabel: "ripple tank two-source interference"
+			})
+		})
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		objectives,
+		aside: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Callout, {
+			tone: "result",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "lab-field-label",
+				style: { marginBottom: 6 },
+				children: "interference"
+			}), /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 6,
+					fontSize: 14,
+					fontWeight: 700
+				},
+				children: [/* @__PURE__ */ jsxs("span", { children: [
+					/* @__PURE__ */ jsx("span", {
+						style: { color: "var(--stage-good)" },
+						children: "bright"
+					}),
+					" — crests meet · ",
+					/* @__PURE__ */ jsx(Tex$1, { tex: "\\Delta = n\\lambda" })
+				] }), /* @__PURE__ */ jsxs("span", { children: [
+					/* @__PURE__ */ jsx("span", {
+						style: { color: "var(--stage-accent)" },
+						children: "dark"
+					}),
+					" — crest + trough · ",
+					/* @__PURE__ */ jsx(Tex$1, { tex: "\\Delta = \\left(n + \\tfrac12\\right)\\lambda" })
+				] })]
+			})]
+		}), /* @__PURE__ */ jsxs("p", {
+			className: "lab-prompt",
+			style: { fontSize: 13 },
+			children: [
+				view === "fringes" ? "Static interference pattern: the bright hyperbolas are where the two waves always reinforce; the dark ones where they always cancel." : "Live ripples — watch crests collide. The still (grey) lines between the churn are where the waves cancel.",
+				" ",
+				"Shorter wavelength or wider sources → more, tighter fringes."
+			]
+		})] }),
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
+			/* @__PURE__ */ jsx(Field, {
+				label: "view",
+				children: /* @__PURE__ */ jsxs("span", {
+					style: {
+						display: "flex",
+						gap: 6
+					},
+					children: [/* @__PURE__ */ jsx(Chip, {
+						selected: view === "ripples",
+						onClick: () => setView("ripples"),
+						children: "ripples"
+					}), /* @__PURE__ */ jsx(Chip, {
+						selected: view === "fringes",
+						onClick: () => setView("fringes"),
+						children: "fringes"
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "wavelength",
+				value: lam.toFixed(3),
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: lam,
+					min: .05,
+					max: .2,
+					step: .005,
+					onChange: setLam,
+					ariaLabel: "wavelength"
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: 12,
+					color: "var(--stage-muted)"
+				},
+				children: "drag the two white sources ↔ · ▶ play to animate"
+			})
+		] }),
+		footer: /* @__PURE__ */ jsx(HintLadder, { hints }),
+		children: figure
+	});
+}
+
+//#endregion
+export { RippleTankLab };

package/dist/physics/waves/string.d.mts

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+
+//#region src/physics/waves/string.d.ts
+type StringMode = 'pulse' | 'resonance';
+type EndType = 'fixed' | 'free';
+interface StringReflectionProps {
+  mode?: StringMode;
+  end?: EndType;
+  frequency?: number;
+  title?: string;
+  prompt?: string;
+  objectives?: string[];
+  hints?: string[];
+  controlId?: string;
+  height?: number;
+}
+declare function StringReflectionLab({
+  mode: mode0,
+  end: end0,
+  frequency,
+  title,
+  prompt,
+  objectives,
+  hints: hintList,
+  controlId,
+  height
+}: StringReflectionProps): ReactNode;
+//#endregion
+export { EndType, StringMode, StringReflectionLab, StringReflectionProps };

package/dist/physics/waves/string.mjs

@@ -0,0 +1,289 @@
+'use client';
+
+import { Tex as Tex$1 } from "../../core/tex.mjs";
+import { Chip, Slider } from "../../kit/controls.mjs";
+import { Callout, ControlBar, Field, LabFrame } from "../../kit/frame.mjs";
+import { HintLadder, useHints } from "../../kit/pedagogy.mjs";
+import { useFrameTick } from "../../kit/anim.mjs";
+import { PlayWrap, usePlayGate } from "../../kit/play.mjs";
+import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CanvasLayer, useControlSurface } from "@classytic/stage";
+
+//#region src/physics/waves/string.tsx
+/**
+* StringReflectionLab — where standing waves COME FROM. Two lessons in one string:
+*   • pulse — send a single bump down the string and watch it bounce off the end.
+*     A FIXED end flips it (inverts); a FREE end sends it back upright. The string
+*     itself is always incident + reflected added together (both shown faint).
+*   • resonance — send a continuous wave; it reflects and superposes with itself.
+*     At most frequencies the ends won't sit still, but at the special resonant
+*     frequencies fₙ = n·c/2L the reflection locks in and a clean STANDING wave (the
+*     nth harmonic) appears — nodes pinned to both ends. That's how a string sings.
+*
+* Exact boundary behaviour via the image method; animated on <CanvasLayer>,
+* play-gated, reduced-motion aware. The standing-wave maths matches the wave kernel.
+*/
+const L = 10, C = 4, A = 1.5;
+const view = {
+	xMin: -.4,
+	xMax: 10.4,
+	yMin: -4,
+	yMax: 4
+};
+const pulse = (u, sig = .7) => A * Math.exp(-(u * u) / (2 * sig * sig));
+function StringReflectionLab({ mode: mode0 = "pulse", end: end0 = "fixed", frequency = .4, title = "Reflection & standing waves", prompt, objectives, hints: hintList, controlId, height = 300 }) {
+	const [mode, setMode] = useState(mode0);
+	const [end, setEnd] = useState(end0);
+	const [f, setF] = useState(frequency);
+	const [mounted, setMounted] = useState(false);
+	const t = useRef(0);
+	const hints = useHints(hintList);
+	const gate = usePlayGate();
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+	useFrameTick(gate.running && mounted, (frame) => {
+		t.current += frame.dtMs / 1e3;
+		if (mode === "pulse" && C * t.current > 24) t.current = 0;
+	});
+	const k = 2 * Math.PI * f / C;
+	const nNear = Math.max(1, Math.round(k * L / Math.PI));
+	const fRes = nNear * C / (2 * L);
+	const resonant = Math.abs(f - fRes) < .012;
+	const draw = (ctx, c) => {
+		const css = getComputedStyle(ctx.canvas);
+		const tok = (n, fb) => css.getPropertyValue(n).trim() || fb;
+		const acc = tok("--stage-accent", "#1c7ed6"), warn = tok("--stage-warn", "#e8a020"), good = tok("--stage-good", "#2f9e44"), mut = tok("--stage-muted", "#888"), fg = tok("--stage-fg", "#222");
+		const W = ctx.canvas.clientWidth || 640, H = height;
+		ctx.clearRect(0, 0, W, H);
+		const [, y0] = c.toPx(0, 0);
+		const tt = t.current;
+		ctx.strokeStyle = mut;
+		ctx.globalAlpha = .4;
+		ctx.lineWidth = 1;
+		ctx.beginPath();
+		ctx.moveTo(c.toPx(0, 0)[0], y0);
+		ctx.lineTo(c.toPx(L, 0)[0], y0);
+		ctx.stroke();
+		ctx.globalAlpha = 1;
+		const plot = (fn, color, w, alpha = 1) => {
+			ctx.strokeStyle = color;
+			ctx.lineWidth = w;
+			ctx.globalAlpha = alpha;
+			ctx.beginPath();
+			for (let i = 0; i <= 300; i++) {
+				const x = i / 300 * L;
+				const [px, py] = c.toPx(x, fn(x));
+				i ? ctx.lineTo(px, py) : ctx.moveTo(px, py);
+			}
+			ctx.stroke();
+			ctx.globalAlpha = 1;
+		};
+		let inc, ref;
+		if (mode === "pulse") {
+			const s = end === "fixed" ? -1 : 1;
+			inc = (x) => pulse(x - 1 - C * tt);
+			ref = (x) => s * pulse(2 * L - x - 1 - C * tt);
+		} else {
+			const om = 2 * Math.PI * f;
+			inc = (x) => A * Math.sin(k * x - om * tt);
+			ref = (x) => A * Math.sin(k * x + om * tt);
+		}
+		plot(inc, acc, 1.5, .4);
+		plot(ref, warn, 1.5, .4);
+		plot((x) => inc(x) + ref(x), good, 3);
+		const wall = (xx) => {
+			const [px] = c.toPx(xx, 0);
+			ctx.strokeStyle = fg;
+			ctx.lineWidth = 3;
+			ctx.beginPath();
+			ctx.moveTo(px, c.toPx(xx, 2.6)[1]);
+			ctx.lineTo(px, c.toPx(xx, -2.6)[1]);
+			ctx.stroke();
+		};
+		const ring = (xx) => {
+			const [px] = c.toPx(xx, 0);
+			ctx.strokeStyle = fg;
+			ctx.lineWidth = 2;
+			ctx.beginPath();
+			ctx.arc(px, y0, 7, 0, Math.PI * 2);
+			ctx.stroke();
+		};
+		if (mode === "pulse") {
+			ring(0);
+			end === "fixed" ? wall(L) : ring(L);
+		} else {
+			wall(0);
+			wall(L);
+		}
+		if (mode === "resonance" && resonant) for (let m = 0; m <= nNear; m++) {
+			const xn = m * L / nNear;
+			const [px] = c.toPx(xn, 0);
+			ctx.fillStyle = warn;
+			ctx.beginPath();
+			ctx.arc(px, y0, 4, 0, Math.PI * 2);
+			ctx.fill();
+		}
+	};
+	useControlSurface(controlId, {
+		mode: {
+			type: "enum",
+			label: "mode",
+			options: ["pulse", "resonance"],
+			get: () => mode,
+			set: (m) => setMode(m)
+		},
+		end: {
+			type: "enum",
+			label: "end (pulse)",
+			options: ["fixed", "free"],
+			get: () => end,
+			set: (e) => setEnd(e)
+		},
+		frequency: {
+			type: "number",
+			label: "frequency",
+			min: .1,
+			max: 1.6,
+			step: .01,
+			get: () => f,
+			set: setF
+		},
+		snap: {
+			type: "action",
+			label: "snap to resonance",
+			invoke: () => setF(fRes)
+		}
+	});
+	const figure = /* @__PURE__ */ jsx(PlayWrap, {
+		gate,
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				borderRadius: 14,
+				overflow: "hidden",
+				background: "var(--stage-bg)",
+				border: "1px solid var(--stage-grid)"
+			},
+			children: /* @__PURE__ */ jsx(CanvasLayer, {
+				view,
+				height,
+				draw,
+				ariaLabel: `${mode} on a string`
+			})
+		})
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		objectives,
+		aside: mode === "pulse" ? /* @__PURE__ */ jsxs(Callout, {
+			tone: "result",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "lab-field-label",
+					children: [end, " end"]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: 15,
+						fontWeight: 800,
+						color: end === "fixed" ? "var(--stage-warn)" : "var(--stage-good)"
+					},
+					children: end === "fixed" ? "reflects INVERTED" : "reflects UPRIGHT"
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: 12,
+						color: "var(--stage-muted)"
+					},
+					children: "green = incident + reflected (both faint)"
+				})
+			]
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Callout, {
+			tone: "result",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "lab-field-label",
+					children: ["resonance ", /* @__PURE__ */ jsx(Tex$1, { tex: "f_n = \\tfrac{n c}{2L}" })]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "lab-callout-big",
+					style: { color: resonant ? "var(--stage-good)" : "var(--stage-fg)" },
+					children: resonant ? `n = ${nNear} ✓` : "…"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						fontSize: 12,
+						color: "var(--stage-muted)"
+					},
+					children: [
+						"nearest harmonic ",
+						/* @__PURE__ */ jsx(Tex$1, { tex: `f_{${nNear}}` }),
+						" = ",
+						fRes.toFixed(2)
+					]
+				})
+			]
+		}), /* @__PURE__ */ jsx("p", {
+			className: "lab-prompt",
+			style: { fontSize: 13 },
+			children: resonant ? `Resonance! The reflection locks in — a clean ${nNear}-loop standing wave with nodes on both ends.` : "Off resonance: the ends won’t hold still. Nudge f toward a harmonic (or snap) until it locks."
+		})] }),
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [/* @__PURE__ */ jsx(Field, {
+			label: "mode",
+			children: /* @__PURE__ */ jsxs("span", {
+				style: {
+					display: "flex",
+					gap: 6
+				},
+				children: [/* @__PURE__ */ jsx(Chip, {
+					selected: mode === "pulse",
+					onClick: () => setMode("pulse"),
+					children: "pulse + reflect"
+				}), /* @__PURE__ */ jsx(Chip, {
+					selected: mode === "resonance",
+					onClick: () => setMode("resonance"),
+					children: "standing / resonance"
+				})]
+			})
+		}), mode === "pulse" ? /* @__PURE__ */ jsx(Field, {
+			label: "end",
+			children: /* @__PURE__ */ jsxs("span", {
+				style: {
+					display: "flex",
+					gap: 6
+				},
+				children: [/* @__PURE__ */ jsx(Chip, {
+					selected: end === "fixed",
+					onClick: () => setEnd("fixed"),
+					children: "fixed"
+				}), /* @__PURE__ */ jsx(Chip, {
+					selected: end === "free",
+					onClick: () => setEnd("free"),
+					children: "free"
+				})]
+			})
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Field, {
+			label: "frequency",
+			value: f.toFixed(2),
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: f,
+				min: .1,
+				max: 1.6,
+				step: .01,
+				onChange: setF,
+				ariaLabel: "frequency"
+			})
+		}), /* @__PURE__ */ jsxs(Chip, {
+			selected: false,
+			onClick: () => setF(fRes),
+			children: ["snap to f", nNear]
+		})] })] }),
+		footer: /* @__PURE__ */ jsx(HintLadder, { hints }),
+		children: figure
+	});
+}
+
+//#endregion
+export { StringReflectionLab };

package/dist/physics/work-energy/index.d.mts

@@ -0,0 +1 @@
+import { WorkEnergyLab, WorkEnergyProps } from "./preset.mjs";

package/dist/physics/work-energy/preset.d.mts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+
+//#region src/physics/work-energy/preset.d.ts
+interface WorkEnergyProps {
+  mode?: 'spring' | 'constant';
+  title?: string;
+  prompt?: string;
+  objectives?: string[];
+}
+declare function WorkEnergyLab({
+  mode: mode0,
+  title,
+  prompt,
+  objectives
+}?: WorkEnergyProps): ReactNode;
+//#endregion
+export { WorkEnergyLab, WorkEnergyProps };