@classytic/labs 0.1.0

package/dist/physics/rain-relative/preset.mjs

@@ -0,0 +1,358 @@
+'use client';
+
+import { mulberry32 } from "../../core/rng.mjs";
+import { Slider } from "../../kit/controls.mjs";
+import { ControlBar, Field, LabFrame, LiveRegion } from "../../kit/frame.mjs";
+import { AngleArc } from "../../kit/diagram.mjs";
+import { useFrameTick, useReducedMotion } from "../../kit/anim.mjs";
+import { PlayWrap, usePlayGate } from "../../kit/play.mjs";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CanvasLayer, Label, Segment, Stage, Vector, useCoords } from "@classytic/stage";
+
+//#region src/physics/rain-relative/preset.tsx
+/**
+* RainRelativeLab — relative velocity you can FEEL.
+*
+* Sit in a car in the rain. The rain falls straight down in the ground frame,
+* but in YOUR frame it slants — its apparent velocity is V_rain − V_car. Drag
+* the speed up and the rain streaks harder and leans more; the velocity triangle
+* and the angle θ track it live. This is the "show me" the static board lacked.
+*
+* Architecture on purpose: the hundreds of raindrops are drawn on `CanvasLayer`
+* (zero-dep Canvas2D — the engine's particle escape hatch, no Pixi), animated by
+* the shared `useFrameLoop` RAF clock; the car, the velocity triangle and the
+* labels sit on an SVG `<Stage>` overlaid on top (crisp + accessible). Honors
+* prefers-reduced-motion. One source of truth — `ratio = tan θ` — drives the
+* canvas slant, the triangle, and the readout, so they can never disagree.
+*/
+const VIEW = {
+	xMin: -6,
+	xMax: 6,
+	yMin: 0,
+	yMax: 8
+};
+const RAIN_FALL_PX = 360;
+const DROPS = 150;
+/** A clean SVG sedan whose wheels spin (driven by `wheelAngle`). Drawn in pixel
+*  space around the road-contact point (0, baseY), so it sits on the road at any
+*  view scale. Body tint follows `--stage-accent-2`; tyres are theme-neutral. */
+function Car({ baseY, wheelAngle }) {
+	const [px, py] = useCoords().toPx(0, baseY);
+	const edge = "color-mix(in oklab, var(--stage-accent-2) 58%, black)";
+	return /* @__PURE__ */ jsxs("g", {
+		transform: `translate(${px} ${py})`,
+		children: [
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+				id: "rr-car-body",
+				x1: "0",
+				y1: "0",
+				x2: "0",
+				y2: "1",
+				children: [/* @__PURE__ */ jsx("stop", {
+					offset: "0",
+					stopColor: "color-mix(in oklab, var(--stage-accent-2) 82%, white)"
+				}), /* @__PURE__ */ jsx("stop", {
+					offset: "1",
+					stopColor: "var(--stage-accent-2)"
+				})]
+			}) }),
+			/* @__PURE__ */ jsx("ellipse", {
+				cx: 0,
+				cy: -2,
+				rx: 94,
+				ry: 7,
+				fill: "#000",
+				opacity: .16
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M -88 -16 Q -96 -16 -96 -28 L -96 -33 Q -96 -44 -80 -45 L 78 -45 Q 94 -44 94 -31 L 94 -22 Q 94 -16 86 -16 Z",
+				fill: "url(#rr-car-body)",
+				stroke: edge,
+				strokeWidth: 2,
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M -54 -45 Q -46 -69 -18 -69 L 26 -69 Q 48 -69 58 -45 Z",
+				fill: "url(#rr-car-body)",
+				stroke: edge,
+				strokeWidth: 2,
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M -46 -47 Q -40 -64 -18 -64 L -4 -64 L -4 -47 Z",
+				fill: "#dceeff",
+				opacity: .92
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M 2 -47 L 2 -64 L 24 -64 Q 44 -64 52 -47 Z",
+				fill: "#dceeff",
+				opacity: .92
+			}),
+			/* @__PURE__ */ jsx("ellipse", {
+				cx: 88,
+				cy: -27,
+				rx: 5,
+				ry: 4,
+				fill: "#ffe07a"
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: -2,
+				y1: -45,
+				x2: -2,
+				y2: -18,
+				stroke: edge,
+				strokeWidth: 1.4,
+				opacity: .5
+			}),
+			[-50, 54].map((wx) => /* @__PURE__ */ jsxs("g", { children: [
+				/* @__PURE__ */ jsx("circle", {
+					cx: wx,
+					cy: -14,
+					r: 16,
+					fill: "#2b2b2b"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: wx,
+					cy: -14,
+					r: 9.5,
+					fill: "#d7d7d7"
+				}),
+				/* @__PURE__ */ jsxs("g", {
+					transform: `rotate(${wheelAngle} ${wx} -14)`,
+					stroke: "#8c8c8c",
+					strokeWidth: 2.4,
+					strokeLinecap: "round",
+					children: [
+						/* @__PURE__ */ jsx("line", {
+							x1: wx,
+							y1: -23,
+							x2: wx,
+							y2: -5
+						}),
+						/* @__PURE__ */ jsx("line", {
+							x1: wx - 9,
+							y1: -14,
+							x2: wx + 9,
+							y2: -14
+						}),
+						/* @__PURE__ */ jsx("line", {
+							x1: wx - 6.4,
+							y1: -20.4,
+							x2: wx + 6.4,
+							y2: -7.6
+						}),
+						/* @__PURE__ */ jsx("line", {
+							x1: wx - 6.4,
+							y1: -7.6,
+							x2: wx + 6.4,
+							y2: -20.4
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: wx,
+					cy: -14,
+					r: 3,
+					fill: "#555"
+				})
+			] }, wx))
+		]
+	});
+}
+function RainRelativeLab({ maxSpeed = 10, start = 0, title = "Rain on a moving car", prompt = "Speed up — watch the rain slant. In your frame the rain comes at V_rain − V_car.", height = 360 }) {
+	const [speed, setSpeed] = useState(start);
+	const drops = useRef([]);
+	const lastT = useRef(0);
+	const wheelAngle = useRef(0);
+	const rng = useRef(mulberry32(20240621));
+	const reduce = useReducedMotion();
+	const gate = usePlayGate();
+	const ratio = speed / maxSpeed * 1.7;
+	const thetaDeg = Math.round(Math.atan(ratio) * 180 / Math.PI);
+	useFrameTick(gate.running && !reduce, (f) => {
+		wheelAngle.current = (wheelAngle.current + speed * f.dtMs * .05) % 360;
+	});
+	const draw = (ctx, c) => {
+		const W = c.width, H = c.height;
+		if (drops.current.length === 0) {
+			const rnd = rng.current;
+			drops.current = Array.from({ length: DROPS }, () => ({
+				x: rnd() * (W + 200) - 100,
+				y: rnd() * H,
+				len: 10 + rnd() * 10
+			}));
+		}
+		const now = performance.now();
+		let dt = (now - lastT.current) / 1e3;
+		if (!(dt > 0) || dt > .1) dt = .016;
+		lastT.current = now;
+		const vy = RAIN_FALL_PX;
+		const vx = -ratio * RAIN_FALL_PX;
+		const sp = Math.hypot(vx, vy) || 1;
+		const ux = vx / sp, uy = vy / sp;
+		const accent = typeof getComputedStyle !== "undefined" && getComputedStyle(document.documentElement).getPropertyValue("--stage-accent").trim() || "rgb(120,160,235)";
+		ctx.clearRect(0, 0, W, H);
+		ctx.strokeStyle = accent;
+		ctx.globalAlpha = .5;
+		ctx.lineWidth = 1.6;
+		ctx.lineCap = "round";
+		ctx.beginPath();
+		for (const d of drops.current) {
+			if (!reduce) {
+				d.x += vx * dt;
+				d.y += vy * dt;
+			}
+			if (d.y > H + 12) {
+				d.y = -12;
+				d.x = rng.current() * (W + 200) - 100;
+			}
+			if (d.x < -60) d.x += W + 120;
+			else if (d.x > W + 60) d.x -= W + 120;
+			ctx.moveTo(d.x, d.y);
+			ctx.lineTo(d.x - ux * d.len, d.y - uy * d.len);
+		}
+		ctx.stroke();
+		ctx.globalAlpha = 1;
+	};
+	const O = {
+		x: 2.7,
+		y: 6.2
+	};
+	const vr = 2.3;
+	const vcar = ratio * vr;
+	const aRain = {
+		x: O.x,
+		y: O.y - vr
+	};
+	const aRC = {
+		x: O.x - vcar,
+		y: O.y - vr
+	};
+	const cy = 1.5;
+	const figure = /* @__PURE__ */ jsx(PlayWrap, {
+		gate,
+		children: /* @__PURE__ */ jsxs("div", {
+			style: {
+				position: "relative",
+				width: "100%",
+				borderRadius: 14,
+				overflow: "hidden",
+				background: "var(--stage-bg)",
+				border: "1px solid var(--stage-grid)"
+			},
+			children: [
+				/* @__PURE__ */ jsx(CanvasLayer, {
+					view: VIEW,
+					height,
+					draw,
+					ariaLabel: `rain slanting ${thetaDeg} degrees as the car speeds up`
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						position: "absolute",
+						inset: 0,
+						pointerEvents: "none"
+					},
+					children: /* @__PURE__ */ jsxs(Stage, {
+						view: VIEW,
+						height,
+						preserveAspect: false,
+						background: "transparent",
+						ariaLabel: "car and velocity triangle",
+						children: [
+							/* @__PURE__ */ jsx(Segment, {
+								from: {
+									x: -6,
+									y: cy
+								},
+								to: {
+									x: 6,
+									y: cy
+								},
+								color: "var(--stage-fg)",
+								opacity: .5,
+								weight: 2
+							}),
+							/* @__PURE__ */ jsx(Car, {
+								baseY: cy,
+								wheelAngle: wheelAngle.current
+							}),
+							/* @__PURE__ */ jsx(Vector, {
+								tail: O,
+								tip: aRain,
+								color: "var(--stage-accent)",
+								weight: 2.5
+							}),
+							/* @__PURE__ */ jsx(Label, {
+								x: aRain.x,
+								y: (O.y + aRain.y) / 2,
+								text: "rain",
+								color: "var(--stage-accent)",
+								size: 12,
+								dx: 16,
+								dy: 16
+							}),
+							/* @__PURE__ */ jsx(Segment, {
+								from: aRain,
+								to: aRC,
+								color: "var(--stage-muted)",
+								weight: 1.5,
+								dashed: true
+							}),
+							/* @__PURE__ */ jsx(Vector, {
+								tail: O,
+								tip: aRC,
+								color: "var(--stage-warn)",
+								weight: 3.5
+							}),
+							/* @__PURE__ */ jsx(Label, {
+								x: aRC.x,
+								y: aRC.y,
+								text: "apparent",
+								color: "var(--stage-warn)",
+								size: 12,
+								dx: -10,
+								dy: 14
+							}),
+							/* @__PURE__ */ jsx(AngleArc, {
+								at: O,
+								from: {
+									x: 0,
+									y: -1
+								},
+								to: {
+									x: -vcar,
+									y: -2.3
+								},
+								rPx: 24,
+								label: `${thetaDeg}°`
+							})
+						]
+					})
+				}),
+				/* @__PURE__ */ jsx(LiveRegion, { children: `Car speed ${speed}. Apparent rain ${thetaDeg} degrees from vertical.` })
+			]
+		})
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		controls: /* @__PURE__ */ jsx(ControlBar, { children: /* @__PURE__ */ jsx(Field, {
+			label: "car speed",
+			value: `${thetaDeg}° from vertical`,
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: speed,
+				min: 0,
+				max: maxSpeed,
+				step: .5,
+				onChange: setSpeed,
+				ariaLabel: "car speed"
+			})
+		}) }),
+		children: figure
+	});
+}
+
+//#endregion
+export { RainRelativeLab };

package/dist/physics/ramp-forces/index.d.mts

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

package/dist/physics/ramp-forces/preset.d.mts

@@ -0,0 +1,36 @@
+import { ControlConfig } from "../../kit/frame.mjs";
+import { ReactNode } from "react";
+
+//#region src/physics/ramp-forces/preset.d.ts
+interface RampForcesProps {
+  angleDeg?: number;
+  mass?: number;
+  /** Static coefficient μs (the grip that must be broken to start moving). */
+  friction?: number;
+  /** Kinetic coefficient μk (while sliding; clamped ≤ μs). */
+  frictionKinetic?: number;
+  /** Applied force along the slope, N. Positive = push up-slope, negative = pull/push down. */
+  appliedN?: number;
+  g?: number;
+  showComponents?: boolean;
+  title?: string;
+  prompt?: string;
+  objectives?: string[];
+  /** Creator's per-knob hide/lock policy. Names: angle, push, mass, frictionStatic, frictionKinetic, components, release. */
+  controlConfig?: ControlConfig;
+}
+declare function RampForcesLab({
+  angleDeg,
+  mass,
+  friction,
+  frictionKinetic,
+  appliedN,
+  g,
+  showComponents,
+  title,
+  prompt,
+  objectives,
+  controlConfig
+}: RampForcesProps): ReactNode;
+//#endregion
+export { RampForcesLab, RampForcesProps };