Multiple Visualizations on a Page

We often want more than one visualization on a page. This pair contrasts two different representations of the same field. Be careful when including more than two WebGL components on a single page. Some mobile browsers will only allow two WebGL components on a page at a time. They will drop earlier components if you add more than two.

The most important difference in this example is that VISUALIZATION_CONFIG is now an array of JavaScript objects rather than a single object. A JavaScript array is generated by surrounding the contents of the array with square brackets [ ... ].

Include VField

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

We continue to draw examples from only the VField package. We will include another package soon.

Configure the visualization

<script>
// This time VISUALIZATION_CONFIG is an array
var VISUALIZATION_CONFIG
    = [
        {
          // The first entry is a simple vector field
          type:      "simple vector field",
          // The id of the canvas we draw into
          canvas:    "chargeCanvasI",
          scale:     5.0,
          arrowSize: 1.0,
          // f is a vector valued function.
          f:  {
                type: "charge",  charge:  5.0,
                x: 0.0, y: 0.0, z: 0.0,
                nfieldLines: 25.0
              }
        },
        {
          // The second entry is an electric field.
          type:          "electric field",
          // The id of the canvas we draw into
          canvas:        "chargeCanvasII",
          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
            }
        }
      ];
</script>
        

This new configuration contains both of the prior examples. Each of the examples is an entry in the array ([ ... ]) which makes up the new configuration. Each entry renders to a different canvas, the first to chargeCanvasI, and the second to chargeCanvasII. Other than that these are the same as the previous two examples.

Give a place to draw

<section class="examples">
  <div class="example left">
    <figure class="right">
      <!--This is a canvas for our electric field visualization. -->
      <canvas id="chargeCanvasI" width="300" height="300"></canvas>
      <figcaption>The electric field from a point charge represented
                  as a vector field.</figcaption>
    </figure>
  </div>

  <div class="example right">
    <figure class="left">
      <!--This is another canvas for our electric field visualization. -->
      <canvas id="chargeCanvasII" width="300" height="300"></canvas>
      <figcaption>The electric field from a point charge represented
                  by field lines.</figcaption>
    </figure>
  </div>
</section>
        

A way of displaying visualizations in side by side figures. You are, of course, free to integrate the visualizations into your content to best suite your objectives. This is only one of many possibilities. You might be curious about the CSS for this section as well.

Next, we return to the first example, the field from a point charge, and add more interactivity. This showcases the small building block approach, how it is able to integrate into your content, and allows you to express your style of content.