Field Lines From a Point Charge
Field lines are another common way of visualizing vector fields, especially electric fields. This time we show the field lines emanating from the same positive charge as the first example. We also draw the charge itself, as is traditional with this representation of the field.
To produce a graph of field lines we use a different type of graph, electric field, which is particularly built for electrostatics problems. The electric field graph has slightly different, but very similar, properties from the simple vector field.
We follow the same steps as the first example.
- Include VField on your page.
- Configure the visualization.
- Give a place to draw the visualization.
<script defer src=http://vizit.github.io/vfield/js/VField.min.js>
We use slightly different features from the VField package, so the script tag is the same. Remember that VField is an open source project and that we encourage your feedback, especially if you encounter trouble or problems. Help us help you, leave a comment or open an issue.
Configure the visualization
// This object is loaded by the VizBuilder on the DOMReady event.
// The electric field graph displays charges,
// field lines and gaussian surfaces.
type: "electric field",
// The id of the canvas we draw into
// Position a single charge at the origin
type: "charge", charge: 5.0,
x: 0.0, y: 0.0, z: 0.0,
The configuration, though, is different. This visualization is an electric field diagram. Electric field diagrams draw the charges and the resulting field lines.
We reuse the the
canvas id since we are on a new page.
It is the same figure & canvas setup, we simply changed the figure caption.
The scale controls the region that is drawn to the screen. Here, the scale
is 50 so we draw the region where
z each range from -50 to +50.
VField uses orthographic projection in case you are curious, this means we do
not generate any perspective.
arrowHeadSize directly controls the size of the arrowheads,
or directional indicators, on the field lines. There is no association between
the arrowhead size and the field strength. Choose the arrowhead size so the
arrowheads are clearly visible at the intended scale.
arrowSpacing directly controls the spacing between the
direction indicators. Choose a smaller spacing for field lines with a strong
curvature, and a large spacing for straighter field lines such as those for
a point charge or charged plane.
elements are the charge configuration that generates the
electric field, or surfaces that illustrate things about the field. Further
examples will show different configurations including multiple charges,
charged planes, charged spheres, charged cylinders, and charged lines and
This example contains a single element of
which corresponds to a point charge, whose electric we draw. All of the charges
from the electric field can also be used in the simple vector
field. The simple vector field also allows vector valued functions to be
The magnitude of the charge is given by
charge. The charge units are
statC. However, we draw
no axes, and allow you to control the size of the vectors, so you could consider
the charge to be any units you choose. The actual units are only clear on examination
of the code.
The position of the charge is pretty straightforward. There is a property for each
z. The units are treated
as cm in the code, but as with the charge you can chose any that are consistent with
your content. In this case,
z are all
0.0 so the units are unlikely to gain any notice.
An interesting difference is the use of
fieldLineDensity to determine
the number of field lines that are drawn. VField uses the
charge to determine the number of field lines to draw, so that
the number of field lines is
fieldLineDensity * charge. This is because
field line diagrams indicate the strength of the field by changing the number of field
lines. Increasing the charge increases the number of field lines, while decreasing the
charge decreases the number of field lines. A later example shows how to dynamically
change the charge.
Give a place to draw
<!--This is the canvas for our visualization. -->
<canvas id="chargeCanvas" width="300" height="300"></canvas>
<figcaption>The electric field from a point charge represented
as a set of field lines.</figcaption>
The canvas with an id matching the canvas id given in the configuration is the only requirement. Wrapping it with a figure element gives a more polished appearance for the visualization and the caption.
Once again this is exactly the markup used to generate the example on this page. Our next example shows how to put multiple visualizations on a page.