-
Notifications
You must be signed in to change notification settings - Fork 0
/
chargedDistributions.html
187 lines (165 loc) · 8 KB
/
chargedDistributions.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html>
<head>
<title>Visualizing an Electric Field With HTML5 and WebGL, Part 3: Charge Distributions</title>
<link rel="stylesheet" href="css/nstyle.css" type="text/css">
<link href='http://fonts.googleapis.com/css?family=IM+Fell+French+Canon:400italic' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link rel="prev" href="gaussianSurfaces.html">
<link rel="next" href="chargedPlane.html">
<script type="text/javascript" src="js/efield.min.js"></script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<link rel="canonical" href="http://www.vizitsolutions.com/portfolio/efield/chargedDistributions.html" />
</head>
<body>
<!-- Copyright 2013 VizIT Solutions
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<div class="wrapper">
<div id="main">
<div id="header">
<span class="logo2 Fell drawOnResize"><a href = "http://www.vizitsolutions.com/">Vizit Solutions</a></span>
<ul>
<li class="drawOnResize"><a href="http://www.vizitsolutions.com/portfolio/catalog/" title="Catalog">Catalog</a></li>
<li class="drawOnResize"><a href="http://www.vizitsolutions.com/portfolio/" title="Portfolio">Portfolio</a></li>
<li class="drawOnResize"><a href="http://blog.vizitsolutions.com/" title="Blog">Blog</a></li>
<li class="drawOnResize"><a href="mailto:[email protected]?subject=Visualization" title="[email protected]">Contact</a></li>
</ul>
</div>
<div class="content">
<h1>Visualizing an Electric Field With HTML5 and WebGL, Part 3: Charge Distributions</h1>
<p id="nowebgl" class="error"></p>
<p class="abstract">
Real problems are rarely confined to configurations of point charges. The next
step is to work with uniform charge distributions.
</p>
<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 enveloping a Gaussian surface.</figcaption>
</figure>
<p>
It is now possible to define spherical charge distributions, which are represented
by translucent shapes. This allows other components of the system to be viewed through
the charge distribution. This first example is of a spherical charge
distribution with inner radius a=20 and outer radius b=50. This charge distribution
completely surrounds a Gaussian surface with r=10. It is now possible to zoom in
and see that the Gaussian surface does not enclose any charge.
</p>
<figure class="left">
<!--A blank area we can draw on with JavaScript. -->
<canvas id="drawingSurfaceII" width="300" height="300"></canvas>
<figcaption>The Gaussian surface completely surrounds the charge.</figcaption>
</figure>
<p>
The other example in this set shows the Gaussian sphere surrounding the
charge distribution. Of course it is possible to draw the Gaussian surface
at an arbitrary position, and in the long term it will be possible to move
and resize elements, so that it will be possible to move the Gaussian surface
through the charge distribution, allowing for much more interesting and lively
discussions.
</p>
<br class="clear">
<hr>
<span class="floatleft">Previous: <a href = "gaussianSurfaces.html">Gauss's Law Examples</a></span>
<span class="floatright">Next: <a href = "chargedPlane.html">A Charged Plane</a></span>
<br class="clear">
<hr>
</div>
</div>
</div>
<script type="text/javascript">
var chargeDistribution;
var drawingSurface;
var gaussianSurface;
var renderer;
function tryLog(string)
{
if(this.console)
{
console.log(string);
}
}
/*
* This sets the start points of flux or field lines that will be traced
* to generate the illustration. Each startpoint is specified with x, y, z,
* and sgn. Where (x, y, z) is the coordinate of the point where we start
* tracing the field line, and sgn is +1.0 or -1.0 indicating whether the
* fiux line is to be traced along, or in opposition to the electric field.
* Field lines starting near a negative charge will usually have this
* indicator as -1.0.
*/
function placeStartPoints(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;
}
drawingSurface = document.getElementById('drawingSurfaceI');
renderer = new fieldRenderer(drawingSurface);
renderer = placeStartPoints(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, 20.0, 50.0);
renderer = renderer.addChargeDistribution(chargeDistribution);
renderer.start();
drawingSurface = document.getElementById('drawingSurfaceII');
renderer = new fieldRenderer(drawingSurface);
renderer = placeStartPoints(renderer);
gaussianSurface = new gaussianSphere(0.0, 0.0, 0.0, 60.0);
renderer = renderer.addGaussianSurface(gaussianSurface);
chargeDistribution = new chargedSphere( -1, 0.0, 0.0, 0.0, 0.0, 20.0, 50.0);
renderer = renderer.addChargeDistribution(chargeDistribution);
renderer.start();
</script>
<script type="text/javascript">
"use strict";
var error;
var txt;
var canvasSupported = !!window.HTMLCanvasElement;
if (canvasSupported)
{
var myCanvas = document.createElement('canvas');
var gl = myCanvas.getContext("experimental-webgl")
|| myCanvas.getContext("webgl");
if (!gl)
{
txt = "Your browser supports the HTML5 canvas, but does not support WebGL."
}
}
else
{
txt = "Your browser does not support the HTML5 canvas, which is required for WebGL."
}
if (txt != null)
{
txt += " To see the examples on this page, please get a <a href"
+ "= 'http://get.webgl.org/'>browser that supports WebGL</a>.";
error = document.getElementById("nowebgl");
error.innerHTML=txt;
error.style.display="block";
}
</script>
<script type="text/javascript" src="../../js/vizit.js"></script>
</body>
</html>