Visualizing an Electric Field With HTML5 and WebGL, Part 7: Charged Plane Examples

Remember from our earlier discussion that a charged plane is constructed by specifying the charge density, σ, the density of field lines per unit charge, ρ, and the four corners of the rectangular area of the plane that will be drawn (x0, y0, z0), (x1, y1, z1), (x2, y2, z2), and (x3, y3, z3).

     new chargedPlane(sigma, rho,
                      x0,  y0, z0,
                      x1,  y1, z1,
                      x2,  y2, z2,
                      x3,  y3, z3)

The single positively charged plane visualization was generated with a charge density using rationalized CGS units of .01 statC/cm and .03 field lines per statC. Though the physics does not depend on the systems of units.

  var chargeDistribution;
  var drawingSurface;
  var renderer;

  drawingSurface     = document.getElementById('drawingSurfaceI');
  renderer           = new fieldRenderer(drawingSurface);
  chargeDistribution = new chargedPlane(.01, .03,
                                        -49.5006781186547524,   5.71067811865475232, -105.710678118654753,
                                         91.9206781186547524, 105.710678118654752,     -5.71067811865475249,
                                         91.9206781186547524, -35.7106781186547523,   135.710678118654753,
                                        -49.5006781186547524, -135.710678118654752,     35.7106781186547525);
  renderer           = renderer.addChargeDistribution(chargeDistribution);
  renderer.start();

In placing the rectangles, I have found it useful to envision I wanted, then explicitly transform the unit rectangle into the desired rectangle using the standard rotation, scaling, and translation matrices. This guarantees that the rectangular segment of the plane is reasonable. These matrices may look a bit different from what you are used to because they make use of homogeneous coordinates, which which are quite common in computer graphics because they make projection easier and allow translations, rotations and scaling to be represented cleanly as a matrix.

$$\begin{array}{ccc}T(\mathrm{\Delta x},\mathrm{\Delta y},\mathrm{\Delta z})\hfill & =& \left(\begin{array}{cccc}1& 0& 0& \mathrm{\Delta x}\\ 0& 1& 0& \mathrm{\Delta y}\\ 0& 0& 1& \mathrm{\Delta z}\\ 0& 0& 0& 1\end{array}\right)\hfill \\ R_x\left(\theta \right)\hfill & =& \left(\begin{array}{cccc}1& 0& 0& 0\\ 0& \mathrm{Cos}\left(\theta \right)& -\mathrm{Sin}\left(\theta \right)& 0\\ 0& \mathrm{Sin}\left(\theta \right)& \mathrm{Cos}\left(\theta \right)& 0\\ 0& 0& 0& 1\end{array}\right)\\ R_y\left(\psi \right)\hfill & =& \left(\begin{array}{cccc}\mathrm{Cos}\left(\psi \right)& 0& \mathrm{Sin}\left(\psi \right)& 0\\ 0& 1& 0& 0\\ -\mathrm{Sin}\left(\psi \right)& 0& \mathrm{Cos}\left(\psi \right)& 0\\ 0& 0& 0& 1\end{array}\right)\\ R_z\left(\varphi \right)\hfill & =& \left(\begin{array}{cccc}\mathrm{Cos}\left(\text{ϕ}\right)& -\mathrm{Sin}\left(\text{ϕ}\right)& 0& 0\\ \mathrm{Sin}\left(\text{ϕ}\right)& \mathrm{Cos}\left(\text{ϕ}\right)& 0& 0\\ 0& 0& 1& 0\\ 0& 0& 0& 1\end{array}\right)\\ S(S_x,S_y,S_z)\hfill & =& \left(\begin{array}{cccc}\mathrm{Sx}& 0& 0& 0\\ 0& \mathrm{Sy}& 0& 0\\ 0& 0& \mathrm{Sz}& 0\\ 0& 0& 0& 1\end{array}\right)\hfill \end{array}$$

We can apply these matrices easily if we start with the unit rectangle, U in a matrix where each column is a vertex, again using homogeneous coordinates.

$$\begin{array}{ccc}U\hfill & =& \left(\begin{array}{cccc}-0.5& 0.5& 0.5& -0.5\\ 0.5& 0.5& -0.5& -0.5\\ 0.& 0.& 0.& 0.\\ 1.& 1.& 1.& 1.\end{array}\right)\hfill \end{array}$$

The arbitrary rectangle P representing the infinite plane is then built by transforming the unit rectangle U

$$P=T(\mathrm{\Delta x},\mathrm{\Delta y},\mathrm{\Delta z})R_z\left(\varphi \right)R_x\left(\theta \right)R_y\left(\psi \right)S(S_x,S_y,S_z)U$$

The positively charged plane on this page is created by scaling the unit rectangle by 200 in the x and y directions, 1 in the z direction, rotating it by π/4 radians about the x and y axes, then translating it by (21.21, -15, 15). Dropping these values into the expression for P:

$$\begin{array}{ccc}P\hfill & =& T(21.21,-15,15)R_z\left(0\right)R_x(-\frac{\pi }{4})R_y(-\frac{\pi }{4})S(200,200,1)U\hfill \\ & =& \left(\begin{array}{cccc}1& 0& 0& 21.21\\ 0& 1& 0& \mathrm{-15}\\ 0& 0& 1& 15\\ 0& 0& 0& 1\end{array}\right)\left(\begin{array}{cccc}1& 0& 0& 0\\ 0& \mathrm{Cos}(-\frac{\pi }{4})& -\mathrm{Sin}(-\frac{\pi }{4})& 0\\ 0& \mathrm{Sin}(-\frac{\pi }{4})& \mathrm{Cos}(-\frac{\pi }{4})& 0\\ 0& 0& 0& 1\end{array}\right)\left(\begin{array}{cccc}\mathrm{Cos}(-\frac{\pi }{4})& 0& \mathrm{Sin}(-\frac{\pi }{4})& 0\\ 0& 1& 0& 0\\ -\mathrm{Sin}(-\frac{\pi }{4})& 0& \mathrm{Cos}(-\frac{\pi }{4})& 0\\ 0& 0& 0& 1\end{array}\right)\left(\begin{array}{cccc}200& 0& 0& 0\\ 0& 200& 0& 0\\ 0& 0& 1& 0\\ 0& 0& 0& 1\end{array}\right)\left(\begin{array}{cccc}-0.5& 0.5& 0.5& -0.5\\ 0.5& 0.5& -0.5& -0.5\\ 0.& 0.& 0.& 0.\\ 1.& 1.& 1.& 1.\end{array}\right)\hfill \\ & =& \left(\begin{array}{cccc}-49.5006781186547524& 91.9206781186547524& 91.9206781186547524& -49.5006781186547524\\ 5.71067811865475232& 105.710678118654752& -35.7106781186547523& -135.710678118654752\\ -105.710678118654753& -5.71067811865475249& 135.710678118654753& 35.7106781186547525\\ 1.& 1.& 1.& 1.\end{array}\right)\hfill \end{array}$$

Then read off each column as the (x,y,z) coordinates of the corners of the rectangle.

---

Previous: More Examples

---