Setting values

Setting specific values and scenarios is an essential element of instructional content. With applications ranging from setting initial conditions to running examples and illustrating specific points any toolkit is incomplete without it. Once again, the VField and Lesson libraries team up to build this by binding events to values and providing easy to use HTML elements to generate the events. So that, in this case, clicking on a button sets values in the visualization.

We build an example that extends the Gaussian surface from last time. We add some additional bindings for the position of the charge, and also the existence of the spherical and a new cylindrical surface. Then we setup controls to set values for them and show how they can be used in instructional design.

We will still follow the general pattern to build this visualization. However, we will have significantly more sophisticated configuration and interactions.

• 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>
        

These two toolkits cover general interactivity, and vector field visualizations. We use them together to build effective, engaging content.

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: 2.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: "q"},
                     {set: "x", from: "x"},
                     {set: "y", from: "y"}
                    ]
            },
            {
              type: "Gaussian sphere",
              x:      0.0, y:   0.0, z: 0.0,
              r:     20.0,
              bind: [
                      {set: "r", from: "r"},
                      {set: "enabled", from: "drawSphere"}
                    ]
            },
            {
              type: "Gaussian cylinder",
              x:      0.0, y:   0.0, z: 0.0,
              r:     20.0, h: 20,
              // Pi/2
              theta:  1.57079632679, phi: 1.57079632679,
              // enabled: false => don't show by default
              enabled: false,
              // But we can turn it on with an event later
              bind: {set: "enabled", from: "drawCylinder"}
            }
          ]
      };
</script>
        

This time the elements contain a Gaussian cylinder as well as a Gaussian sphere. Of course it would be confusing to show them both at the same time, so we set their enabled property to show only one at a time.

Both the elements and some of the bindings are now arrays. Elements and bindings can be single items or arrays. Arrays are required to contain multiple entries.

The point charge at the origin is joined by a sphere, also centered at the origin.

q 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 increases with r².

Give a place to draw

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

Define interactions

This is all of the text and markup that generates the example at the top of the page interspersed with explanations.

<p>
We see all the electric field lines pass through the sphere. The field
lines are outward bound for a
<span class="lessonElement"
      data-type="setter"
      data-set="drawSphere=true, drawCylinder=false, x=0, y=0, q=5"
      data-html="positive charge"></span>,
and inward bound for a 
<span class="lessonElement"
      data-type="setter"
      data-set="drawSphere=true, drawCylinder=false, x=0, y=0, q=-5"
      data-html="negative charge"></span>.
        

Pick out the Lesson elements with class="lessonElement". We know which lesson element they are from data-type="setter". But, exactly what does a setter do?

Data-set, data-set="drawSphere=true, drawCylinder=false, x=0, y=0, q=-5" is a list of variables and the values that are set when the generated button is activated. This is a list to ensure that the entire visualization is set to reflect your narrative. Separate varChanged events are generated for each assignment in the list. This is consistent with the design of Lesson and VField where value changes are signaled by events.

attribute	meaning	example
class	Identifies a component of a lesson.	lessonElement
data-type	The type of component.	data-type="setter"
data-set	List of variable=value assignments.	data-set="drawSphere=true, drawCylinder=false, x=0, y=0, q=-5"
data-html	HTML content that is placed within the button.	data-html="negative charge"

The next section of the example uses the setter to move the charge around and discuss the patterns of field lines crossing the surface.

When the charge is at the
<span class="lessonElement"
      data-type="setter"
      data-set="drawSphere=true, drawCylinder=false, x=0, y=0, z=0"
      data-html="center"></span>
of the sphere, the field lines are perpendicular, or normal, to the
surface where they cross it. The field lines are also evenly distributed
over the surface, which tells us that the electric field has a constant
strength at any point on the sphere. If we move the charge to the
<span class="lessonElement"
      data-type="setter"
      data-set="drawSphere=true, drawCylinder=false, x=10, y=0, r=20"
      data-html="right"></span>,
to the
<span class="lessonElement"
      data-type="setter"
      data-set="drawSphere=true, drawCylinder=false, x=-10, y=0, r=20"
      data-html="left" ></span>,
if we move it 
<span class="lessonElement"
      data-type="setter"
      data-set="drawSphere=true, drawCylinder=false, x=0, y=10, r=20"
      data-html="up"></span>,
or if we move it 
<span class="lessonElement"
      data-type="setter"
      data-set="drawSphere=true, drawCylinder=false, x=0, y=-10, r=20"
      data-html="down"></span>,
as long as the charge remains within the surface the same fields lines
cross the surface in the same direction. Where the field lines cross the
surface changes, and the angle between the field lines and the surface
changes, but the same field lines cross the surface no matter where the
charge is within the surface.
</p>

<p>
Take the charge
<span class="lessonElement"
      data-type="setter"
      data-set="drawSphere=true, drawCylinder=false, x=0, y=25, r=20"
      data-html="outside"></span>
of the surface, and something completely different happens. Look carefully,
when the charge is outside of the surface many of the field lines no longer
cross the surface at all, and those that do cross the surface pass into and
out of the surface. A charge outside of the surface makes no contribution
to field lines passing through the surface.
</p>

<p>
If we
<span class="lessonElement"
      data-type="setter"
      data-set="drawSphere=true, drawCylinder=false, x=0, y=0, r=30"
      data-html="increase"></span>

the size of the surface we see that the fields lines are spread further apart
where they cross the surface. This corresponds to a weaker field. So the electric
field gets weaker the further away from the point charge we get. For a 
<span class="lessonElement"
      data-type="setter"
      data-set="drawSphere=true, drawCylinder=false, x=0, y=0, r=10"
      data-html="smaller"></span>
surface, we see the opposite effect. The field lines are closer together where
they cross the surface, so the field is stronger closer to the point charge.
</p>
        

This last piece of the example we set drawSphere=false, drawCylinder=true to show the significance of matching the shape to inherent symmetries of the problem.

<p>
If instead we
<span class="lessonElement"
      data-type="setter"
      data-set="x=0, y=0, drawSphere=false, drawCylinder=true"
      data-html="draw a cylinder"></span>, we lose the nice features we
we saw when we paired a sphere with a spherically symmetric field. The same
field lines cross the surface in the same direction, but they intersect the
surface at a wide variety of angles, and their density varies significantly
across the surface.
</p>
        

This is perhaps a slightly rich example, but it shows the different types of interactions that are available with this simple mechanism to set parameters for a visualization. It demonstrates how far we can go in creating richer interactive content for clearer explanations and more effective teaching.

Our next example is takes us in a different direction and show how to work directly with vector fields.