Gaussian Surface and a Point Charge

Examining field lines passing through a surface is a powerful tool for understanding the electric field. This is an application where VField's electric field visualization excels. We create a point charge surrounded by a spherical surface, then setup controls for the charge and the radius of the surface. In a later example we even change the shape of the surface. There will be two controls for the charge, automatically bound to the same events that they generate, so they remain in sync. What other variables might it be interesting to make interactive¹?

This statC charge is surrounded by a sphere of radius cm.

Let's refresh our memory of the overall process. Perhaps we will simplify this by merging Lesson and VField into a single file eventually, but for now they remain separate.

• Include the VField and Lesson toolkits on your page.
• Configure the visualization.
• Give a place to draw the visualization.
• Define interactions.

Include VField and Lesson toolkits

<!-- Lesson.js uses these styles -->
<link rel="stylesheet" type="text/css" 
      href="http://vizit.github.io/lesson/css/Lesson.css">
<script defer src="http://vizit.github.io/lesson/js/Lesson.min.js">
</script>
<script defer src="http://vizit.github.io/vfield/js/VField.min.js">
</script>
        

We demonstrate a little more of what the combination of VField and lesson are capable of.

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.0,
          // 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,
                bind: {set: "charge", from: "q1"}
              },
              {
                type: "Gaussian sphere",
                x:      0.0, y:   0.0, z: 0.0,
                r:     20.0,
                bind: {set: "r", from: "r"}
              }
            ]
        };
</script>
        

The elements are now an array containing two entries. Elements can be a single item or an array, with an array required to contain multiple entries.

The first entry in the elements array is the familiar point charge at the origin. It is joined by a second element, of type Gaussian sphere. A Gaussian sphere is drawn as a gray translucent sphere. We see that the Gaussian sphere also has coordinates x, y and z equal to zero, that is the sphere is centered around the charge, which is also at x, y and z equal zero. The sphere has a radius, r of 20cm.

q1 remains bound to the charge, and r is bound to the radius, r, of the sphere.

Manipulating the charge shows that the number of field lines crossing the sphere changes in direct proportion to the change in the charge. Manipulating the radius of the sphere illustrates how the space between the field lines is proportional to r².

Give a place to draw and define interactions

<figure class="center">
  <!--This is the canvas for our electric field visualization. -->
  <canvas id="chargeCanvas" width="300" height="300"></canvas>
  <!-- This lesson element controls q1 ranging from -5 to 5 in steps of .2 -->
  <figcaption>The electric field from a <span class="lessonElement"
                                              data-type="rangedSource"
                                              data-name="q1"
                                              data-value="5.0"
                                              data-min="-5.0"
                                              data-max="5.0"
                                              data-step="0.2"></span>
              statC charge.</figcaption>
</figure>

<p>
  This <span class="lessonElement"
             data-type="rangedSource"
             data-name="q1"
             data-value="5.0"
             data-min="-5.0"
             data-max="5.0"
             data-step="0.2"></span> statC charge is surrounded
  by a sphere of radius <span class="lessonElement"
                              data-type="rangedSource"
                              data-name="r"
                              data-value="20.0"
                              data-min="10.0"
                              data-max="30.0"
                              data-step="1.0"></span>cm.
</p>
        

This time there are three lesson elements, one for the radius of the sphere, and two for the charge. The lesson elements are also HTML elements, and so fit into the flow of the page, and can be styled by CSS.

Another powerful instructional technique is setting specific scenarios.