Every student of physics has had that “aha!” moment. It’s the instant you realize that the formula for the gravity of a planet looks suspiciously like the one for the electric field of a particle. You sense a deeper pattern, a hidden unity in the laws of nature. This project began with a simple goal: to turn that flash of intuition into an interactive, visual tool. What started as a plan for a simple calculator evolved, through a challenging but rewarding iterative process with an AI development partner, into a comprehensive workbench for exploring the analogies between fields.
This is the story of how the Physics Fields Analogy Solver was built.
Simulation Overview:
This tool isn’t just a calculator; it’s a comparative analysis engine. At its core is a three-column layout that places Gravitational, Electric, and Magnetic fields side-by-side. By selecting a concept or a common exam problem from the dropdown menu, you can instantly see the analogous formulas, problem statements, and solution methods for all three fields. This design makes the structural similarities in the physics—and the crucial differences—immediately obvious. It’s a tool for building deep, intuitive understanding beyond simple plug-and-chug problem-solving.
Here’s what the frontpage of the app looks like:
How It Was Built:
This project is a testament to the power of “vibe coding”—a collaborative, iterative dialogue between a human director and an AI coding assistant. The journey was far from linear.
Prompt Used: The initial prompt that kicked off the project was conceptual and open-ended:”Create a single-page web application using HTML, CSS, and JavaScript to compare physical fields. The app should have three columns for Gravity, Electricity, and Magnetism. Start by creating an interactive calculator for the ‘Field from a Point Source’ concept, allowing users to input parameters and see the result.”
Construction Methods: The development was a series of massive refactors and expansions, each driven by a simple question: “What if it could do more?”
- Initial Concept: The first version was a basic calculator for a handful of fundamental formulas.
2. The “Solve For” Refactor: The first major leap was realizing that a true learning tool shouldn’t just solve for the final answer. It needed to solve for any variable in the equation. This required a complete re-architecture of the JavaScript logic, moving from a one-way calculation to a dynamic, multi-directional solver system.
3. The “Problem Scenario” Expansion: The tool truly found its purpose when we decided to add 25 common exam-style problems. This was the most significant content expansion, requiring dozens of new solution methods and solvers to be written and integrated.
4. The Bug Hunt: This process was filled with failures that became learning opportunities. We battled broken LaTeX rendering (a classic text-escaping issue in JavaScript), incomplete dropdown lists, and unresponsive buttons. Each bug report led to a more specific prompt and a more robust final product. The struggle was a feature, not a bug, of the development process.
Software & Tools:
- AI Model: Gemini
- Core Code: HTML, CSS, and modern JavaScript (ES6)
- Formula Rendering: MathJax library (for displaying LaTeX)
Logic & Frameworks:
- Underlying Logic: The tool is built on the foundational equations of classical physics: Newton’s Law of Gravitation, Coulomb’s Law, the Lorentz Force Law, and the integral forms of Maxwell’s Equations (Gauss’s Law, Faraday’s Law, Ampere’s Law). The application’s architecture is data-driven. A single, massive JavaScript object (
CONTENT_DATA) holds all the information for every concept and problem—the LaTeX formulas, the parameter lists, the units, the default values, the explanatory text, and, most importantly, the algebraicsolverfunctions for every variable. This design makes the entire UI dynamic and easily expandable. - Prompting Frameworks: The development highlighted a clear contrast in AI prompting strategies:
- Broad, Generative Prompts: Initial prompts like “add more analogies” or “implement all 25 scenarios” were great for generating the initial code structure and a large volume of content. However, this approach often resulted in the incomplete or buggy code we experienced.
- Specific, Corrective Prompts: The real progress came from detailed, corrective prompts. For example: “The dropdown menu only shows 10 of the 25 scenarios. The
populateDropdownfunction is not filtering correctly based on the toggle switch. Please rewrite it to only show the ‘scenario’ type when the toggle is active.” This human-driven feedback loop, where the AI generates and the human directs and debugs, was the key to completing the project.
How to Use the Simulation:
- User Guide:
- Use the toggle switch at the top to select your view: “Fundamental Concepts” for core formulas or “Problem Scenarios” for exam-style problems.
- Select a specific topic from the dropdown menu. The three columns will instantly update.
- Within any field’s calculator, choose the variable you want to “Solve For” by clicking its radio button.
- The selected variable’s input box will become the output. Enter your known values into the other active input boxes.
- The answer is calculated and displayed in real-time.
- Tips & Tricks:
- Pay close attention to the cards marked “Not Applicable.” They are designed to teach you where the analogies break down, which is often as important as where they hold up.
- The default values that load with each problem are a great starting point. Try changing one parameter (like doubling a distance) to see how it affects the result.
- Use the “Method to Solve” section in the problem scenarios to guide your own pen-and-paper solutions before checking the answer with the calculator.
What Makes It Unique:
- Comparison with Other Simulations: Most physics calculators solve a single problem in isolation. This tool’s entire purpose is comparative analysis. The three-column layout constantly encourages you to ask, “How is this similar to, and different from, the other fields?” It’s designed to build a networked understanding of physics, not just a list of disconnected formulas.
- Educational Value: The tool is explicitly designed to address common student pitfalls and misconceptions by:
- Highlighting Differences in Laws: It makes it visually obvious that the magnetic field from a wire (1/r) behaves differently than the electric field from a charge (1/r2).
- Emphasizing Breakdowns: It clearly explains why a simple gravitational dipole doesn’t exist or why the magnetic force does no work, preventing students from over-extending an analogy.
- Clarifying Vector Nature: The “Force on a Moving Particle” scenario makes the unique, velocity-dependent, and perpendicular nature of the magnetic force unforgettable when compared to the simpler static forces.
Whether you’re a student preparing for an exam, an educator looking for a new teaching aid, or a curious explorer of the laws of nature, this page is your gateway to hands-on, AI-enhanced learning. Dive in, experiment, and see how the elegant patterns of physics reveal themselves across different domains of the universe!
