An interactive web-based simulator of electromagnetic waves. Simulation done using the finite-difference time-domain method.
Found any bugs, have suggestions or anything else? Open an issue or contact me.
Technology used among others: React, TypeScript, regl.
To launch this web-app yourself, first install Node if you haven't. Next clone or download this repository, type npm install and then npm start.
The project was created using Create React App so all its commands are also available.
- src/App.tsx Main react app used to display the website
- src/em/simulator.ts Simulator that calls the WebGL kernels for ... simulation
- src/em/kernels/simulation.ts WebGL kernels used for simulation
- src/em/rendering.ts Renders the simulation to a canvas
- src/em/kernels/rendering.ts WebGL kernels used for rendering
The electromagnetic field is described by Maxwell's equations. In their most common form they state that there exists an electric and a magnetic field. The equations describe how those two fields evolve over time and affect each other. Their macroscopic version also takes into account materials which are specified by their relative permittivity and relative permeability.
Maxwell's equations exist in the continuous form as integral or differential equations and we will use their differential form.
For simulation we have to discretize. We start with the equations in differential form and replace differentiation by finite differences,
for example d/dt X(t) becomes (X_t+1 - X_t) / dt. We can then solve such an equation for X_t+1 to obtain an update equation which we can use to update our fields.
We also have to discretize space itself which we do by specifying a discrete grid. At each grid cell location we store the values of
the two fields and the material parameters. This type of simulation is called a finite-difference time-domain (FDTD) method.
As we only display two dimensions in this simulation we can further simplify these equations by taking all spatial derivatives in the Z direction to be zero.
This will get rid of some terms when calculating the curl.
With this information we can derive all the equations we need for simulation. We can use a Yee grid to automatically satisfy Gauss's law and Gauss's law for magnetism
(see here (pdf warning)).
Here we make the magnetic field grid exist at a 0.5 * cell size offset from the electric field grid.
Now we can discretize the Fadaray's and Ampère's law to obtain the update equations for the magnetic and electric fields respectively.
Below we derive the update equations for Faraday's law which will give us the magnetic field given the electric field and the previous magnetic field.
Notation
X: position 3-vector
x, y, z: individual position coordinates
\hat{X/Y/Z}: unit 3-vector in X/Y/Z direction
t: time
E: electric field
B: magnetic field
C_x/y/z: Spatial grid cell size
𝜏: Time step size
1. Faraday's law
2. Write out curl and individual vector components
3. Set Z-derivatives (d/dz) to zero
4. Discretize curl and time-derivative
5. Solve for B_t+1(X)
We can do exactly the same procedure for Ampère's law which yields the update equations for the electric field given the magnetic field and the previous electric field.
A great lecture series on YouTube about this and more was created by CEM Lectures and can be found here.
Finally in this simulation we also take into account conductivity (ie. loss). The modification to the equations for this can be found here (pdf warning) at the beginning of chapter 5 (page 53 equations 5.1a and 5.1b).
The code for all of this is implemented in WebGL shaders for quick parallel computation and can be found here.
- Icons8 for icons