Visualizing an Electric Field With HTML5 and WebGL, Part 6: More Examples
A Spherical Charge Distribution
The newest addition is spherical charge distributions. As always start with a canvas. Usually I enclose the canvas in a figure and attach a caption.
The Canvas
As always start with a canvas. Usually I enclose the canvas in a figure and attach a caption.
<figure class="right">
<!--A blank area we can draw on with JavaScript. -->
<canvas id="drawingSurfaceI" width="300" height="300"></canvas>
<figcaption>A spherical charge distribution of radius 30.</figcaption>
</figure>
The Charge Distribution
A spherical charge distribution of charge Q inner radius a and outer radius b at centered at (x,y,z) with rho field lines per unit charge is defined with:
new chargedSphere(Q, rho, x, y, z, a, b);Additional shapes will be added over time.
Here we setup a charge of -1 statC distributed in a sphere of radius 50 cm centered around the origin.
var chargeDistribution;
chargeDistribution = new chargedSphere( -1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 50.0);
Field Lines
Remember from the previous examples that field lines are specified by providing an (x,y,z) seed point, and sgn as an indicator whether the field line should be traced in the direction of the field line. In this case, we provide a sgn of -1 as we are beginning near a negative charge. These field lines are all started near the center of the charge distribution, following Another option is to start some of the field lines further out from the center of the charge distribution reflecting the increasing field strength as you progress through the charge. This will likely be the case later when the field lines are generated automatically.
/*
* Start a set of field lines near the origin.
*/
function placeStartPoints(fieldRenderer)
{
fieldRenderer.addStartPoint( 0.0, 1.0, 0.0, -1.0)
.addStartPoint( 0.0, -1.0, 0.0, -1.0)
.addStartPoint( 1.0, 0.0, 0.0, -1.0)
.addStartPoint(-1.0, 0.0, 0.0, -1.0)
.addStartPoint( 0.5, 0.5, 0.7071, -1.0)
.addStartPoint( 0.5, 0.5, -0.7071, -1.0)
.addStartPoint( 0.5, -0.5, 0.7071, -1.0)
.addStartPoint( 0.5, -0.5, -0.7071, -1.0)
.addStartPoint(-0.5, 0.5, 0.7071, -1.0)
.addStartPoint(-0.5, 0.5, -0.7071, -1.0)
.addStartPoint(-0.5, -0.5, 0.7071, -1.0)
.addStartPoint(-0.5, -0.5, -0.7071, -1.0);
return fieldRenderer;
}
The fieldRenderer
The fieldRenderer now accepts a spherical charge distribution, a
chargedSphere. Remember renderer.start() to begin rendering to the screen.
var chargeDistribution;
var drawingSurface;
var renderer;
drawingSurface = document.getElementById('drawingSurfaceI');
renderer = new fieldRenderer(drawingSurface);
renderer = placeStartPoints(renderer);
chargeDistribution = new chargedSphere( -1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 50.0);
renderer = renderer.addChargeDistribution(chargeDistribution);
renderer.start();
Adding a Gaussian Surface
Combining these building blocks in innovative ways can generate sophisticated examples. For example, we can place a Gaussian surface within a hollow spherical charge distribution. Zooming in allows you to see that the Gaussian surface is within the inner radius of the charge distribution, and that the field lines begin within the charge distribution, and so do not impinge on the Gaussian surface.
Another Canvas
Define another drawing surface, being careful to give it a unique id.
<figure class="right">
<!--A blank area we can draw on with JavaScript. -->
<canvas id="drawingSurfaceII" width="300" height="300"></canvas>
<figcaption>A charge distribution surrounding a Gaussian surface.</figcaption>
</figure>
A Hollow Charged Sphere
This time we specify an inner radius so the charge is spread out between an inner radius a=20 and an outer radius b=50.
var chargeDistribution;
chargeDistribution = new chargedSphere( -1.0, 0.0, 0.0, 0.0, 0.0, 20.0, 50.0);
The Gaussian Surface
We choose to place the Gaussian surface within the inner radius of the charge distribution so that there will be no net charge within it.
var gaussianSurface; gaussianSurface = new gaussianSphere(0.0, 0.0, 0.0, 10.0);
More Field Lines
The start point for each field line lies on a sphere of radius 21. They will start just inside of the charge distribution, and well outside of the Gaussian sphere.
function placeMoreStartPoints(fieldRenderer)
{
fieldRenderer.addStartPoint( 0.0, 21.0, 0.0, -1.0)
.addStartPoint( 0.0, -21.0, 0.0, -1.0)
.addStartPoint( 21.0, 0.0, 0.0, -1.0)
.addStartPoint(-21.0, 0.0, 0.0, -1.0)
.addStartPoint( 10.5, 10.5, 14.849, -1.0)
.addStartPoint( 10.5, 10.5, -14.849, -1.0)
.addStartPoint( 10.5, -10.5, 14.849, -1.0)
.addStartPoint( 10.5, -10.5, -14.849, -1.0)
.addStartPoint(-10.5, 10.5, 14.849, -1.0)
.addStartPoint(-10.5, 10.5, -14.849, -1.0)
.addStartPoint(-10.5, -10.5, 14.849, -1.0)
.addStartPoint(-10.5, -10.5, -14.849, -1.0);
return fieldRenderer;
}
Another fieldRenderer
This fieldRenderer works with a charge distribution, a Gaussian surface, and field lines.
drawingSurface = document.getElementById('drawingSurfaceII');
renderer = new fieldRenderer(drawingSurface);
renderer = placeMoreStartPoints(renderer);
gaussianSurface = new gaussianSphere(0.0, 0.0, 0.0, 10.0);
renderer = renderer.addGaussianSurface(gaussianSurface);
chargeDistribution = new chargedSphere( -1.0, 0.0, 0.0, 0.0, 0.0, 20.0, 50.0);
renderer = renderer.addChargeDistribution(chargeDistribution);
renderer.start();
Other interesting examples include cases where the Gaussian surface completely surrounds the charge distribution and the case where it is embedded within the charge distribution with radius r and a<r<b.
Previous: Examples Next: Charged Plane Examples