Building a Magnetic Field around a wire Simulation with Gemini 2.5 Pro

 

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 Explorer simulation using Gemini 2.5 Pro, capable of visualizing the right-hand rule and the magnetic field around a current-carrying conductor.

3DwireBField_20250520.zip
3DwireBField_20250520/

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:

pgsql
Create an HTML5 + JavaScript simulation that shows a vertical conductor carrying current, with circular magnetic field lines around it. Add a slider to control current (positive and negative), and use arrows to show direction. Also, show the right-hand rule diagram dynamically based on current direction.

✨ 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 toggle for 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 text to display calculated $B = \frac{\mu_0 I}{2\pi r}$.

---

🖼️ 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 up when current is positive (forward).

• Thumb down when current is negative (backward).

• CSS-based image switching or SVG transformation.

---

🔄 Step 4: Test Field Line Behavior

To simulate magnetic field lines:

javascript
for (let r = 30; r <= 120; r += 20) {
  ctx.beginPath();
  ctx.arc(centerX, centerY, r, 0, 2 * Math.PI);
  ctx.strokeStyle = "green";
  ctx.stroke();

  // Add arrows for direction
  let angle = Math.PI / 4;
  let x = centerX + r * Math.cos(angle);
  let y = centerY + r * Math.sin(angle);
  drawArrow(x, y, direction);
}

---

📐 Bonus: Add Calculations for Field Strength

Using the Biot–Savart Law simplified version:

$$B = \frac{\mu_0 I}{2 \pi r}$$

Displayed using:

javascript
let mu0 = 4 * Math.PI * 1e-7;
let B = (mu0 * current) / (2 * Math.PI * radius);
document.getElementById("BValue").innerText = B.toFixed(2) + " T";

---

🔁 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 Pro helps 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.