-
Notifications
You must be signed in to change notification settings - Fork 0
/
interactiveField.html
249 lines (231 loc) · 10.8 KB
/
interactiveField.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
249
<!DOCTYPE html>
<html>
<head>
<title>Interactive Field Lines</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/interactiveField.html" />
<link rel="stylesheet" href="nstyle.css" type="text/css" />
<link rel="stylesheet" href="vfield.css" type="text/css" />
<!-- Lesson.js uses these styles -->
<link rel="stylesheet" type="text/css"
href="http://vizit.github.io/lesson/css/Lesson.css">
<link rel="prev" href="interactivity.html">
<link rel="next" href="gaussianSurface.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/lesson/js/Lesson.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
= {
// The electric field graph displays charges,
// field lines and gaussian surfaces.
type: "electric field",
// The id of the canvas we draw into
canvas: "chargeCanvas",
scale: 50.0,
lineWidth: 1.1,
arrowHeadSize: 1.0,
arrowSpacing: 15.0,
// Position a single charge at the origin
elements:
{
type: "charge", charge: 5.0,
x: 0.0, y: 0.0, z: 0.0,
fieldLineDensity: 5.0,
bind: {set: "charge", from: "q1"}
},
};
</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:akluge@vizitsolutions.com?subject=Vector+Fields" title="akluge@vizitsolutions.com">Contact</a></li>
</ul>
</div>
<div class="content">
<h1>Interactive Field Lines</h1>
<p id="nowebgl" class="error"></p>
<p>
This time we <a href
= "http://apcentral.collegeboard.com/apc/public/repository/Physics_Multiple_Representations_of_Knowledge_SF.pdf">represent</a>
the electric field with field lines. The number of field lines increases as
the field becomes stronger, and decreases as the field becomes weaker. This
is a standard way of representing electric fields. Indeed, one of the driving
forces behind this project is to improve on the standard, static, two dimensional
presentation of these field lines. Try adjusting the charge by clicking and
dragging the charge in the figure caption.
</p>
<figure class="center">
<!--This is the canvas for our electric field visualization. -->
<canvas id="chargeCanvas" width="300" height="300"></canvas>
<!-- This lesson element controls q1 ranging from -5 to 5 in steps of .2 -->
<figcaption>The electric field from a
<span class="lessonElement"
data-type="rangedSource"
data-name="q1"
data-value="5.0"
data-min="-5.0"
data-max="5.0"
data-step="0.2"></span>
statC<sup>1</sup> charge .</figcaption>
</figure>
<p>
We repeat our slightly more sophisticated approach.
</p>
<ul>
<li>Include the VField and Lesson toolkits on your page.</li>
<li>Configure the visualization.</li>
<li>Give a place to draw the visualization.</li>
<li>Define interactions.</li>
</ul>
<h3>Include VField and Lesson toolkits</h3>
<pre class="prettyprint"><code class="language-js">
<!-- Lesson.js uses these styles -->
<link rel="stylesheet" type="text/css"
href="http://vizit.github.io/lesson/css/Lesson.css">
<script defer src="http://vizit.github.io/lesson/js/Lesson.min.js">
</script>
<script defer src="http://vizit.github.io/vfield/js/VField.min.js">
</script>
</code></pre>
<p>
Once again we use VField for the electric field, and Lesson for
interactivity. So far we have only seen a little of what these
toolkits are capable of.
</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
= {
// The electric field graph displays charges,
// field lines and gaussian surfaces.
type: "electric field",
// The id of the canvas we draw into
canvas: "chargeCanvas",
scale: 50.0,
arrowHeadSize: 1.0,
arrowSpacing: 15.0,
// Position a single charge at the origin
elements:
{
type: "charge", charge: 5.0,
x: 0.0, y: 0.0, z: 0.0,
fieldLineDensity: 5.0,
bind: {set: "charge", from: "q1"}
}
};
</script>
</code></pre>
<p>
Start with the visualization of the electric field from a point
charge at the origin and add a binding, so that changes in
<code>q1</code> produce changes in the <code>charge</code>.
The field then changes to reflect the new charge.
</p>
<p>
Interestingly, these last two visualizations both bind
<code>q1</code> to their <code>charge</code>. If they are
placed on the same page, they will always show matching
representations of the same field. One using a vector
representation, the other using field lines. This shows
how the building block approach fits in well with the
concept of multiple representations, while also encouraging
you to make the design decisions for the overall content.
</p>
<h3>Give a place to draw and define interactions</h3>
<pre class="prettyprint"><code class="language-html">
<figure class="center">
<!--This is the canvas for our electric field visualization. -->
<canvas id="chargeCanvas" width="300" height="300"></canvas>
<!-- This lesson element controls q1 ranging from -5 to 5 in steps of .2 -->
<figcaption>The electric field from a
<span class="lessonElement"
data-type="rangedSource"
data-name="q1"
data-value="5.0"
data-min="-5.0"
data-max="5.0"
data-step="0.2"></span>
statC<sup>1</sup> charge .</figcaption>
</figure>
</code></pre>
<p>
There is no need to change the caption or the controlling lesson element.
We keep the <code>lessonElement</code>, which controls the <code>q1</code>,
ranging from -5.0 to 5.0 in steps of 0.2. A full description of the attributes:
</p>
<table class="explanation">
<tr>
<th>attribute</th><th>meaning</th><th class="optional">example</th>
</tr>
<tr>
<td>class</td><td>Identifies a component of a lesson.</td><td class="optional"><code>lessonElement</code></td>
</tr>
<tr>
<td>data-type</td><td>The type of component.</td><td class="optional"><code>data-type="rangedSource"</code></td>
</tr>
<tr>
<td>data-name</td><td>The name of the variable that this component effects.</td><td class="optional"><code>data-name="q1"</code></td>
</tr>
<tr>
<td>data-value</td><td>The initial value.</td><td class="optional"><code>data-value="5.0"</code></td>
</tr>
<tr>
<td>data-min</td><td>The min value for the control.</td><td class="optional"><code>data-min="-5.0"</code></td>
</tr>
<tr>
<td>data-max</td><td>The max value for the control.</td><td class="optional"><code>data-max="5.0"</code></td>
</tr>
<tr>
<td>data-step</td><td>The variable changes by this amount as the control is moved.</td><td class="optional"><code>data-step="0.2"</code></td>
</tr>
</table>
<p>
This example incorporates the control into the figure caption. It is just an HTML
element that you are free to place anywhere in your content according to your design
goals.
</p>
<p>
Next up, we combine the charge with a <a href = "gaussianSurface.html">Gaussian surface</a>
and add some additional controls to create a more sophisticated presentation.
</p>
<div class="footnote">
<ol>
<li>
<a href = "http://en.wikipedia.org/wiki/Gaussian_units#Unit_of_charge">statC,
rationalized cgs unit of charge.</a>
</li>
<li>
<a href = "https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent">HTML5
custom events</a>
</li>
</ol>
</div>
<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>