Visualizing an Electric Field With HTML5 and WebGL, Part 5: Code Examples

 This library provides an easy to use method for generating physically correct and instructionally relevant visualizations in electrostatics. This toolkit, including the documentation, is available in the efield repository on GitHub.

A First Diagram

This example generates a visualization of the electric field for a point charge. It is as simple as placing the charge, and saying where to put the field lines1.

The efield Package

The package is divided into a set of modules, each with a specific purpose. The sources of the modules are available in the GitHub repository for review, and they are also combined into a single file, efield.min.js. Include this file to load the efield API used in these examples.

    <script type="text/javascript" src="js/efield.min.js"></script>
How do we draw a charge at the origin?

The Canvas

A critical step in any OpenGL program is to allocate a drawing surface. This is the screen real estate where OpenGL will draw. With WebGL, and hence with the efield renderer, the drawing surface is an HTML5 canvas. The location, size, and style of the canvas can be fully controlled through CSS and JavaScript as any other HTML element. This simplifies incorporating efield visualizations into existing content.

    <!--A blank area we can draw on with JavaScript. -->
    <canvas id="drawingSurface" width="300" height="300"></canvas>

The Charge

The Charge class represents a point charge Q at position (x,y,z). Placing charge definitions in a separate routine, while not required, yields cleaner, better organized code. This example generates a point charge at the origin (0,0,0), and registers it with the renderer.

    function placeCharges(fieldRenderer)
      var charge;

      charge = new Charge(1.0, 0.0, 0.0, 0.0);


      return fieldRenderer;

Field Lines

Field lines are specified by providing x,y,z, and sgn. (x,y,z) are the coordinates of a point on the line, and sgn is an indicator whether the field line should be traced in the direction of the field line, or in the opposite direction. A value of 1.0 indicates that the field line traces along the field line, while -1.0 indicates that the field line is traced in the opposite direction. Use this latter option when tracing a field line starting near a negative charge. These field lines are all started near the point charge at the origin, following x 2 + y 2 + z 2 = 4

     * Start a set of field lines near a positive charge at the
     * origin.
    function placeStartPoints(fieldRenderer)
      fieldRenderer.addStartPoint( 2.0,  0.0,  0.0,    1.0)
                   .addStartPoint(-2.0,  0.0,  0.0,    1.0)
                   .addStartPoint( 0.0,  2.0,  0.0,    1.0)
                   .addStartPoint( 0.0, -2.0,  0.0,    1.0)
                   .addStartPoint( 1.0,  1.0,  1.4142, 1.0)
                   .addStartPoint( 1.0,  1.0, -1.4142, 1.0)
                   .addStartPoint( 1.0, -1.0,  1.4142, 1.0)
                   .addStartPoint( 1.0, -1.0, -1.4142, 1.0)
                   .addStartPoint(-1.0,  1.0,  1.4142, 1.0)
                   .addStartPoint(-1.0,  1.0, -1.4142, 1.0)
                   .addStartPoint(-1.0, -1.0,  1.4142, 1.0)
                   .addStartPoint(-1.0, -1.0, -1.4142, 1.0);

      return fieldRenderer;

The fieldRenderer

The fieldRenderer tracks all the charges and Gaussian surfaces, generates field lines, and renders all of these into the canvas. Drawing to the screen does not start until renderer.start() is called.

    var drawingSurface;
    var renderer;

    drawingSurface = document.getElementById('drawingSurface');
    renderer       = new fieldRenderer(drawingSurface);
    renderer       = placeCharges(renderer);
    renderer       = placeStartPoints(renderer);

Drawing A Dipole

A system of two charges is almost as easy as a single charge. This example places two charges, a positive charge at (-30, 0, 0) and a negative charge at (30, 0, 0). The seed points for a set of field lines are then clustered around the positive charge. As expected, those field lines loop around to the negative charge.

Now we see how easy it is to draw the dipole.

Another Canvas

As with the first example, we start by defining a drawing surface, being careful to give it a unique id.

    <canvas id="anotherDrawingSurface" width="300" height="300"></canvas>

Defining Two Charges

This example places two charges, equal in magnitude, but opposite in charge. A positive charge, charge1, is placed at (-30, 0, 0) and a negative charge, charge2, is placed at (30, 0, 0).

    function placeMoreCharges(fieldRenderer)
      var charge1;
      var charge2;

      // Each charge has a charge, then x, y, z coordinates.
      // Each of these is a floating point number.
      charge1 = new Charge( 1.0, -30.0,  0.0, 0.0);
      charge2 = new Charge(-1.0,  30.0,  0.0, 0.0);


      return fieldRenderer;

More Field Lines

The start point for each field line lies on a sphere of radius 2 around the positive charge. So, they obey the equation ( x + 30 ) 2 + y 2 + z 2 = 4

    function placeMoreStartPoints(fieldRenderer)
      fieldRenderer.addStartPoint(-28.0,   0.0,   0.0,    1.0)
                   .addStartPoint(-30.0,   2.0,   0.0,    1.0)
                   .addStartPoint(-30.0,  -2.0,   0.0,    1.0)
                   .addStartPoint(-29.0,   1.0,   1.4142, 1.0)
                   .addStartPoint(-29.0,   1.0,  -1.4142, 1.0)
                   .addStartPoint(-29.0,  -1.0,   1.4142, 1.0)
                   .addStartPoint(-29.0,  -1.0,  -1.4142, 1.0)
                   .addStartPoint(-31.0,   1.0,   1.4142, 1.0)
                   .addStartPoint(-31.0,   1.0,  -1.4142, 1.0)
                   .addStartPoint(-31.0,  -1.0,   1.4142, 1.0)
                   .addStartPoint(-31.0,  -1.0,  -1.4142, 1.0)
                   .addStartPoint(-31.31,  0.54,  1.4142, 1.0)
                   .addStartPoint(-31.31,  0.54, -1.4142, 1.0)
                   .addStartPoint(-31.31, -0.54,  1.4142, 1.0)
                   .addStartPoint(-31.31, -0.54, -1.4142, 1.0);

      return fieldRenderer;

Another fieldRenderer

This time the fieldRenderer works with a slightly different set of charges and field lines.

    drawingSurface = document.getElementById('anotherDrawingSurface');
    renderer       = new fieldRenderer(drawingSurface);
    renderer       = placeMoreCharges(renderer);
    renderer       = placeMoreStartPoints(renderer);

Adding A Gaussian Surface

Adding a Gaussian sphere around the dipole is very easy. Simply define the Gaussian sphere and add it to the fieldRenderer.

A classic Gaussian surface example. The fields lines radiate
out from the charge and cross the Gaussian sphere.

Yet Another Canvas

As always, start by defining a drawing surface.

    <canvas id="yetAnotherDrawingSurface" width="300" height="300"></canvas>

Yet Another fieldRenderer

This time we will reuse the charges and field lines from the dipole, but we will add a Gaussian surface, a sphere centered at the origin and with a radius of 40.

    var gaussianSurface;

    drawingSurface  = document.getElementById('yetAnotherDrawingSurface');
    renderer        = new fieldRenderer(drawingSurface);
    renderer        = placeMoreCharges(renderer);
    renderer        = placeMoreStartPoints(renderer);
    gaussianSurface = new gaussianSphere(0.0, 0.0, 0.0, 40.0);
    renderer        = renderer.addGaussianSurface(gaussianSurface);

1) In the near future even this step will be greatly simplified with the automatic placement of field lines proportional to field strength.

Previous: A Charged Plane Next: More Examples