Field Lines From a Point Charge

Field lines are another common way of visualizing vector fields, especially electric fields. This time we show the field lines emanating from the same positive charge as the first example. We also draw the charge itself, as is traditional with this representation of the field.

To produce a graph of field lines we use a different type of graph, electric field, which is particularly built for electrostatics problems. The electric field graph has slightly different, but very similar, properties from the simple vector field.

We follow the same steps as the first example.

• Include VField on your page.
• Configure the visualization.
• Give a place to draw the visualization.

Include VField

<script defer src=http://vizit.github.io/vfield/js/VField.min.js>
</script>
        

We use slightly different features from the VField package, so the script tag is the same. Remember that VField is an open source project and that we encourage your feedback, especially if you encounter trouble or problems. Help us help you, leave a comment or open an issue.

Configure the visualization

<script>
  // This object is loaded by the VizBuilder on the DOMReady event.
  var VISUALIZATION_CONFIG
      = {
          // The electric field graph displays charges,
          // field lines and gaussian surfaces.
          type:          "electric field",
          // The id of the canvas we draw into
          canvas:        "chargeCanvas",
          scale:         50.0,
          lineWidth:     1.1,
          arrowHeadSize: 1.0,
          arrowSpacing:  15,
          // Position a single charge at the origin
          elements:
            {
              type: "charge",  charge:  5.0,
              x: 0.0, y: 0.0, z: 0.0,
              fieldLineDensity: 5.0
            }
        };
</script>
         

The configuration, though, is different. This visualization is an electric field diagram. Electric field diagrams draw the charges and the resulting field lines.

We reuse the the canvas id since we are on a new page. It is the same figure & canvas setup, we simply changed the figure caption.

The scale controls the region that is drawn to the screen. Here, the scale is 50 so we draw the region where x, y and z each range from -50 to +50. VField uses orthographic projection in case you are curious, this means we do not generate any perspective.

The arrowHeadSize directly controls the size of the arrowheads, or directional indicators, on the field lines. There is no association between the arrowhead size and the field strength. Choose the arrowhead size so the arrowheads are clearly visible at the intended scale.

The arrowSpacing directly controls the spacing between the direction indicators. Choose a smaller spacing for field lines with a strong curvature, and a large spacing for straighter field lines such as those for a point charge or charged plane.

The elements are the charge configuration that generates the electric field, or surfaces that illustrate things about the field. Further examples will show different configurations including multiple charges, charged planes, charged spheres, charged cylinders, and charged lines and Gaussian surfaces.

This example contains a single element of type charge, which corresponds to a point charge, whose electric we draw. All of the charges from the electric field can also be used in the simple vector field. The simple vector field also allows vector valued functions to be used.

The magnitude of the charge is given by charge. The charge units are statC. However, we draw no axes, and allow you to control the size of the vectors, so you could consider the charge to be any units you choose. The actual units are only clear on examination of the code.

The position of the charge is pretty straightforward. There is a property for each coordinate x, y and z. The units are treated as cm in the code, but as with the charge you can chose any that are consistent with your content. In this case, x, y and z are all 0.0 so the units are unlikely to gain any notice.

An interesting difference is the use of fieldLineDensity to determine the number of field lines that are drawn. VField uses the fieldLineDensity and the charge to determine the number of field lines to draw, so that the number of field lines is fieldLineDensity * charge. This is because field line diagrams indicate the strength of the field by changing the number of field lines. Increasing the charge increases the number of field lines, while decreasing the charge decreases the number of field lines. A later example shows how to dynamically change the charge.

Give a place to draw

<figure class="center">
  <!--This is the canvas for our visualization. -->
  <canvas id="chargeCanvas" width="300" height="300"></canvas>
  <figcaption>The electric field from a point charge represented
              as a set of field lines.</figcaption>
</figure>
         

The canvas with an id matching the canvas id given in the configuration is the only requirement. Wrapping it with a figure element gives a more polished appearance for the visualization and the caption.

Once again this is exactly the markup used to generate the example on this page. Our next example shows how to put multiple visualizations on a page.