Breadcrumbs

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

 

 

 

Download

 

 

 

 

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/

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 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π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 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:

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=μ0I2π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 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.

About

[SIMU_DESC] 

Sample Learning Goals

[text]

 

 

For Teachers

[SIMU_TEACHER]

Software Requirements

[SIMU_SWREQ]

Translation

[text]

Research

[text]

Video

[text]

Credits

[SIMU_CREDITS]

Version:

[text]

Other Resources

[text]

 

end faq

{accordionfaq faqid=accordion3 faqclass="lightnessfaq defaulticon headerbackground headerborder contentbackground contentborder round5"}
1 1 1 1 1 1 1 1 1 1 Rating 0.00 (0 Votes)
Details
Parent Category: 05 Electricity and Magnetism
Category: 08 Electromagnetism
Hits: 747