# 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 $x 2 + y 2 + z 2 = 1$ 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.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&gtA 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);