Press R to reset fields or
Set dielectric enviorment
The electric field (E) is a field that exists at every point in space, representing how a charged particle would be pushed or pulled if placed there. Similarly, the magnetic field (B) exists everywhere and describes how moving charges would be affected at each point. Both fields are continuous throughout space, and they interact with each other to form the full electromagnetic field that governs how electric and magnetic effects propagate. Their values are determined by the presence of charged particles and their movements.
Visualizing electric and magnetic fields is challenging because, unlike waves in water or other physical phenomena we can directly see, these fields exist everywhere in space and are invisible to the naked eye. Their effects are only noticeable through the forces they exert on charges, which makes developing an intuition about how they behave around particles difficult. Understanding concepts like field lines, wave propagation, and interference requires abstract thinking and mathematical reasoning. This application helps make these invisible fields tangible by showing them in real time, allowing users to see how the electric and magnetic fields evolve, interact, and respond to sources and materials. Areas where both are strong are highlighted in yellow.
The behavior of E and B fields is described by Maxwell’s equations, which summarize how electric charges and currents produce electric and magnetic fields, and how these fields propagate through space. These equations explain the relationship between changing electric fields and magnetic fields, forming the foundation for understanding all electromagnetic phenomena.
This simulation models a two-dimensional slice of an electromagnetic field, calculating only the components Ex, Ey, and Bz. Users can control a charged particle, represented as a blue circle, by moving the mouse, which acts as a dynamic source of electric and magnetic fields. The visualization uses colors to show field strengths: red for electric field, green for magnetic field, and yellow for regions where both fields overlap.
What's being solved?
The simulation is iteravely solving in real time for $\mathbf{E}$ and $\mathbf{B}$ taking into account the values of $\rho$ and $\mathbf{J}$ determined by the position and velocity of the blue charge controlled by the mouse pointer: $$\nabla \cdot \mathbf{\color{red}{E}} = \frac{\color{cyan}{\rho}}{\varepsilon}$$ $$\nabla \cdot \mathbf{\color{green}{B}} = 0$$ $$\nabla \times \mathbf{\color{red}{E}} = -\frac{\partial \mathbf{\color{green}{B}}}{\partial t}$$ $$\nabla \times \mathbf{\color{green}{B}} = \mu_0 \mathbf{\color{cyan}{J}} + \mu_0 \varepsilon \frac{\partial \mathbf{\color{red}{E}}}{\partial t}$$
The value of $\mu_0$ is fixed and the value of $\varepsilon$ is dependent on the dielectric configuration.What is ACTUALLY being solved?
In this simulation, only a finite number of points of the fields are being simulated.
Only $E_x$, $E_y$
and $H_z$ are taken into account, and are discretized in the
following way:
This allows the curl $\left(\nabla \times \right)$ calculations to be most accurate where they are needed. This is called a Yee latice and the method is called Finite-difference time-domain method (FDTD).
A complete tutorial on the method can be referenced in the excelent open licensed book by John B. Schneider Understanding the Finite-Difference Time-Domain Method
How does it work?
To be able to update the grid several times per second, some access to parallel computing is needed, especially if the only tool available is Javascript. To overcome this I used the GPU.JS library.
Wait, why can I make the particle move faster than the speed of light?
Technically, yes, it's travelling faster than the speed of light *in the arbitrary medium it's being simulated*. The simulation is being carried out with normalized values for $\mu$ and $\varepsilon$, one may consider the actual values of these parameters very large, giving a very small value for $v = 1/\sqrt{\varepsilon \mu}$