Visualizing an Electric Field With HTML5 and WebGL, Part 5: Code Examples
This library provides an easy to use method for generating physically correct and instructionally relevant visualizations in electrostatics. This toolkit, including the documentation, is available in the efield repository on GitHub.
A First Diagram
This example generates a visualization of the electric field for a point charge. It is as simple as placing the charge, and saying where to put the field lines1.
The efield Package
The package is divided into a set of modules, each with a specific purpose. The sources of the modules are available in the GitHub repository for review, and they are also combined into a single file, efield.min.js. Include this file to load the efield API used in these examples.
<script type="text/javascript" src="js/efield.min.js"></script>
The Canvas
A critical step in any OpenGL program is to allocate a drawing surface. This is the screen real estate where OpenGL will draw. With WebGL, and hence with the efield renderer, the drawing surface is an HTML5 canvas. The location, size, and style of the canvas can be fully controlled through CSS and JavaScript as any other HTML element. This simplifies incorporating efield visualizations into existing content.
<!--A blank area we can draw on with JavaScript. -->
<canvas id="drawingSurface" width="300" height="300"></canvas>
The Charge
The Charge class represents a point charge Q at position (x,y,z). Placing charge definitions in a separate routine, while not required, yields cleaner, better organized code. This example generates a point charge at the origin (0,0,0), and registers it with the renderer.
function placeCharges(fieldRenderer)
{
var charge;
charge = new Charge(1.0, 0.0, 0.0, 0.0);
fieldRenderer.addCharge(charge);
return fieldRenderer;
}
Field Lines
Field lines are specified by providing x,y,z, and sgn. (x,y,z) are the coordinates of a point on the line, and sgn is an indicator whether the field line should be traced in the direction of the field line, or in the opposite direction. A value of 1.0 indicates that the field line traces along the field line, while -1.0 indicates that the field line is traced in the opposite direction. Use this latter option when tracing a field line starting near a negative charge. These field lines are all started near the point charge at the origin, following
/*
* Start a set of field lines near a positive charge at the
* origin.
*/
function placeStartPoints(fieldRenderer)
{
fieldRenderer.addStartPoint( 2.0, 0.0, 0.0, 1.0)
.addStartPoint(-2.0, 0.0, 0.0, 1.0)
.addStartPoint( 0.0, 2.0, 0.0, 1.0)
.addStartPoint( 0.0, -2.0, 0.0, 1.0)
.addStartPoint( 1.0, 1.0, 1.4142, 1.0)
.addStartPoint( 1.0, 1.0, -1.4142, 1.0)
.addStartPoint( 1.0, -1.0, 1.4142, 1.0)
.addStartPoint( 1.0, -1.0, -1.4142, 1.0)
.addStartPoint(-1.0, 1.0, 1.4142, 1.0)
.addStartPoint(-1.0, 1.0, -1.4142, 1.0)
.addStartPoint(-1.0, -1.0, 1.4142, 1.0)
.addStartPoint(-1.0, -1.0, -1.4142, 1.0);
return fieldRenderer;
}
The fieldRenderer
The fieldRenderer tracks all the charges and Gaussian surfaces,
generates field lines, and renders all of these into the canvas. Drawing to
the screen does not start until renderer.start() is called.
var drawingSurface;
var renderer;
drawingSurface = document.getElementById('drawingSurface');
renderer = new fieldRenderer(drawingSurface);
renderer = placeCharges(renderer);
renderer = placeStartPoints(renderer);
renderer.start();
Drawing A Dipole
A system of two charges is almost as easy as a single charge. This example places two charges, a positive charge at (-30, 0, 0) and a negative charge at (30, 0, 0). The seed points for a set of field lines are then clustered around the positive charge. As expected, those field lines loop around to the negative charge.
Another Canvas
As with the first example, we start by defining a drawing surface, being careful to give it a unique id.
<canvas id="anotherDrawingSurface" width="300" height="300"></canvas>
Defining Two Charges
This example places two charges, equal in magnitude, but opposite in charge. A positive charge, charge1, is placed at (-30, 0, 0) and a negative charge, charge2, is placed at (30, 0, 0).
function placeMoreCharges(fieldRenderer)
{
var charge1;
var charge2;
// Each charge has a charge, then x, y, z coordinates.
// Each of these is a floating point number.
charge1 = new Charge( 1.0, -30.0, 0.0, 0.0);
charge2 = new Charge(-1.0, 30.0, 0.0, 0.0);
fieldRenderer.addCharge(charge1)
.addCharge(charge2);
return fieldRenderer;
}
More Field Lines
The start point for each field line lies on a sphere of radius 2 around the positive charge. So, they obey the equation
function placeMoreStartPoints(fieldRenderer)
{
fieldRenderer.addStartPoint(-28.0, 0.0, 0.0, 1.0)
.addStartPoint(-30.0, 2.0, 0.0, 1.0)
.addStartPoint(-30.0, -2.0, 0.0, 1.0)
.addStartPoint(-29.0, 1.0, 1.4142, 1.0)
.addStartPoint(-29.0, 1.0, -1.4142, 1.0)
.addStartPoint(-29.0, -1.0, 1.4142, 1.0)
.addStartPoint(-29.0, -1.0, -1.4142, 1.0)
.addStartPoint(-31.0, 1.0, 1.4142, 1.0)
.addStartPoint(-31.0, 1.0, -1.4142, 1.0)
.addStartPoint(-31.0, -1.0, 1.4142, 1.0)
.addStartPoint(-31.0, -1.0, -1.4142, 1.0)
.addStartPoint(-31.31, 0.54, 1.4142, 1.0)
.addStartPoint(-31.31, 0.54, -1.4142, 1.0)
.addStartPoint(-31.31, -0.54, 1.4142, 1.0)
.addStartPoint(-31.31, -0.54, -1.4142, 1.0);
return fieldRenderer;
}
Another fieldRenderer
This time the fieldRenderer works with a slightly different
set of charges and field lines.
drawingSurface = document.getElementById('anotherDrawingSurface');
renderer = new fieldRenderer(drawingSurface);
renderer = placeMoreCharges(renderer);
renderer = placeMoreStartPoints(renderer);
renderer.start();
Adding A Gaussian Surface
Adding a Gaussian sphere around the dipole is very easy. Simply define
the Gaussian sphere and add it to the fieldRenderer.
out from the charge and cross the Gaussian sphere.
Yet Another Canvas
As always, start by defining a drawing surface.
<canvas id="yetAnotherDrawingSurface" width="300" height="300"></canvas>
Yet Another fieldRenderer
This time we will reuse the charges and field lines from the dipole, but we will add a Gaussian surface, a sphere centered at the origin and with a radius of 40.
var gaussianSurface;
drawingSurface = document.getElementById('yetAnotherDrawingSurface');
renderer = new fieldRenderer(drawingSurface);
renderer = placeMoreCharges(renderer);
renderer = placeMoreStartPoints(renderer);
gaussianSurface = new gaussianSphere(0.0, 0.0, 0.0, 40.0);
renderer = renderer.addGaussianSurface(gaussianSurface);
renderer.start();
Previous: A Charged Plane Next: More Examples