"use client"; import { useEffect, useRef } from "react"; import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; import type { SimulationManifest } from "@/lib/sim/manifest"; import type { ParameterValues } from "@/lib/sim/types"; import { computeFieldArrows } from "./biot-savart"; import SoundWaveCanvas from "./SoundWaveCanvas.client"; type Tracer = | { kind: "orbit"; mesh: THREE.Mesh; radius: number; y: number; phase: number; speed: number; direction: number; } | { kind: "path"; mesh: THREE.Mesh; curve: THREE.CatmullRomCurve3; phase: number; speed: number; direction: number; }; function numberValue(values: ParameterValues, key: string, fallback: number) { const value = values[key]; return typeof value === "number" ? value : fallback; } function sourceValue(values: ParameterValues) { const value = values.source; return typeof value === "string" ? value : "straight-wire"; } function clamp(value: number, min: number, max: number) { return Math.min(max, Math.max(min, value)); } function fieldColor(magnitude: number) { const amount = clamp(Math.log1p(magnitude) / 3.2, 0, 1); return new THREE.Color("#5BE3FF").lerp(new THREE.Color("#FFC857"), amount); } function arrowSamples(source: string): Array<[number, number, number]> { if (source === "loop") { const axis = [-1.8, -1.2, -0.6, 0, 0.6, 1.2, 1.8].map((y) => [0, y, 0] as [number, number, number]); const grid = [-1.8, -1.05, -0.35, 0.35, 1.05, 1.8].flatMap((x) => [-1.8, -1.05, -0.35, 0.35, 1.05, 1.8].flatMap((z) => [-0.9, 0, 0.9].map((y) => [x, y, z] as [number, number, number]) ) ); return [...axis, ...grid].filter(([x, y, z]) => Math.hypot(x, z) > 0.22 || Math.abs(y) > 0.2); } const yLevels = [-1.45, -0.72, 0, 0.72, 1.45]; const radii = [0.45, 0.78, 1.15, 1.62, 2.08]; const angles = Array.from({ length: 18 }, (_, index) => (index / 18) * Math.PI * 2); return yLevels.flatMap((y) => radii.flatMap((radius) => angles.map((angle) => [Math.cos(angle) * radius, y, Math.sin(angle) * radius] as [number, number, number]) ) ); } function addFieldArrow(group: THREE.Group, origin: [number, number, number], direction: [number, number, number], magnitude: number) { const vector = new THREE.Vector3(...direction); if (vector.lengthSq() < 0.000001) return; vector.normalize(); const length = clamp(0.18 + Math.log1p(magnitude) * 0.07, 0.18, 0.52); const color = fieldColor(magnitude); const arrow = new THREE.ArrowHelper(vector, new THREE.Vector3(...origin), length, color, length * 0.34, length * 0.16); const lineMaterial = arrow.line.material as THREE.LineBasicMaterial; lineMaterial.transparent = true; lineMaterial.opacity = 0.72; const coneMaterial = arrow.cone.material as THREE.MeshBasicMaterial; coneMaterial.transparent = true; coneMaterial.opacity = 0.86; group.add(arrow); } function addCircle(group: THREE.Group, radius: number, y: number, color: string, opacity: number) { const points = Array.from({ length: 145 }, (_, index) => { const angle = (index / 144) * Math.PI * 2; return new THREE.Vector3(Math.cos(angle) * radius, y, Math.sin(angle) * radius); }); const geometry = new THREE.BufferGeometry().setFromPoints(points); const material = new THREE.LineBasicMaterial({ color, transparent: true, opacity }); group.add(new THREE.Line(geometry, material)); } function loopFieldLine(size: number, azimuth: number) { const points: THREE.Vector3[] = []; const ca = Math.cos(azimuth); const sa = Math.sin(azimuth); const thetaStart = 0.2; const thetaEnd = Math.PI - 0.2; const steps = 96; for (let index = 0; index <= steps; index += 1) { const theta = thetaStart + ((thetaEnd - thetaStart) * index) / steps; const sin = Math.sin(theta); const r = size * sin * sin; const rho = r * sin; const y = r * Math.cos(theta); points.push(new THREE.Vector3(rho * ca, y, rho * sa)); } const bottom = points[points.length - 1]; const top = points[0]; for (let index = 1; index <= 34; index += 1) { const t = index / 34; const y = bottom.y + (top.y - bottom.y) * t; const pinch = Math.sin(t * Math.PI); const rho = 0.13 + 0.08 * pinch; points.push(new THREE.Vector3(rho * ca, y, rho * sa)); } return new THREE.CatmullRomCurve3(points, true, "centripetal"); } function addLoopFieldLines(group: THREE.Group) { const curves: THREE.CatmullRomCurve3[] = []; const azimuths = Array.from({ length: 10 }, (_, index) => (index / 10) * Math.PI * 2); const sizes = [1.55, 2.1, 2.75, 3.45]; for (const [sizeIndex, size] of sizes.entries()) { for (const azimuth of azimuths) { if (sizeIndex > 1 && azimuths.indexOf(azimuth) % 2 === 1) continue; const curve = loopFieldLine(size, azimuth); curves.push(curve); const geometry = new THREE.BufferGeometry().setFromPoints(curve.getPoints(180)); const material = new THREE.LineBasicMaterial({ color: size < 2.2 ? "#FFC857" : "#5BE3FF", transparent: true, opacity: size < 2.2 ? 0.24 : 0.15 }); group.add(new THREE.Line(geometry, material)); } } return curves; } function addStraightWireTracers(group: THREE.Group, current: number): Tracer[] { const tracers: Tracer[] = []; const material = new THREE.MeshBasicMaterial({ color: "#F4F7FF", transparent: true, opacity: 0.92 }); const geometry = new THREE.SphereGeometry(0.035, 10, 10); const direction = Math.sign(current || 1); for (const y of [-1.45, -0.72, 0, 0.72, 1.45]) { for (const radius of [0.55, 0.95, 1.38, 1.85]) { for (let index = 0; index < 3; index += 1) { const mesh = new THREE.Mesh(geometry, material); group.add(mesh); tracers.push({ kind: "orbit", mesh, radius, y, phase: (index / 3) * Math.PI * 2 + y, speed: 0.35 + 0.16 / radius, direction }); } } } return tracers; } function addLoopTracers(group: THREE.Group, curves: THREE.CatmullRomCurve3[], current: number): Tracer[] { const geometry = new THREE.SphereGeometry(0.04, 10, 10); const material = new THREE.MeshBasicMaterial({ color: "#F4F7FF", transparent: true, opacity: 0.9 }); const direction = Math.sign(current || 1); return curves.flatMap((curve, curveIndex) => [0, 0.5].map((offset, offsetIndex) => { const phase = (curveIndex * 0.071 + offset) % 1; const mesh = new THREE.Mesh(geometry, material); mesh.position.copy(curve.getPointAt(phase)); group.add(mesh); return { kind: "path" as const, mesh, curve, phase, speed: 0.055 + offsetIndex * 0.018 + (curveIndex % 4) * 0.004, direction }; }) ); } function updateTracers(tracers: Tracer[], current: number, dt: number, reducedMotion?: boolean) { if (reducedMotion) return; const direction = Math.sign(current || 1); for (const tracer of tracers) { if (tracer.kind === "orbit") { tracer.phase += tracer.speed * direction * dt; tracer.mesh.position.set(Math.cos(tracer.phase) * tracer.radius, tracer.y, Math.sin(tracer.phase) * tracer.radius); continue; } tracer.phase = (tracer.phase + tracer.speed * tracer.direction * direction * dt + 1) % 1; tracer.mesh.position.copy(tracer.curve.getPointAt(tracer.phase)); } } function disposeObject(object: THREE.Object3D) { object.traverse((node) => { const mesh = node as THREE.Mesh; if ("geometry" in mesh && mesh.geometry) mesh.geometry.dispose(); const material = (mesh as { material?: THREE.Material | THREE.Material[] }).material; if (Array.isArray(material)) material.forEach((item) => item.dispose()); else material?.dispose(); }); } function MagneticFieldsOnlyCanvas({ values, reducedMotion, onError }: { values: ParameterValues; reducedMotion?: boolean; onError?: () => void; }) { const hostRef = useRef(null); useEffect(() => { const host = hostRef.current; if (!host) return; let frame = 0; const scene = new THREE.Scene(); scene.background = new THREE.Color("#05060B"); const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 100); let renderer: THREE.WebGLRenderer; try { renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" }); } catch { onError?.(); return; } renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)); host.appendChild(renderer.domElement); const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.autoRotate = false; controls.target.set(0, 0, 0); scene.add(new THREE.AmbientLight("#F4F7FF", 0.5)); const light = new THREE.PointLight("#5BE3FF", 1.5); light.position.set(3, 4, 5); scene.add(light); scene.add(new THREE.GridHelper(6, 12, "#24304f", "#172033")); const fieldGroup = new THREE.Group(); scene.add(fieldGroup); const tracerGroup = new THREE.Group(); scene.add(tracerGroup); const source = sourceValue(values); const current = numberValue(values, "current", 6); const segments = Math.max(12, Math.round(numberValue(values, "segments", 36))); const azimuth = (numberValue(values, "azimuth", 32) * Math.PI) / 180; const cameraDistance = 5.8; camera.position.set(Math.sin(azimuth) * cameraDistance, 2.7, Math.cos(azimuth) * cameraDistance); camera.lookAt(0, 0, 0); controls.update(); if (source === "loop") { const wire = new THREE.Mesh( new THREE.TorusGeometry(1, 0.035, 16, 96), new THREE.MeshStandardMaterial({ color: "#FFC857", emissive: "#332000" }) ); wire.rotation.x = Math.PI / 2; fieldGroup.add(wire); } else { const wire = new THREE.Mesh( new THREE.CylinderGeometry(0.035, 0.035, 3.7, 24), new THREE.MeshStandardMaterial({ color: "#FFC857", emissive: "#332000" }) ); fieldGroup.add(wire); const axisMaterial = new THREE.LineBasicMaterial({ color: "#9B7BFF", transparent: true, opacity: 0.55 }); fieldGroup.add(new THREE.Line(new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0, -2.1, 0), new THREE.Vector3(0, 2.1, 0)]), axisMaterial)); } const loopCurves = source === "loop" ? addLoopFieldLines(fieldGroup) : []; if (source === "straight-wire") { for (const y of [-1.45, -0.72, 0, 0.72, 1.45]) { for (const radius of [0.45, 0.78, 1.15, 1.62, 2.08]) { addCircle(fieldGroup, radius, y, radius < 0.9 ? "#FFC857" : "#5BE3FF", radius < 0.9 ? 0.22 : 0.12); } } } const arrows = computeFieldArrows({ source, current, segments, samplePoints: arrowSamples(source) }); for (const arrow of arrows) addFieldArrow(fieldGroup, arrow.origin, arrow.direction, arrow.magnitude); const tracers = source === "straight-wire" ? addStraightWireTracers(tracerGroup, current) : addLoopTracers(tracerGroup, loopCurves, current); const resize = () => { const { width, height } = host.getBoundingClientRect(); const nextWidth = Math.max(320, Math.floor(width)); const nextHeight = Math.max(320, Math.floor(height)); camera.aspect = nextWidth / nextHeight; camera.updateProjectionMatrix(); renderer.setSize(nextWidth, nextHeight, false); }; const observer = new ResizeObserver(resize); observer.observe(host); resize(); let last = performance.now(); const animate = () => { const now = performance.now(); const dt = Math.min(0.05, (now - last) / 1000); last = now; updateTracers(tracers, current, dt, reducedMotion); controls.update(); renderer.render(scene, camera); frame = window.requestAnimationFrame(animate); }; animate(); return () => { window.cancelAnimationFrame(frame); observer.disconnect(); controls.dispose(); disposeObject(scene); renderer.dispose(); renderer.domElement.remove(); }; }, [onError, reducedMotion, values]); return

; } export default function MagneticFieldsCanvas({ manifest, values, reducedMotion, onError }: { manifest: SimulationManifest; values: ParameterValues; reducedMotion?: boolean; onError?: () => void; }) { if (manifest.behavior === "sound-wave-propagation") { return ; } return ; }

Magnetic Fields Around Currents

Magnetic Fields Around Currents