Visualizing an Electric Field With HTML5 and WebGL, Part 1: Introduction

 Illustrations and visualizations of the electric field are ubiquitous in online physics courses and ebooks. The current generation of devices with their increased graphics and interaction capabilities affords an opportunity to significantly improve on even this well established paradigm. Further the wide variety of illustrations and interactions demonstrated here clearly show the advantages of the newer technology. This toolkit, including the documentation, is available in the efield repository on GitHub.

Both qualitative and quantitative understanding of this foundational material are critical to a student's long term success. Effective and clear explanations along with intuitive interactive visualizations and simulations enhance understanding and invite exploration. This personal interaction and exploration helps the student make the transition from what they know to what they need to know.

To be effective, the visualization should be as simple as possible while still conveying the desired information. The goal is to bridge the gap between a student's mental model and a greater level of understanding. If the visualization is too far removed from the student's mental model then it will be difficult to engage the student and will not be an effective learning tool.

When first encountering this material in a two dimensional representation, the student must simultaneously understand the physics and extend the representation into three dimensions. A three dimensional initial presentation removes the requirement to mentally extend the representation into three dimensions, allowing the learner to focus on the physical or mathematical content. This is be a more effective learning experience.

WebGL and OpenGL are particularly well suited for intrinsically three dimensional material such as electric and magnetic fields. The example here is initially positioned in a similar orientation to common 2D electric field illustrations, and should be immediately recognized. In addition, it is reactive to both mouse and touch interactions in a standard way. A mouse drag will rotate the diagram while a mouse wheel will zoom the image.

Another component of usability for instructional technology it the usability for the instructor. This example is constructed entirely in WebGL, HTML and JavaScript. The general code is capable of rendering an arbitrary set of charges and field lines by specifying the charges and their locations, as well as a starting point for tracing each field line.

The second diagram is a single positive charge. This different configuration required only a few minutes of time to add another canvas element, specify the single charge, and the new start points for the field lines.

Scaling with changes in size of the canvas are also not an issue. Each frame is rendered, or generated, specifically for the canvas drawing surface. This means that it will always adjust for the size of the canvas. The size of the canvas can in turn be defined by media specific css giving an appropriate image for virtually all situations.

This third example is the same as the dipole configuration, except the positive charge has been doubled. The field is sufficiently complex that constructing it by hand would be a challenging task. However, with this toolkit is it a simple change that takes a few seconds. For the learner, it is immediately clear that the field lines no longer loop from the positive to the negative charge but some fields lines extend out away from the system of charges. Also, it is now possible to directly see how the charge appears at a large distance by zooming out. It quickly becomes clear that when viewed from a large distance the fields becomes close to that for a point charge. That is, the perturbations created by the negative charge are less and less evident as the observer draws further and further away.

The next section provides additional examples centered around Gauss's law.

---

Next: Gauss's Law Examples

---