-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
248 lines (221 loc) · 11.3 KB
/
index.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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
<!DOCTYPE html>
<html>
<head>
<title>Vector Field Visualization</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="canonical" href="http://www.vizitsolutions.com/portfolio/vfield/index.html" />
<link rel="stylesheet" href="nstyle.css" type="text/css" />
<link rel="stylesheet" href="vfield.css" type="text/css" />
<link rel="next" href="pointChargeField.html">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" />
<script async src=https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js></script>
<script defer src="http://vizit.github.io/vfield/js/VField.min.js">
</script>
<script>
// This object is loaded by the VizBuilder on the DOMReady event.
var VISUALIZATION_CONFIG
= {
// This is a simple vector field, so we draw
// vectors representing the field along the field lines.
type: "simple vector field",
// The id of the canvas we draw into
canvas: "chargeCanvas",
scale: 5.0,
arrowSize: 1.0,
// f is a vector valued function.
// In this case the electric field from a single charge.
f: {
type: "charge", charge: 5.0,
x: 0.0, y: 0.0, z: 0.0,
nfieldLines: 25.0
}
};
</script>
</head>
<body onload="prettyPrint()">
<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=Vector+Fields" title="[email protected]">Contact</a></li>
</ul>
</div>
<div class="content">
<h1>Vector Field Visualization</h1>
<p id="nowebgl" class="error"></p>
<!--<p>
Progress in mathematics, physics or engineering at the college level requires a strong
understanding of mathematics.
</p>-->
<p>
VField produces powerful interactive visualizations of vector fields, including
electric fields, from simple configurations. Or use the API directly for more
sophisticated presentations and better performance. These visualizations and their
interactions are designed to integrate seamlessly with your content and not pull the
student out of the flow your presentation. This contrasts sharply with most other
interactive toolkits that provide self contained pieces, interactives, that may not
match the content or style of your presentation, and fail to provide integrated
interactivity with the content as a whole.
</p>
<p>
Most of these visualizations are built directly from configurations that describe
a physical charge arrangement, or that describe a mathematical function. They
provide the standard swipe to rotate and mouse wheel or pinch to zoom.
</p>
<p>
The following pages describe how to build several examples and how to add
additional interactivity. For the first example we draw vectors for the electric
field around a point charge.
</p>
<figure class="center">
<!--This is the canvas for our electric field visualization. -->
<canvas id="chargeCanvas" width="300" height="300"></canvas>
<figcaption>The electric field from a point charge represented
as a vector field.</figcaption>
</figure>
<p>
We produce this with three simple steps.
</p>
<ul>
<li>Include VField on your page.</li>
<li>Configure the visualization.</li>
<li>Give a place to draw the visualization.</li>
</ul>
<h3>Include VField</h3>
<pre class="prettyprint"><code class="language-js">
<script defer src="http://vizit.github.io/vfield/js/VField.min.js">
</script>
</code></pre>
<p>
The <samp>script</samp> tag includes VField on your page. The
<samp>defer</samp> attribute loads the script asynchronously, and
preserves order when multiple scripts are loaded. This will be
important later.
</p>
<p>
VField is an open source project hosted on <a href
= "https://github.com/VizIT/vfield">github</a>. Feel free to
examine the source, clone the repository, or make feature requests
by creating an issue. And please help everyone out by raising any
problems you have as an issue.
</p>
<h3>Configure the visualization</h3>
<pre class="prettyprint"><code class="language-js">
<script>
// This object is loaded by the VizBuilder on the DOMReady event.
var VISUALIZATION_CONFIG
= {
// This is a simple vector field, so we draw
// vectors representing the field along the field lines.
type: "simple vector field",
// The id of the canvas we draw into
canvas: "chargeCanvas",
scale: 5.0,
arrowSize: 1.0,
// f is a vector valued function.
// In this case the electric field from a single charge.
f: {
type: "charge", charge: 5.0,
x: 0.0, y: 0.0, z: 0.0,
nfieldLines: 25.0
}
};
</script>
</code></pre>
<p>
<code>VISUALIZATION_CONFIG</code> holds the visualization configuration
as a JavaScript object. This configuration starts out with some general
properties of the visualization, then sets up the vector field.
</p>
<p>
The <code>type</code> property defines, as you might expect, the type of graph
that is drawn. A <samp>simple vector field</samp> traces field lines and
draws vectors at several points along the field lines.
</p>
<p>
The <code>canvas</code> is the id of the canvas we will draw on. In this case,
<samp>chargeCanvas</samp>. As with any HTML id, it must be unique on the page.
</p>
<p>
The <code>scale</code> controls how much of the graph is drawn on the screen. A
scale of 1.0 means that the region where x, y and z each vary from -1.0 to +1.0
is drawn to the screen, or a scale of 50 means that the region where x, y, and
z range from -50 to +50 is drawn to the screen. This can also be thought of as
zooming in with smaller numbers, and zooming out with larger numbers. Of course
the user can always zoom in and out manually, the scale is just the initial zoom.
</p>
<p>
The <code>arrowSize</code> controls the size of the arrows as drawn on the screen.
Specifically it is the scale of the vector field units to the spatial units drawn
on the screen.
</p>
<p>
The vector field is defined by a vector valued function, <code>f</code>. In this example,
<code>f</code> is the electric field from a point charge at the origin.
</p>
<p>
The <code>type</code> of <code>f</code> is <samp>charge</samp>, which corresponds to a
point charge, whose electric field is used as the vector valued function.
</p>
<p>
The magnitude of the charge is given by <code>charge</code>. The charge units are
<a href = "http://en.wikipedia.org/wiki/Statcoulomb">statC</a>. 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.
</p>
<p>
The position of the charge is pretty straightforward. There is a property for each
coordinate <code>x</code>, <code>y</code> and <code>z</code>. 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, <code>x</code>, <code>y</code> and <code>z</code> are
all <samp>0.0</samp>.
</p>
<p>
We mentioned earlier that the simple vector field traces field lines and draws
field vectors spaced out along the field lines. The number of field lines traced
is controlled by the <code>nfieldLines</code> property. Changes in the magnitude
of the field produce proportional changes in the size of the vectors.
</p>
<h3>Give a place to draw</h3>
<pre class="prettyprint"><code class="language-html">
<figure class="center">
<!--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 vector field.</figcaption>
</figure>
</code></pre>
<p>
The canvas with an id matching the canvas id given in the visualization
configuration is the only requirement. Wrapping it with a figure element
gives a more polished appearance for the visualization and the caption.
</p>
<p>
These are exactly the steps used to create the example at the top of the page,
as I encourage you to verify with <samp>view source</samp>.
They can be included in any order on any web page to produce the same result.
</p>
<p>
As an alternative, we can display the field lines. This uses a different type
of graph, which we show <a href = "pointChargeField.html">next</a>.
</p>
<div class="center license">
<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource"
property="dct:title" rel="dct:type">VField Documentation</span> by <a xmlns:cc="http://creativecommons.org/ns#"
href="http://www.vizitsolutions.com/" property="cc:attributionName" rel="cc:attributionURL">Vizit Solutions</a>
is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons
Attribution 4.0 International License</a>.
</div>
</div>
<script src="../../js/vizit.js"></script>
</div>
</div>
</body>
</html>