Embed this model in a webpage:

<iframe width="100%" height="750" src="'.$fields["SIMU_EMBED"].'" frameborder="0"></iframe>

Building a Magnetic Field Simulation with Gemini 2.5 Pro

In this post, I’ll walk you through how I built an interactive Magnetic Field Explorersimulation using Gemini 2.5 Pro, capable of visualizing the right-hand ruleand the magnetic field around a current-carrying conductor.

3DwireBField_20250520.zip 3DwireBField_20250520/

🎯 Learning Objectives

• Visualize magnetic field lines around a straight conductor.

• Understand how current direction affects the magnetic field.

• Apply the right-hand rule interactively.

💡 Step 1: Describe the Simulation Goal to Gemini 2.5 Pro

I started by prompting Gemini 2.5 Pro with:

✨ Gemini Generated:

• An HTML canvas layout.

• JavaScript logic for drawing circular field lines.

• Code to reverse direction based on current sign.

• UI components (slider, checkbox, buttons) and live calculation display.

🔧 Step 2: Customize Output for SLS Integration

I modified Gemini’s generated code for use in Singapore Student Learning Space (SLS):

• Added sliders for current (I).

• Included togglefor showing/hiding field lines.

• Used ctx.arc()in canvas to simulate circular field lines.

• Used simple if (current > 0)logic to display upward/downward direction.

• Integrated dynamic textto display calculated B=μ0I2πrB=2πrμ0​I​.

🖼️ Step 3: Add Right-Hand Rule Visuals

Gemini provided SVG/Canvas renderable assets of a hand with thumb (I) and curled fingers (B). I inserted:

• Thumb upwhen current is positive (forward).

• Thumb downwhen current is negative (backward).

• CSS-based image switching or SVG transformation.

🔄 Step 4: Test Field Line Behavior

To simulate magnetic field lines:

📐 Bonus: Add Calculations for Field Strength

Using the Biot–Savart Law simplified version:

B=μ0I2πrB=2πrμ0​I​

Displayed using:

🔁 Features You Can Add

• 3D toggle view.

• Multiple conductors (parallel wires).

• Color-coded field strengths.

• Integration with assessment tools (e.g. quiz prompt: "What happens when current reverses?").

🧪 Try It Out or Build It Yourself

If you're looking to introduce electromagnetic concepts interactively in Physics lessons, Gemini 2.5 Prohelps generate a solid starting point. Just describe what you want clearly, and refine from there.

This simulation has been tested in SLS and can be embedded directly using HTML5 upload with full compatibility across student devices.