@classytic/labs 0.2.0 → 0.4.0

package/dist/physics/biot-savart/activity.mjs

@@ -0,0 +1,61 @@
+import { defineAuthoredActivity } from "../../kit/activity-authoring.mjs";
+
+//#region src/physics/biot-savart/activity.ts
+/**
+* The arc is the order a bench actually gives up its answers.
+*
+* A student meets field lines as a picture in a book and reasonably concludes
+* they are a drawing convention, like contour lines. They are not: a compass
+* put anywhere in the field really does line up that way, and the line is the
+* path you get by walking where the compass points. So the compasses come
+* FIRST here, and the lines are drawn through them afterwards, in that order,
+* because that is the direction the evidence runs.
+*/
+const magneticFieldActivity = defineAuthoredActivity({
+	pattern: "investigation",
+	title: "Find the shape of the field a current makes",
+	objectives: [
+		"Use the right-hand grip rule to predict which way the field circles a current",
+		"Read a field line as the path a compass traces, not as a drawing convention",
+		"Explain the spacing of the lines as the strength of the field",
+		"Identify a neutral point as two fields cancelling, not as an absence of field"
+	],
+	steps: [
+		{
+			id: "predict",
+			phase: "predict",
+			title: "Grip the wire before you look",
+			lead: "Point your right thumb along the current. Your fingers curl the way the field goes. For this arrangement, which way will a compass placed to the right of the conductor swing?"
+		},
+		{
+			id: "compasses",
+			phase: "act",
+			title: "Put compasses in the field",
+			lead: "Step forward to scatter plotting compasses through the space. Each one turns to lie along the field at the point it sits. Nothing is drawn between them yet.",
+			controls: true
+		},
+		{
+			id: "lines",
+			phase: "act",
+			title: "Join them up",
+			lead: "Step again. Each field line is traced by starting at a point and repeatedly stepping the way the compass there points. The lines are the compasses joined up, which is all they have ever been.",
+			controls: true
+		},
+		{
+			id: "observe",
+			phase: "observe",
+			title: "Read the spacing",
+			lead: "Where the lines crowd together the field is strong; where they spread it is weak. Move the probe and check the number against the picture. Change the current and watch both respond together.",
+			controls: true
+		},
+		{
+			id: "explain",
+			phase: "explain",
+			title: "Say what a neutral point is",
+			lead: "Switch to two wires carrying the same way. The midpoint reads zero. Explain why that is two fields cancelling rather than no field being present, and what happens to it when you reverse one current."
+		}
+	]
+});
+
+//#endregion
+export { magneticFieldActivity };

package/dist/physics/biot-savart/preset.mjs

@@ -0,0 +1,337 @@
+import { ActivitySelect, Slider, Stepper } from "../../kit/controls.mjs";
+import { Field, Stat, StatList } from "../../kit/frame.mjs";
+import { AuthoredActivityRuntime } from "../../kit/authored-activity-runtime.mjs";
+import { Figure, HUE } from "../../kit/figure/figure.mjs";
+import { FigText } from "../../kit/figure/text.mjs";
+import { CompassNeedle, CurrentMark, FieldLine, SolenoidGlyph } from "../../kit/magnetism/glyphs.mjs";
+import { magneticFieldActivity } from "./activity.mjs";
+import { ARRANGEMENTS, ARRANGEMENT_OPTIONS } from "./presets.mjs";
+import { useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { fieldAt, traceFullFieldLine } from "@classytic/stage/physics/magnetism";
+import { mag3 } from "@classytic/stage/core";
+
+//#region src/physics/biot-savart/preset.tsx
+/**
+* MagneticFieldLab: the field a current makes, traced rather than drawn from memory.
+*
+* Every field line on screen is produced by starting at a point and repeatedly
+* stepping the way the field points there, using the same Biot-Savart integral
+* that produces the numbers in the readout. Nothing here is a stored picture of
+* what a field "looks like". Change the geometry and the lines change because
+* the physics changed, which is the only way a diagram can be trusted to teach.
+*
+* ── Why compasses come before lines ────────────────────────────────────────────
+* The reveal order is conductors, then compasses, then lines. A student who
+* meets field lines first reasonably concludes they are a convention, like
+* contour lines on a map. Showing the compasses first, then joining them,
+* matches how the evidence actually runs and makes the line a RESULT.
+*
+* ── Why the plane is per-arrangement ──────────────────────────────────────────
+* A wire is viewed end-on so its circular lines are circles on the page; a coil
+* is viewed edge-on so its field runs up the page. In both cases the field is
+* genuinely in the plane drawn, by symmetry, so the picture loses nothing. Draw
+* either one in the other's plane and the lines would leave the page and the
+* diagram would be quietly false.
+*
+* ── Scale ─────────────────────────────────────────────────────────────────────
+* Compass needles show DIRECTION only, never length. Encoding strength in a
+* needle would be a second visual channel saying the same thing as line spacing
+* while implying compasses grow, which they do not.
+*/
+/**
+* A LANDSCAPE frame, not a square one.
+*
+* The figure renders at the container's full width, so a square viewBox becomes
+* a square that tall, and most of it is empty sky above and below the
+* interesting region. Cropping the vertical extent costs nothing: a field
+* diagram is always a window onto a field that continues past its edges, and
+* the lines are clipped at the frame anyway.
+*/
+const VIEW_W = 440;
+const VIEW_H = 300;
+const HALF_W = VIEW_W / 2;
+const HALF_H = VIEW_H / 2;
+/** conductors -> compasses -> lines -> probe reading. */
+const LAST_STEP = 3;
+/**
+* Metres to pixels, with SVG's downward y flipped so up the page is up.
+*
+* ONE scale for both axes. Stretching the vertical to fill the frame would turn
+* a wire's circular field lines into ellipses, which is the one thing this
+* diagram exists to get right.
+*/
+const perMetreIn = (arrangement) => HALF_W / arrangement.spanM;
+const projector = (arrangement) => {
+	const perMetre = perMetreIn(arrangement);
+	return (p) => ({
+		x: HALF_W + p.x * perMetre,
+		y: HALF_H - (arrangement.plane === "xy" ? p.y : p.z) * perMetre
+	});
+};
+/**
+* Compass positions: a square grid, PLUS the probe point itself.
+*
+* An even grid never lands on the centre, which is exactly where the
+* interesting thing happens in every two-source arrangement. Adding the probe
+* guarantees the neutral point gets a compass, and a compass with nothing to
+* point along is the clearest statement of what a neutral point is.
+*/
+const COMPASS_R = 14;
+/** Compass radius plus the largest conductor mark, plus a little air. */
+const KEEP_OUT = 30;
+/**
+* Is this screen point too close to something the lab draws as a conductor?
+*
+* A compass sitting on top of a wire symbol is unreadable, and it is also a lie:
+* there is no room inside a conductor to put an instrument. Near the wire the
+* field is strongest and changing fastest, so those are exactly the positions
+* where a fixed grid wants to put one.
+*/
+const onConductor = (at, arrangement, project) => arrangement.conductors(1).some((conductor) => {
+	const centre = project(conductor.at);
+	const perMetre = perMetreIn(arrangement);
+	if (conductor.kind === "wire-end") return Math.hypot(at.x - centre.x, at.y - centre.y) < KEEP_OUT;
+	if (conductor.kind === "coil-edge") {
+		const r = conductor.radiusM * perMetre;
+		return Math.hypot(at.x - (centre.x - r), at.y - centre.y) < KEEP_OUT || Math.hypot(at.x - (centre.x + r), at.y - centre.y) < KEEP_OUT;
+	}
+	const halfLength = conductor.lengthM * perMetre / 2 + KEEP_OUT * .5;
+	const halfHeight = conductor.radiusM * perMetre + KEEP_OUT * .5;
+	return Math.abs(at.x - centre.x) < halfLength && Math.abs(at.y - centre.y) < halfHeight;
+});
+const compassGrid = (arrangement) => {
+	const spots = [arrangement.probe];
+	const across = 5;
+	const down = 3;
+	const reachX = arrangement.spanM * .8;
+	const reachY = HALF_H / perMetreIn(arrangement) * .8;
+	for (let i = 0; i < across; i += 1) for (let j = 0; j < down; j += 1) {
+		const a = -reachX + 2 * reachX * i / 4;
+		const b = -reachY + 2 * reachY * j / 2;
+		spots.push(arrangement.plane === "xy" ? {
+			x: a,
+			y: b,
+			z: 0
+		} : {
+			x: a,
+			y: 0,
+			z: b
+		});
+	}
+	return spots;
+};
+/** Degrees clockwise from east, which is what CompassNeedle wants. */
+const headingOf = (field, plane) => {
+	const up = plane === "xy" ? field.y : field.z;
+	return -Math.atan2(up, field.x) * 180 / Math.PI;
+};
+const tesla = (value) => {
+	if (!Number.isFinite(value) || value === 0) return "0 T";
+	const abs = Math.abs(value);
+	if (abs >= .001) return `${(value * 1e3).toPrecision(3)} mT`;
+	if (abs >= 1e-6) return `${(value * 1e6).toPrecision(3)} µT`;
+	return `${(value * 1e9).toPrecision(3)} nT`;
+};
+function MagneticFieldLab({ arrangement: initialArrangement = "single-wire", currentA: initialCurrent = 10, startStep = 0, lockArrangement = false, lockCurrent = false, title = "The field a current makes", prompt, activity = magneticFieldActivity }) {
+	const [key, setKey] = useState(initialArrangement);
+	const [currentA, setCurrentA] = useState(initialCurrent);
+	const [step, setStep] = useState(Math.min(startStep, LAST_STEP));
+	const arrangement = ARRANGEMENTS[key];
+	const project = useMemo(() => projector(arrangement), [arrangement]);
+	const paths = useMemo(() => arrangement.build(currentA), [arrangement, currentA]);
+	const sense = Math.sign(currentA) || 1;
+	const lines = useMemo(() => {
+		const shaped = arrangement.build(sense);
+		return arrangement.seeds.map((seed) => {
+			const traced = traceFullFieldLine(shaped, seed, {
+				stepM: arrangement.spanM / 220,
+				boundsM: arrangement.spanM * 3,
+				maxSteps: 2600
+			});
+			return {
+				points: traced.points.map(project),
+				closed: traced.ended === "closed"
+			};
+		});
+	}, [
+		arrangement,
+		sense,
+		project
+	]);
+	const compasses = useMemo(() => {
+		const shaped = arrangement.build(sense);
+		return compassGrid(arrangement).flatMap((spot) => {
+			let field;
+			try {
+				field = fieldAt(shaped, spot).field;
+			} catch {
+				return [];
+			}
+			const size = mag3(field);
+			if (!Number.isFinite(size)) return [];
+			const screen = project(spot);
+			if (spot !== arrangement.probe && onConductor(screen, arrangement, project)) return [];
+			const settled = size > 1e-12;
+			return [{
+				...screen,
+				heading: settled ? headingOf(field, arrangement.plane) : void 0
+			}];
+		});
+	}, [
+		arrangement,
+		sense,
+		project
+	]);
+	const reading = useMemo(() => {
+		try {
+			return fieldAt(paths, arrangement.probe).magnitudeT;
+		} catch {
+			return null;
+		}
+	}, [paths, arrangement]);
+	const conductors = arrangement.conductors(currentA);
+	const scene = /* @__PURE__ */ jsxs(Figure, {
+		viewBox: [VIEW_W, VIEW_H],
+		domain: "physics",
+		label: arrangement.caption,
+		children: [
+			step >= 2 ? lines.map((line, i) => /* @__PURE__ */ jsx(FieldLine, {
+				points: line.points,
+				closed: line.closed,
+				arrows: line.closed ? 2 : 3,
+				clip: {
+					width: VIEW_W,
+					height: VIEW_H,
+					pad: -4
+				}
+			}, i)) : null,
+			step >= 1 ? compasses.map((c, i) => /* @__PURE__ */ jsx(CompassNeedle, {
+				cx: c.x,
+				cy: c.y,
+				r: COMPASS_R,
+				headingDeg: c.heading
+			}, i)) : /* @__PURE__ */ jsx(CompassNeedle, {
+				cx: project(arrangement.probe).x,
+				cy: project(arrangement.probe).y,
+				r: COMPASS_R
+			}),
+			conductors.map((conductor, i) => {
+				const at = project(conductor.at);
+				if (conductor.kind === "wire-end") return /* @__PURE__ */ jsx(CurrentMark, {
+					cx: at.x,
+					cy: at.y,
+					currentA: conductor.currentA,
+					label: conductor.label
+				}, i);
+				if (conductor.kind === "coil-edge") {
+					const perMetre = perMetreIn(arrangement);
+					const r = conductor.radiusM * perMetre;
+					return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx(CurrentMark, {
+						cx: at.x - r,
+						cy: at.y,
+						currentA: conductor.currentA
+					}), /* @__PURE__ */ jsx(CurrentMark, {
+						cx: at.x + r,
+						cy: at.y,
+						currentA: -conductor.currentA
+					})] }, i);
+				}
+				const perMetre = perMetreIn(arrangement);
+				return /* @__PURE__ */ jsx(SolenoidGlyph, {
+					cx: at.x,
+					cy: at.y,
+					length: conductor.lengthM * perMetre,
+					height: conductor.radiusM * 2 * perMetre,
+					turns: conductor.turns,
+					live: currentA !== 0
+				}, i);
+			}),
+			step >= 3 && reading !== null ? (() => {
+				const at = project(arrangement.probe);
+				return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("circle", {
+					cx: at.x,
+					cy: at.y,
+					r: 5,
+					fill: HUE[2]
+				}), /* @__PURE__ */ jsx(FigText, {
+					x: at.x + 10,
+					y: at.y + 20,
+					size: "label",
+					tone: "hue-2",
+					anchor: "start",
+					halo: true,
+					children: tesla(reading)
+				})] });
+			})() : null
+		]
+	});
+	const controls = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		lockArrangement ? null : /* @__PURE__ */ jsx(Field, {
+			label: "Arrangement",
+			children: /* @__PURE__ */ jsx(ActivitySelect, {
+				value: key,
+				onChange: (next) => {
+					setKey(next);
+					setStep(0);
+				},
+				options: ARRANGEMENT_OPTIONS,
+				ariaLabel: "Arrangement"
+			})
+		}),
+		lockCurrent ? null : /* @__PURE__ */ jsx(Field, {
+			label: "Current",
+			value: `${currentA.toFixed(0)} A`,
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: currentA,
+				min: -20,
+				max: 20,
+				step: 1,
+				onChange: setCurrentA,
+				ariaLabel: "Current in amperes",
+				valueText: `${currentA.toFixed(0)} amperes`
+			})
+		}),
+		/* @__PURE__ */ jsx(Field, {
+			label: "Reveal",
+			children: /* @__PURE__ */ jsx(Stepper, {
+				value: step,
+				onChange: setStep,
+				min: 0,
+				max: LAST_STEP,
+				label: "Reveal step"
+			})
+		})
+	] });
+	const evidence = /* @__PURE__ */ jsxs(StatList, {
+		ariaLabel: "Field readings",
+		children: [
+			/* @__PURE__ */ jsx(Stat, {
+				label: "Current",
+				value: `${currentA.toFixed(0)} A`
+			}),
+			/* @__PURE__ */ jsx(Stat, {
+				label: "B at the probe",
+				value: reading === null ? "on a conductor" : tesla(reading)
+			}),
+			/* @__PURE__ */ jsx(Stat, {
+				label: "Lines shown",
+				value: step >= 2 ? `${lines.length}` : "not yet"
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(AuthoredActivityRuntime, {
+		activity,
+		activityId: "magnetic-field",
+		eyebrow: "Magnetic fields",
+		title,
+		description: prompt ?? arrangement.caption,
+		controls,
+		evidence,
+		observation: step >= 3 ? arrangement.probeNote : void 0,
+		children: scene
+	});
+}
+
+//#endregion
+export { MagneticFieldLab };

package/dist/physics/biot-savart/presets.mjs

@@ -0,0 +1,149 @@
+import { flatCoil, longWire, solenoidRings } from "@classytic/stage/physics/magnetism";
+
+//#region src/physics/biot-savart/presets.ts
+const v = (x, y, z) => ({
+	x,
+	y,
+	z
+});
+/** Seeds spread along a line out from a centre, so lines nest instead of bunching. */
+const ring = (from, to, count, y = 0) => Array.from({ length: count }, (_, i) => v(from + (to - from) * i / (count - 1), y, 0));
+const ARRANGEMENTS = {
+	"single-wire": {
+		caption: "One straight wire, seen end-on with the current coming out of the page. The field lines are complete circles around it, closer together near the wire because the field is stronger there. Nothing begins or ends anywhere: a magnetic field line has no poles to start from.",
+		plane: "xy",
+		spanM: .09,
+		build: (i) => [longWire(v(0, 0, 0), v(0, 0, 1), i, 1e4, "wire")],
+		conductors: (i) => [{
+			kind: "wire-end",
+			at: v(0, 0, 0),
+			currentA: i,
+			label: "I"
+		}],
+		seeds: ring(.012, .072, 5),
+		probe: v(.03, 0, 0),
+		probeNote: "Double the distance and the reading halves, because B goes as 1/r, not 1/r²."
+	},
+	"parallel-same": {
+		caption: "Two wires carrying the same way. Midway between them the two fields point in opposite directions and cancel exactly, so a compass there is undecided. Each wire also sits in the other wire's field, and the force that follows pulls them together.",
+		plane: "xy",
+		spanM: .09,
+		build: (i) => [longWire(v(-.03, 0, 0), v(0, 0, 1), i, 1e4, "left"), longWire(v(.03, 0, 0), v(0, 0, 1), i, 1e4, "right")],
+		conductors: (i) => [{
+			kind: "wire-end",
+			at: v(-.03, 0, 0),
+			currentA: i,
+			label: "I₁"
+		}, {
+			kind: "wire-end",
+			at: v(.03, 0, 0),
+			currentA: i,
+			label: "I₂"
+		}],
+		seeds: [
+			v(-.045, 0, 0),
+			v(-.012, 0, 0),
+			v(.012, 0, 0),
+			v(.045, 0, 0),
+			v(0, .06, 0)
+		],
+		probe: v(0, 0, 0),
+		probeNote: "The midpoint reads zero. Two equal fields pointing opposite ways is the definition of a neutral point."
+	},
+	"parallel-opposite": {
+		caption: "The same two wires with one current reversed. Now the two fields at the midpoint point the SAME way and add, so the midpoint is a maximum instead of a zero. The force reverses too, and the wires push apart.",
+		plane: "xy",
+		spanM: .09,
+		build: (i) => [longWire(v(-.03, 0, 0), v(0, 0, 1), i, 1e4, "left"), longWire(v(.03, 0, 0), v(0, 0, 1), -i, 1e4, "right")],
+		conductors: (i) => [{
+			kind: "wire-end",
+			at: v(-.03, 0, 0),
+			currentA: i,
+			label: "I₁"
+		}, {
+			kind: "wire-end",
+			at: v(.03, 0, 0),
+			currentA: -i,
+			label: "I₂"
+		}],
+		seeds: [
+			v(-.045, 0, 0),
+			v(-.012, 0, 0),
+			v(.012, 0, 0),
+			v(.045, 0, 0),
+			v(0, .05, 0)
+		],
+		probe: v(0, 0, 0),
+		probeNote: "The midpoint now reads twice one wire alone. Same geometry, opposite answer, decided only by direction."
+	},
+	coil: {
+		caption: "A single loop seen edge-on, with the current up the near side and down the far side. Every part of the loop pushes the field the same way through the middle, which is why the centre is the strongest point and why the lines crowd there.",
+		plane: "xz",
+		spanM: .09,
+		build: (i) => [flatCoil(v(0, 0, 0), .03, i, 1, 360, "coil")],
+		conductors: (i) => [{
+			kind: "coil-edge",
+			at: v(0, 0, 0),
+			radiusM: .03,
+			currentA: i,
+			label: "I"
+		}],
+		seeds: [
+			v(0, 0, .002),
+			v(.012, 0, .002),
+			v(.022, 0, .002),
+			v(-.012, 0, .002),
+			v(-.022, 0, .002)
+		],
+		probe: v(0, 0, 0),
+		probeNote: "At the centre this is μ₀I/2r exactly. Move off along the axis and it falls away as the 3/2 power."
+	},
+	solenoid: {
+		caption: "Many turns in a row. Inside, every turn adds to the same straight field, so the lines run parallel and evenly spaced: this is how a uniform field is actually made. Outside, the same lines spread out and weaken, exactly like a bar magnet.",
+		plane: "xz",
+		spanM: .09,
+		build: (i) => solenoidRings(.018, .09, 10, i, 180, "solenoid"),
+		conductors: () => [{
+			kind: "solenoid",
+			at: v(0, 0, 0),
+			lengthM: .09,
+			radiusM: .018,
+			turns: 10,
+			label: "I"
+		}],
+		seeds: [
+			v(0, 0, 0),
+			v(.009, 0, 0),
+			v(-.009, 0, 0),
+			v(.026, 0, 0),
+			v(-.026, 0, 0)
+		],
+		probe: v(0, 0, 0),
+		probeNote: "Inside a long solenoid this is μ₀nI, and it does not depend on the radius at all."
+	}
+};
+const ARRANGEMENT_OPTIONS = [
+	{
+		value: "single-wire",
+		label: "One straight wire"
+	},
+	{
+		value: "parallel-same",
+		label: "Two wires, same way"
+	},
+	{
+		value: "parallel-opposite",
+		label: "Two wires, opposite ways"
+	},
+	{
+		value: "coil",
+		label: "A single coil"
+	},
+	{
+		value: "solenoid",
+		label: "A solenoid"
+	}
+];
+
+//#endregion
+export { ARRANGEMENTS, ARRANGEMENT_OPTIONS };

package/dist/physics/biot-savart/torque-activity.mjs

@@ -0,0 +1,57 @@
+import { defineAuthoredActivity } from "../../kit/activity-authoring.mjs";
+
+//#region src/physics/biot-savart/torque-activity.ts
+/**
+* The arc exists to break one habit: reading the angle off the question and
+* feeding it straight into sin.
+*
+* Almost every torque question states the angle the coil's PLANE makes with the
+* field, because that is the angle you can see in the diagram. The formula
+* wants the angle from the coil's NORMAL. They are complements, so using the
+* wrong one turns sin into cos and the answer is wrong in a way that still
+* looks plausible. Making the student predict where the torque is GREATEST,
+* before any number appears, is the cheapest way to settle which is which: it
+* is greatest when the coil lies along the field, which sin of the plane angle
+* gets backwards.
+*/
+const coilTorqueActivity = defineAuthoredActivity({
+	pattern: "investigation",
+	title: "Turn a coil in a field, and find where the turning effect dies",
+	objectives: [
+		"Identify the two sides of a coil that feel a force, and the two that do not",
+		"Explain the pair of forces as a couple: a turning effect with no net force",
+		"Use tau = NIAB sin(theta) with theta measured from the coil normal, not its plane",
+		"Explain why the coil stalls where the flux through it is greatest"
+	],
+	steps: [
+		{
+			id: "predict",
+			phase: "predict",
+			title: "Where is the turning effect strongest?",
+			lead: "The coil can sit anywhere from lying along the field to standing across it. Before you move it, predict which position gives the biggest turning effect."
+		},
+		{
+			id: "turn",
+			phase: "act",
+			title: "Turn it and watch the couple",
+			lead: "Drag the angle. The two forces never change size, because the current and the field do not change. Only their LINE OF ACTION moves, and that is what changes the torque.",
+			controls: true
+		},
+		{
+			id: "observe",
+			phase: "observe",
+			title: "Find the dead point",
+			lead: "Keep turning until the torque reaches zero. The forces are still there and still as large as ever. Say what has happened to them that leaves nothing to turn the coil.",
+			controls: true
+		},
+		{
+			id: "explain",
+			phase: "explain",
+			title: "Which angle does the formula want?",
+			lead: "The readout shows both angles at once. Explain why the torque is largest when the coil plane lies ALONG the field, and what that means for which angle belongs inside the sine."
+		}
+	]
+});
+
+//#endregion
+export { coilTorqueActivity };