Lorentz Transformation of the Electric and Magnetic Fields, Visualized

(The reader is assumed to have some familiarity with vectors, including the dot product and the cross product.)

An event is a point in spacetime—a particular location in space at a particular moment in time. At every event there's an electric-field vector \( \vec E \) and a magnetic-field vector \( \vec B \). Like many quantities in physics, their values depend on your frame of reference. If you and your friend are moving relative to one another, you'll measure different values for the \( \vec E \) and \( \vec B \) vectors at a given event.

The purpose of this app is to demonstrate how the values of \( \vec E \) and \( \vec B \) depend on your frame of reference. You tell the app what the values of \( \vec E \) and \( \vec B \) are at some event as measured in some inertial frame of reference (the "unprimed" frame), and it will show you their values as measured in another inertial frame of reference (the "primed" frame). The "boost velocity" \( \vec v \), which you can also set, is the velocity of the primed frame relative to the unprimed frame.

Note that we're working in units where the speed of light \( c \) is set to \( 1 \). That might seem strange if you've never seen it before, but remember that \( c \) is the cosmic speed limit, which means that all speeds can be expressed as fractions of \( c \). Setting \( c = 1 \) therefore lets us express every speed as a fraction of \( 1 \)—i.e., as a unitless number between \( 0 \) and \( 1 \). It also lets us omit \( c \) from all of our equations! Oh, and we're using the same unit for \( \vec E \) that we're using for \( \vec B \).

Now, the reason we care about the \( \vec E \) and \( \vec B \) vectors is that they affect the motion of charged particles. Specifically: if there's a particle with charge \( q \) at an event, then the electric- and magnetic-field vectors at that event exert a force on the particle—called the Lorentz force—whose value is \( \vec F = q( \vec E + \vec u \times \vec B ) \), where \( \vec u \) is the particle's velocity (as measured in the reference frame in question). As a result, the particle undergoes an acceleration. You probably learned that the relationship between acceleration and force is simply \( \vec a = \vec F / m \), where \( m \) is the particle's (constant) mass. Einstein showed that that isn't quite right. The relationship is actually \( \vec{a} = \frac{ \vec{F} - ( \vec{F} \cdot \vec{u} ) \vec{u} }{ \gamma m } \), with \( \gamma = \frac{ 1 }{ \sqrt{ 1 - u^2 } } \)(where \( u \) is the magnitude of \( \vec u \)). By the way, a particle's charge and mass are quantities whose values don't depend on your frame of reference. The values of velocity, acceleration, and force do.

I brought up the particle because this app also lets you visualize the velocity, force, and acceleration of a particle at the same event as the displayed electric- and magnetic-field vectors (see the Options below the visualization). You can specify the particle's charge, mass, and ("unprimed") velocity, and you'll see the Lorentz force that the field-vectors exert on the particle, as well as the particle's resulting acceleration. You'll see all of these quantities in both frames by default, but if you'd rather study the particle's dynamics in a single frame then you can optionally hide the "primed" vectors.

Another available option lets you see the Poynting vector in both frames. The Poynting vector represents the flow of energy within the electric and magnetic fields. It's given by the cross product \( \vec S = \vec E \times \vec B \).

This visualization demonstrates how the electric- and magnetic-field vectors at an event (a point in spacetime) transform under a Lorentz boost.

Use the inputs below the visualization (or the corresponding hotkeys) to set the Cartesian components of the electric- and magnetic-field vectors in the original "unprimed" inertial frame, as well as the spherical components of the boost-velocity. The electric- and magnetic-field vectors in the "primed" inertial frame are calculated and rendered automatically.

The Poynting vector in each frame is calculated automatically, too, though by default it isn't displayed in the visualization. You can toggle its visibility in the Options, where you'll also find some other settings that might interest you. Some of them have corresponding inputs you can control, like the charge, mass, and velocity of a particle co-located with the field-vectors. You can even suppress the field-vectors altogether (and all vectors derived from them), effectively turning the app into a "velocity-transformation visualizer," since then only the velocity-vectors can be displayed. Regardless of what's displayed in the visualization, however, all derived values are always calculated and shown in corresponding disabled inputs at the bottom of the page.

The entry-inputs can only accept number-values, even while you're typing the number. Since a minus-sign by itself isn't interpreted as a number, entering a negative number is a bit cumbersome: you have to type at least one digit before inserting the minus sign at the start. Same goes for periods—you'll have to type 0. instead of . for numbers between \( 0 \) and \( 1 \).

A few notes:

• We're using Lorentz–Heaviside units, so electric and magnetic fields have the same dimension.
• The speed of light is set to \( 1 \), and speed-inputs (the \( r \)-components for velocity-vectors) must be strictly less than that.
• Spherical components are of the "math" flavor, where \( \phi \) is the polar angle (with reference to the \( y \)-axis) and \( \theta \) is the azimuthal angle (with reference to the \( z \)-axis).
• The boost-velocity is directed along the \( x \)-axis by default. You can change that (by adjusting its polar or azimuthal angle), but if you do, take care not to misinterpret the calculated Cartesian components of a boosted vector—the \( x ^ \prime \)-component will no longer be the component whose basis-vector is parallel to the boost-axis! There's a button in the Options to reset the boost-direction to \( +x \).

You might notice that the URL changes as you fiddle with the inputs and Options. This is intentional, and it allows you to share or bookmark configurations of interest. The state of the camera is encoded in the URL, too.

Speaking of the camera, here is how it works:

• To orbit, use the left mouse-button (or one-finger move for touch).
• To zoom, use the mousewheel or the middle mouse-button (or two-finger spread/squish for touch).
• To pan, use the right mouse-button (or two-finger move for touch). Panning will change the focal point for orbiting and zooming, but you can restore it with the "Reset camera" button in the Options.

You can use the keyboard to control the input-settings and many of the Options. (Disclaimer: I can't guarantee that all hotkeys work in all browsers on all operating systems. On my Mac, they do work in every browser I've tested: Safari, Chrome, Firefox, and Edge.)

To increase or decrease the magnitude of a vector-component:

1. hold the key for the vector's name (e for the electric field, b for the magnetic field, v for the boost velocity, or u for the particle velocity);
2. hold the key for the component you're changing (x, y, or z for a Cartesian component of the electric or magnetic field, and r, p [for phi], or t [for theta] for a spherical component of a velocity);
3. and press either the up- or down-arrow (↑ or ↓).

For example, to decrease the \( E_x \) component, press e + x + ↓. And to increase the \( u_{ \phi } \) component, press u + p + ↑.

The velocity-vectors have a couple of additional controls. To reverse the direction of the boost velocity, press v + -. To reverse the direction of the particle velocity, press u + -. To reset the direction of the boost velocity (to the \( +x \) direction), press v + 0. To reset the direction of the particle velocity (to the \( -x \) direction), press u + 0.

The particle's charge can be increased with q + ↑ and decreased with q + ↓. Use m + ↑ and m + ↓ to control the particle's mass.

The show/hide settings in the Options have the following hotkeys:

• c toggles the component-vectors parallel and perpendicular to the boost-velocity;
• s toggles the Poynting vector;
• w (not u!) toggles the particle velocity;
• f toggles the Lorentz force;
• a toggles the particle acceleration;
• h toggles the boost-velocity and the boosted quantities;
• d toggles the field-vectors and quantities derived from them.

Use k to reset the camera.

The most elegant way to express how quantities transform under Lorentz boosts is with manifestly covariant math. In making this app, however, I had no choice but to get my hands dirty with the transformation formulas for non-covariant quantities. I've found that using the boost rapidity (as opposed to the boost velocity \( \vec v \) and Lorentz factor \( \gamma = \frac{1}{ \sqrt{ 1 - v ^2 } } \)) makes the formulas easier on the eyes and mind.

Below are the transformation formulas I used. The quantity \( \hat v \) is the unit vector in the direction of the boost velocity \( \vec v \), and the aforementioned boost rapidity is \( \eta = \tanh ^{-1} v \) (that's the inverse hyperbolic tangent, and \( v \) is the magnitude of \( \vec v \)).

• \( \vec E ^ \prime = \cosh \eta \, \vec E + \sinh \eta \, ( \hat v \times \vec B ) - 2 \sinh ^2 \frac{\eta}{2} \, ( \hat v \cdot \vec E ) \hat v \)
• \( \vec B ^ \prime = \cosh \eta \, \vec B - \sinh \eta \, ( \hat v \times \vec E ) - 2 \sinh ^2 \frac{\eta}{2} \, ( \hat v \cdot \vec B ) \hat v \)
• \( \vec u ^ \prime = \dfrac{ \vec u + \left ( 2 \sinh ^2 \frac{ \eta }{ 2 } \, ( \hat v \cdot \vec u ) - \sinh \eta \right ) \hat v }{ \cosh \eta - \sinh \eta \, ( \hat v \cdot \vec u ) } \)

(I didn't say they were pretty!)

It follows from the definition of \( \eta \) that \( \cosh \eta = \gamma \) and that \( \sinh \eta = \gamma v \). To write the formulas in their more familiar "non-rapidity" form, make those substitutions, use \( \vec v = v \hat v \) and the identity \( 2 \sinh ^2 \frac{ \eta }{ 2 } = \cosh \eta - 1 \), and simplify.

I didn't have to transform any of the other quantities, since I could calculate them in the "primed" frame from boosted quantities I'd already obtained.

Here are some interesting things to note:

• The quantities \( \vec E \cdot \vec B \) and \( E^2 - B^2 \) are invariant, meaning that their values don't change under a boost. So if the vectors are perpendicular in one inertial frame, then they're perpendicular in all inertial frames; and if they share a magnitude in one inertial frame, then they share a magnitude in all inertial frames. A light wave is characterized by both of these properties, so a light wave in one inertial frame is a light wave in all inertial frames, as of course it must be.
• Under a Lorentz boost, only the components of \( \vec E \) and \( \vec B \) that are perpendicular to the boost-velocity \( \vec v \) change. The components that are parallel to \( \vec v \) retain their value.
• Under a Lorentz boost, all components of a velocity-vector (\( \vec u \)) generally change. This differs from the Galilean/Newtonian model, where only the velocity-component parallel to the boost-axis changes.
• The force and acceleration vectors generally aren't parallel.
• When a force acts on a particle, the component of force that's parallel to the particle's velocity is invariant under a "longitudinal" boost, by which I mean a Lorentz boost that's parallel to the particle's velocity. In other words, if you set the particle-velocity \( \vec u \) to be parallel to the boost-velocity \( \vec v \), then you'll find that the component of \( \vec F \) that's parallel to those vectors is equal to the corresponding component of \( \vec F ^ \prime \). So try setting both \( \vec v \) and \( \vec u \) to point along the \( x \)-axis (by using the "Reset" buttons in the Options, say); \( F_x \) and \( F ^ \prime _x \) should then have the same value.