// ====== ELECTROMAGNETISM EXPERIMENTS ====== // ---------- 1. Magnetic Field & Field Lines ---------- function MagneticFieldExp({ category, name, catColor }) { const [magnetType, setMagnetType] = useState('bar'); // bar, horseshoe, twobar const [showIronFilings, setShowIronFilings] = useState(true); const [showCompass, setShowCompass] = useState(true); const canvasW = 650, canvasH = 420; const cx = canvasW / 2, cy = canvasH / 2; // Generate field line points for different magnet configurations const fieldLines = useMemo(() => { const lines = []; const poles = []; if (magnetType === 'bar') { poles.push({ x: cx - 100, y: cy, type: 'N' }); poles.push({ x: cx + 100, y: cy, type: 'S' }); } else if (magnetType === 'horseshoe') { poles.push({ x: cx - 80, y: cy - 60, type: 'N' }); poles.push({ x: cx + 80, y: cy - 60, type: 'S' }); } else { // two bars - same poles facing poles.push({ x: cx - 120, y: cy, type: 'N' }); poles.push({ x: cx - 40, y: cy, type: 'N' }); poles.push({ x: cx + 40, y: cy, type: 'S' }); poles.push({ x: cx + 120, y: cy, type: 'S' }); } // Trace field lines from N poles const nPoles = poles.filter(p => p.type === 'N'); const numLines = 16; for (const np of nPoles) { for (let i = 0; i < numLines; i++) { const angle = (i / numLines) * Math.PI * 2; const points = []; let x = np.x + Math.cos(angle) * 15; let y = np.y + Math.sin(angle) * 15; for (let step = 0; step < 800; step++) { points.push({ x, y }); // compute field direction let bx = 0, by = 0; for (const p of poles) { const dx = x - p.x; const dy = y - p.y; const r = Math.sqrt(dx*dx + dy*dy); if (r < 10) break; const sign = p.type === 'N' ? 1 : -1; bx += sign * dx / (r*r*r) * 10000; by += sign * dy / (r*r*r) * 10000; } const b = Math.sqrt(bx*bx + by*by); if (b < 0.01) break; const stepLen = 2; x += bx / b * stepLen; y += by / b * stepLen; if (x < 20 || x > canvasW - 20 || y < 20 || y > canvasH - 20) break; // stop if near S pole let nearS = false; for (const p of poles) { if (p.type === 'S') { const d = Math.sqrt((x-p.x)**2 + (y-p.y)**2); if (d < 15) { nearS = true; break; } } } if (nearS) break; } if (points.length > 5) { lines.push(points); } } } return { lines, poles }; }, [magnetType, cx, cy]); // Iron filings positions (fixed seed) const ironFilings = useMemo(() => { const filings = []; const nPoles = fieldLines.poles; for (let i = 0; i < 200; i++) { const x = 30 + (i * 97 % (canvasW - 60)); const y = 30 + ((i * 53) % (canvasH - 60)); // compute field angle at this point let bx = 0, by = 0; for (const p of nPoles) { const dx = x - p.x; const dy = y - p.y; const r = Math.sqrt(dx*dx + dy*dy); if (r < 20) continue; const sign = p.type === 'N' ? 1 : -1; bx += sign * dx / (r*r*r) * 10000; by += sign * dy / (r*r*r) * 10000; } const b = Math.sqrt(bx*bx + by*by); if (b < 0.001) continue; const len = Math.min(8, 2 + b * 0.005); filings.push({ x1: x - bx/b * len/2, y1: y - by/b * len/2, x2: x + bx/b * len/2, y2: y + by/b * len/2, len, }); } return filings; }, [fieldLines]); // compass needles at various positions const compasses = useMemo(() => { const arr = []; const positions = [ { x: cx - 180, y: cy }, { x: cx - 100, y: cy - 80 }, { x: cx + 100, y: cy - 80 }, { x: cx + 180, y: cy }, { x: cx + 100, y: cy + 80 }, { x: cx - 100, y: cy + 80 }, { x: cx, y: cy - 120 }, { x: cx, y: cy + 120 }, ]; const nPoles = fieldLines.poles; for (const pos of positions) { let bx = 0, by = 0; for (const p of nPoles) { const dx = pos.x - p.x; const dy = pos.y - p.y; const r = Math.sqrt(dx*dx + dy*dy); if (r < 10) continue; const sign = p.type === 'N' ? 1 : -1; bx += sign * dx / (r*r*r) * 10000; by += sign * dy / (r*r*r) * 10000; } const angle = Math.atan2(by, bx) * 180 / Math.PI; arr.push({ x: pos.x, y: pos.y, angle }); } return arr; }, [fieldLines, cx, cy]); const panelTabs = [ { id: 'controls', label: '操作' }, { id: 'data', label: '观察' }, { id: 'principle', label: '原理' }, ]; const panelContent = (tab) => { if (tab === 'controls') return ( <>
磁体类型
显示
); if (tab === 'data') return ( <>

观察要点

1. 磁感线从 N极 出发，回到 S极

2. 磁感线是闭合的曲线

3. 磁极附近磁感线最密，磁场最强

4. 小磁针静止时N极指向与磁场方向一致

5. 异名磁极相吸，同名磁极相斥

); if (tab === 'principle') return (

磁性：能吸引铁、钴、镍等物质的性质。

磁极：磁体上磁性最强的部分，任何磁体都有N极和S极。

相互作用：同名磁极相互排斥，异名磁极相互吸引。

磁场：磁体周围存在的一种特殊物质。

• 基本性质：对放入其中的磁体有力的作用

• 方向：小磁针静止时N极所指的方向

磁感线：描述磁场的假想曲线。

• 从N极出发，回到S极

• 曲线越密表示磁场越强

• 磁感线不相交

 ); }; return (
{/* iron filings */} {showIronFilings && ( {ironFilings.map((f, i) => ( ))} )} {/* field lines */} {showCompass && fieldLines.lines.map((line, i) => ( `${p.x},${p.y}`).join(' ')} fill="none" stroke={catColor} strokeWidth="0.8" opacity="0.4" /> ))} {/* magnets */} {magnetType === 'bar' && ( {/* N pole (red) */} N {/* S pole (blue) */} S )} {magnetType === 'horseshoe' && ( {/* U-shaped magnet */} {/* N pole tip */} N {/* S pole tip */} S )} {magnetType === 'twobar' && ( {/* left: NS bar */} N S {/* right: NS bar */} N S S ←→ N 异名磁极相吸 )} {/* compasses */} {showCompass && compasses.map((c, i) => ( S ))} 磁感线分布
); } // ---------- 2. Oersted Experiment ---------- function OerstedExp({ category, name, catColor }) { const [current, setCurrent] = useState(0); // A const [currentDir, setCurrentDir] = useState(1); // 1 right, -1 left const [isOn, setIsOn] = useState(false); const canvasW = 600, canvasH = 400; const cx = canvasW / 2, cy = canvasH / 2; // Compass deflection angle: proportional to current, direction depends on current direction // Right-hand rule: thumb in current direction, fingers curl in B direction // Below wire: if current right (+x), B field is into page (-z) → wait, let's think top view // Actually compass below wire: current right → field circles counterclockwise → below wire field points left // Right-hand rule: thumb along current, fingers curl in B direction // Below the wire, B points to the LEFT when current flows RIGHT (clockwise current from above view = counterclockwise deflection from observer front view) // Here we use: current right → B below wire points left → compass N pole turns left (counterclockwise / negative) const deflectionAngle = isOn ? -current * currentDir * 8 : 0; const panelTabs = [ { id: 'controls', label: '操作' }, { id: 'data', label: '数据/规律' }, { id: 'principle', label: '原理' }, ]; const panelContent = (tab) => { if (tab === 'controls') return ( <>
电流控制
); if (tab === 'data') return ( <>
0.1 ? 'N极向右偏（顺时针）' : '无偏转'} />
${current} A，偏转 ${Math.abs(deflectionAngle).toFixed(1)}°` : `通电前，磁针指向南北方向`, `安培定则（右手螺旋定则）：右手握住导线，大拇指指向电流方向，四指环绕方向为磁场方向`, ]} /> ); if (tab === 'principle') return (

发现者：丹麦物理学家奥斯特，1820年。

现象：通电导线下方的小磁针发生偏转。

结论：

1. 通电导线周围存在磁场（电流的磁效应）

2. 磁场方向与电流方向有关

意义：第一个揭示了电与磁之间的联系。

安培定则（右手螺旋定则）：

右手握住直导线，让大拇指指向电流方向，弯曲的四指所指的方向就是磁感线的环绕方向。

 ); }; return (
{/* wire */} 导线 {/* current flow animation */} {isOn && ( {[0, 0.25, 0.5, 0.75].map((phase, i) => ( ))} )} {/* current direction arrow */} {isOn && ( {currentDir === 1 ? '→ 电流方向 →' : '← 电流方向 ←'} )} {/* magnetic field circles around wire (cross-section view hint) */} {isOn && ( {[15, 25, 35].map(r => ( ))} 磁场 )} {/* compass below wire */} {/* N needle */} {/* S needle */} N S {/* E W S N markers */} W E {/* battery */} + 奥斯特实验 — 电流的磁效应 {isOn ? `磁针偏转 ${Math.abs(deflectionAngle).toFixed(1)}°` : '闭合开关，观察小磁针变化'}
); } // ---------- 3. Electromagnet ---------- function ElectromagnetExp({ category, name, catColor }) { const [current, setCurrent] = useState(1); // A const [turns, setTurns] = useState(100); // number of turns const [hasCore, setHasCore] = useState(true); const [isOn, setIsOn] = useState(false); const [currentDir, setCurrentDir] = useState(1); // 1 = current enters left (left→right through coil), -1 = enters right // Magnetic strength ~ N * I * core_factor const coreFactor = hasCore ? 5 : 1; const strength = isOn ? turns * current * coreFactor / 100 : 0; // normalized const pinsAttracted = Math.floor(strength * 8); // number of pins attracted const canvasW = 640, canvasH = 420; const cx = canvasW / 2, cy = 180; const panelTabs = [ { id: 'controls', label: '操作' }, { id: 'data', label: '数据/规律' }, { id: 'principle', label: '原理' }, ]; const panelContent = (tab) => { if (tab === 'controls') return ( <>
参数调节
铁芯
电流方向
); if (tab === 'data') return ( <>
${current} A，方向：${currentDir === 1 ? '左进右出' : '右进左出'}`, `匝数 N = ${turns} 匝`, hasCore ? `有铁芯：磁性大大增强` : `无铁芯：磁性较弱`, `磁极：左端 ${currentDir === 1 ? 'S极' : 'N极'}，右端 ${currentDir === 1 ? 'N极' : 'S极'}`, `磁性强弱指标：${strength.toFixed(2)}（相对值）`, `影响因素：电流越大、匝数越多、有铁芯 → 磁性越强`, `安培定则：右手握住螺线管，四指弯向电流方向，大拇指指向N极`, ]} /> ); if (tab === 'principle') return (

构造：通电螺线管 + 铁芯。

原理：电流的磁效应，铁芯被磁化使磁性大大增强。

影响磁性强弱的因素：

1. 电流大小：电流越大，磁性越强

2. 线圈匝数：匝数越多，磁性越强

3. 有无铁芯：有铁芯磁性强得多

特点：

• 磁性有无可以由通断电控制

• 磁性强弱可以由电流大小/匝数控制

• 磁极可以由电流方向控制

安培定则（右手螺旋定则）：

右手握住螺线管，让四指弯向电流的方向，大拇指所指的那端就是螺线管的N极。

应用：电磁起重机、电铃、电磁继电器、磁悬浮列车等。

 ); }; return (
{/* solenoid coil */} {/* core (iron) */} {hasCore && ( )} {/* coil wires */} {Array.from({length: Math.min(40, Math.floor(turns/5))}, (_, i) => { const x = -95 + i * (190 / (Math.min(40, Math.floor(turns/5)) - 1)); return ( ); })} {/* N and S poles - determined by right-hand rule (安培定则) */} {/* Winding: front side goes from upper-left to lower-right (正绕) */} {/* currentDir=1 (left in, right out): right end = N, left end = S */} {/* currentDir=-1 (right in, left out): left end = N, right end = S */} {isOn && ( <> {currentDir === 1 ? 'S' : 'N'} {currentDir === 1 ? 'N' : 'S'} {/* field lines: emerge from N pole */} {[0, 1, 2].map(i => ( {currentDir === 1 ? ( ) : ( )} ))} )} {/* wires to battery */} {/* battery */} + 电源 {/* switch */} {isOn ? ( ) : ( )} S {/* ammeter */} A {current}A {/* pins / iron filings attracted */} {isOn && Array.from({length: pinsAttracted}, (_, i) => { const angle = (i / pinsAttracted) * Math.PI - Math.PI/2; const r = 40 + (i % 3) * 10; const x = Math.cos(angle) * r + (i * 7 % 30 - 15); const y = Math.abs(Math.sin(angle)) * 30 + (i % 5) * 6; return ( ); })} {!isOn && ( <> {Array.from({length: 12}, (_, i) => ( ))} )} 大头针（吸引 {pinsAttracted} 枚） 电磁铁 — 影响磁性强弱的因素
); } // ---------- 4. Motor Principle ---------- function MotorExp({ category, name, catColor }) { const [current, setCurrent] = useState(1); const [currentDir, setCurrentDir] = useState(1); const [magStrength, setMagStrength] = useState(1); const [magDir, setMagDir] = useState(1); // 1 = left→right N→S (field right), -1 = right→left (field left) const [isOn, setIsOn] = useState(false); const [angle, setAngle] = useState(0); const rafRef = useRef(); // Motor rotation speed: F = BIL, direction depends on both I and B // Reversing either reverses rotation; reversing both leaves it unchanged const speed = isOn ? current * magStrength * currentDir * magDir * 60 : 0; // deg/sec useEffect(() => { if (!isOn) return; let last = performance.now(); const tick = (now) => { const dt = (now - last) / 1000; last = now; setAngle(a => a + speed * dt); rafRef.current = requestAnimationFrame(tick); }; rafRef.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(rafRef.current); }, [isOn, speed]); const canvasW = 620, canvasH = 420; const cx = canvasW / 2, cy = canvasH / 2; const panelTabs = [ { id: 'controls', label: '操作' }, { id: 'data', label: '数据/规律' }, { id: 'principle', label: '原理' }, ]; const panelContent = (tab) => { if (tab === 'controls') return ( <>
参数调节
电流方向
磁场方向
); if (tab === 'data') return ( <>
0 ? '顺时针' : speed < 0 ? '逆时针' : '静止'} />
${current} A，B = ${magStrength}×` : `通电后导体受力运动`, `电流方向改变 → 受力方向改变 → 转动方向改变`, `磁场方向改变 → 受力方向改变 → 转动方向改变`, `同时改变电流和磁场方向 → 受力方向不变`, `这是电动机的原理`, ]} /> ); if (tab === 'principle') return (

现象：通电导体在磁场中受到力的作用。

力的方向：与电流方向和磁场方向都有关。

• 只改变电流方向 → 受力方向改变

• 只改变磁场方向 → 受力方向改变

• 同时改变两者 → 受力方向不变

左手定则：

伸开左手，使拇指与四指垂直，让磁感线穿入手心，四指指向电流方向，拇指所指就是受力方向。

电动机：

• 原理：通电线圈在磁场中受力转动

• 能量转化：电能 → 机械能

• 换向器：自动改变线圈中电流方向，使线圈持续转动

 ); }; return (
{/* N pole magnet (left when magDir=1, right when magDir=-1) */} {magDir === 1 ? 'N' : 'S'} {/* S pole magnet (right when magDir=1, left when magDir=-1) */} {magDir === 1 ? 'S' : 'N'} {/* field lines */} {isOn && Array.from({length: 9}, (_, i) => ( ))} {/* armature (rotating coil) */} {/* coil */} {/* commutator */} {/* axle */} {/* current direction indicators */} {isOn && ( <> {/* left side: current direction */} {currentDir === 1 ? '⊙' : '⊗'} {/* right side */} {currentDir === 1 ? '⊗' : '⊙'} )} {/* force arrows */} {isOn && ( <> {/* left side force */} {/* right side force */} )} {/* rotation direction indicator */} {isOn && ( {speed > 0 ? '↻ 顺时针转动' : '↺ 逆时针转动'} )} {/* brushes */} 电刷 电动机原理 — 通电线圈在磁场中受力转动
); } // ---------- 5. Electromagnetic Induction ---------- function InductionExp({ category, name, catColor }) { const [magSpeed, setMagSpeed] = useState(1); const [magDirection, setMagDirection] = useState(1); // 1 into coil, -1 out const [isMoving, setIsMoving] = useState(false); const [coilTurns, setCoilTurns] = useState(100); const [magStrength, setMagStrength] = useState(1); const [time, setTime] = useState(0); const rafRef = useRef(); // Induced current: ε = N * ΔΦ/Δt (Faraday's law) // Simplified: I_induced ∝ N * v * B const inducedCurrent = isMoving ? coilTurns / 100 * magSpeed * magStrength * magDirection * 0.5 : 0; const [magPos, setMagPos] = useState(-100); // x position of magnet useEffect(() => { if (!isMoving) return; let last = performance.now(); const tick = (now) => { const dt = (now - last) / 1000; last = now; setTime(t => t + dt); setMagPos(p => { const newP = p + magSpeed * magDirection * 50 * dt; // bounce at edges if (newP > 60) { setMagDirection(-1); return 60; } if (newP < -100) { setMagDirection(1); return -100; } return newP; }); rafRef.current = requestAnimationFrame(tick); }; rafRef.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(rafRef.current); }, [isMoving, magSpeed, magDirection]); const canvasW = 620, canvasH = 420; const cx = canvasW / 2, cy = canvasH / 2; const panelTabs = [ { id: 'controls', label: '操作' }, { id: 'data', label: '数据/规律' }, { id: 'principle', label: '原理' }, ]; const panelContent = (tab) => { if (tab === 'controls') return ( <>
参数调节
操作
); if (tab === 'data') return ( <>
0 ? '正向' : inducedCurrent < 0 ? '反向' : '无'} /> 0 ? '右偏' : inducedCurrent < 0 ? '左偏' : '指零'} />
${Math.abs(inducedCurrent).toFixed(2)} mA` : `磁体不动，磁通量不变 → 无感应电流`, `这是发电机的原理`, ]} /> ); if (tab === 'principle') return (

发现者：英国物理学家法拉第，1831年。

电磁感应：闭合电路的一部分导体在磁场中做切割磁感线运动时，导体中产生电流的现象。

感应电流：电磁感应产生的电流。

产生条件：

1. 闭合电路

2. 一部分导体做切割磁感线运动

影响感应电流方向的因素：

• 磁场方向

• 导体运动方向

发电机：

• 原理：电磁感应现象

• 能量转化：机械能 → 电能

• 交流电：大小和方向周期性变化

 ); }; // Galvanometer needle const galvoAngle = -60 + Math.min(120, Math.abs(inducedCurrent) * 30) * Math.sign(inducedCurrent); return (
{/* coil */} {/* coil windings (side view) */} {Array.from({length: 8}, (_, i) => ( ))} 线圈 {coilTurns} 匝 {/* magnet (moving left-right) */} {/* N pole facing coil */} N S {/* velocity arrow */} {isMoving && ( {magDirection === 1 ? '→ 插入' : '← 拔出'} )} {/* wires connecting coil to galvanometer */} {/* galvanometer (sensitive ammeter) */} {/* scale */} {[-60, -40, -20, 0, 20, 40, 60].map(a => { const rad = a * Math.PI / 180 - Math.PI/2; return ( ); })} G − + {/* needle */} 灵敏电流计 电磁感应 — 发电机原理 {isMoving ? `感应电流 ${Math.abs(inducedCurrent).toFixed(2)} mA（${inducedCurrent >= 0 ? '正向' : '反向'}）` : '磁体运动时切割磁感线，产生感应电流'}
); } Object.assign(window, { MagneticFieldExp, OerstedExp, ElectromagnetExp, MotorExp, InductionExp, });