-
Notifications
You must be signed in to change notification settings - Fork 27
Expand file tree
/
Copy pathcurve.html
More file actions
275 lines (271 loc) · 22.5 KB
/
Copy pathcurve.html
File metadata and controls
275 lines (271 loc) · 22.5 KB
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
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
<!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" --><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>curve</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<link href="VisualRef.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {font-size: x-large}
.style2 {font-size: xx-large}
-->
</style>
<!-- InstanceEndEditable -->
<link href="VisualRef.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="230" height="30" border="0">
<tr>
<td width="66"><a name="top" id="top"></a><a href="index.html"><strong>Home</strong></a></td>
<td width="154"><span class="Normal"><a href="primitives.html"><strong>Pictures</strong></a> of 3D objects</span></td>
</tr>
</table>
<table width="438" height="30" border="0">
<tr>
<td width="151"><select id="menu1" onchange="jumpMenu(this)">
</select></td>
<td width="163"><select id="menu2" onchange="jumpMenu(this)">
</select></td>
<td width="110"><select id="menu3" onchange="jumpMenu(this)">
</select></td>
</tr>
</table>
<table width="454" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutDefaultTable-->
<tr>
<td width="454" rowspan="2" valign="top"><!-- InstanceBeginEditable name="content" -->
<table width="99%" border="1">
<tr>
<td width="431"><div align="center"><span class="style1 style2"><font color="#0000A0">curve</font></span></div></td>
<td width="132"><div align="center"><img src="images/curve.jpg" alt="curve" width="131" height="127" /><a href="arrow.html"></a></div></td>
</tr>
</table>
<p class="Normal">The curve object displays straight lines between
points, and if the points are sufficiently close together you get the
appearance of a smooth curve.</p>
<p class="Normal"><strong><font color="#0000a0">Details of the GlowScript curve object</font></strong></p>
<p class="Normal">The simplest example of a curve is the following statement, which draws a white straight line of length 2, between the position < -1,-1,0 > and the position < 1,--1,0 >:</p>
<div>
<p class="program">c = curve(vector(-1,-1,0), vector(1,-1,0))</p>
</div>
<p class="Normal">You can add additional points to this curve like this, completing a square of width 2 whose center is at location < 0,0,0 >:</p>
<div>
<p class="program">c.append(vector(1,1,0), vector(-1,1,0), vector(-1,-1,0))</p>
</div>
<p class="Normal">Suppose you have two vectors named <strong>v1</strong> and <strong>v2</strong>. Any of the following schemes will draw a white straight line from position <strong>v1</strong> to position <strong>v2</strong>:</p>
<div>
<p class="program">1) c = curve(v1,v2)</p>
<p class="program">2) c = curve([v1,v2])</p>
<p class="program">3) c = curve(pos=[v1,v2])</p>
<p class="program">4) c = curve(v1)<br />
c.append(v2)</p>
<p class="program">5) c = curve()<br />
c.append(v1,v2)</p>
<p class="Normal"><strong><font color="#0000a0">Shorthand</font></strong></p>
<p class="Normal">When specifying a list of points as pos = [....] you can use lists or tuples without the keyword "vector":</p>
<div>
<p class="program">curve( pos=[(1,1,0, (-1,1,0)], color=...)</p>
</div>
<p class="Normal"><strong><font color="#0000a0">Specifying overall color and radius</font></strong></p>
<p class="Normal">By default a curve is white, with a radius of the cross-section of only a few pixels. You can change the default color and radius for all points, using either of the following schemes: </p>
<div>
<p class="program">1) c = curve(pos=[v1,v2], color=color.cyan, radius=0.3)</p>
</div>
<div>
<p class="program">2) c = curve(color=color.cyan, radius=0.3) <br />
c.append(v1,v2)</p>
<div>
<p class="Normal"><strong><font color="#0000a0">Specifying the color and radius of individual points</font></strong></p>
<p class="Normal">You can specify the color and radius of individual points that override the color and radius specified for the curve as a whole. The following sequence will create two "dictionaries" to use as individual points, then will use them to draw a line whose color shades from red to blue and whose radius increases from 0.1 to 0.3:</p>
<div>
<p class="program">p1 = dict(pos=v1, color=color.red, radius=0.1)<br />
p2 = dict(pos=v2, color=color.blue, radius=0.3)<br />
curve(p1,p2) </p>
</div>
</div>
</div>
</div>
<p class="Normal">In addition to the attributes <span class="attribute">pos</span>, <span class="attribute">color</span>, <span class="attribute">radius</span>, each point has a <span class="attribute">visible</span> attribute, which makes that particular point visible or invisible.</p>
<div>
<div>
<p class="Normal"><strong><font color="#0000a0">Retaining a limited number of points</font></strong></p>
</div>
<p class="Normal">When creating a curve, or when appending a point to a curve, you can specify how many points should be retained. The following statement specifies that only the most recent 150 points should be retained as you add points to the curve:</p>
<p class="program">c = curve(retain=150)</p>
<p class="Normal">The following statement specifies that if there are already 30 points in the curve, the oldest one should be deleted and the new point added.</p>
<p class="program">c.append( pos=vector(2,-1,0), retain=30)</p>
<p class="Normal"><strong><font color="#0000a0">The curve attributes</font></strong></p>
<p class="Normal">Here is a summary of the attributes for individual points or for the curve as a whole:</p>
<p class="attributes"> <span class="attribute">pos </span> A vector position or list of positions.</p>
<p class="attributes"> <span class="attribute">color </span> Color
of a point; if specified for the curve as a whole, it specifies the color of any points for which no specific color was given.</p>
<p class="attributes"> <span class="attribute">radius</span> Radius of
the cross-section of this segment of the curve; if specified for the curve as a whole, it specifies the radius of any points for which no specific radius was given. The default radius is 0, which makes a thin curve.</p>
<p class="attributes"><span class="attribute">visible</span> If False,
point is not displayed; if False for the curve as a whole, no points are displayed.</p>
<p class="attributes"><span class="attribute">retain</span> Specify how many points to retain.</p>
<p class="Normal"></p>
<p class="Normal">A curve also has the standard attributes <span class="attribute">size</span>, <span class="attribute">axis</span>, <span class="attribute">up</span>, <span class="attribute">shininess</span>, and <span class="attribute">emissive</span>. </p>
<p class="Normal"><strong>No texture, opacity, or compounding:</strong> Currently curves cannot be transparent, it is not possible to apply a texture, and a curve cannot be part of a compound object.</p>
<p class="Normal"><strong><font color="#0000a0">Moving, reorienting, and resizing a curve</font></strong></p>
<p class="Normal"><strong>Point positions are relative; the use of <span class="attribute">origin</span>:</strong> A point whose pos is <span class="program">vector</span>(2, 1, 0) is of course normally displayed at location <span class="program">vector</span>(2, 1, 0). However, the position of a point is <em>relative</em> to a curve's own <span class="attribute">origin</span> value, which by default is <span class="program">vector</span>(0, 0, 0). If you change the curve's <span class="attribute">origin</span> value to <span class="program">vector</span>(10, 6, 5), the point is displayed at the location <span class="program">vector</span>(12, 7, 5); that is, the point is displayed 2 to the right, 6 above, and 0 in front of the curve's position <span class="program">vector</span>(10, 6, 5). Another way of saying this is that the display location is the vector sum <span class="program">vector</span>(10, 6, 5) + <span class="program">vector</span>(2, 1, 0). This means that you can quickly and efficiently move the entire curve just by changing the curve's <span class="attribute">origin</span> value. The <span class="attribute">pos</span> value of an individual point does not change; it's just that the point is displayed in a shifted position. As a result, moving an entire curve is very fast.</p>
</div>
<div>
<p class="Normal">Similarly, changes to <span class="attribute">size</span>, <span class="attribute">axis</span>, <span class="attribute">up</span>, <span class="attribute">shininess</span>, and <span class="attribute">emissive</span> immediately and quickly change the size of the curve, its orientation in space, and the appearance of its surface. When you specify the position of a point, it is relative to an origin at <span class="program">vector</span>(0,0,0) and with the standard axis <span class="program">vector</span>(1,0,0). Changing the <span class="attribute">size</span> does not change the <span class="attribute">radius</span>; it just moves the points closer or farther apart.<br />
</p>
<p class="Normal"><strong><font color="#0000a0">Rotating a curve</font></strong></p>
<p class="Normal">As with other objects, tne way to change the orientation of the entire curve is to change the curve's <span class="attribute">axis</span>. You can also rotate the entire curve about a specified axis. If you don't specify an origin, rotation will occur around the origin of the curve:</p>
<p class="program">c.rotate( angle=ang, axis=a, origin=o )</p>
<p class="program">c.rotate( angle=ang, axis=a )<br />
<br />
</p>
<p class="Normal"><strong><font color="#0000a0">Curve methods</font></strong></p>
<p class="Normal">The basic aspects of the GlowScript curve object are the same as the Classic VPython curve object. You create a curve and append points to it. However, modifying existing points is not done directly but instead by using a powerful set of functions, and this change makes it possible to display curves much more rapidly. In Classic VPython, the possibility of direct modification of the positions meant that the entire curve had to be reprocessed every time it was rendered, on the chance that some undetected change had occurred.</p>
<div>
<p class="Normal">The following are useful for modifying a curve named "c" (full documentation below):</p>
<p class="attributes"><span class="attribute">c.npoints</span> The total number of points currently in the curve. </p>
<p class="attributes"><span class="attribute">c.append(...)</span> Add a point or several points to the end.</p>
<p class="attributes"><span class="attribute">c.unshift(...)</span> Insert a point or several points at the start.</p>
<p class="attributes"><span class="attribute">c.splice(...)</span> Insert a point or several points anywhere.</p>
<p class="attributes"><span class="attribute">c.modify(...)</span> Modify the Nth point.</p>
<p class="attributes"><span class="attribute">c.clear()</span> Remove all points.</p>
<p class="attributes"><span class="attribute">data =</span><span class="attribute">c.pop</span><span class="attribute">(n)</span> Get the data for point number n and remove it.</p>
<p class="attributes"><span class="attribute">data = c.shift</span><span class="attribute">()</span> Get the data for the first point and remove it.</p>
<p class="attributes"><span class="attribute">data = c.point(N)</span> Get the data for the Nth point.</p>
<p class="attributes"><span class="attribute">data = c.slice(start, end)</span> Get the data for a list of points.</p>
</div>
<p class="Normal"><strong><font color="#0000a0">Appending points</font></strong></p>
<div>
<p class="Normal">Suppose you have created a curve named c. You can add points to the curve one at a time, like this:</p>
<p class="program">c.append(pos=vector(-1,0,0), color=color.red,<br />
radius=0.05)<br />
c.append(pos=vector(0,1,0), color=color.cyan,<br />
radius=0.15)<br />
c.append(pos=vector(1,0,0), color=color.red,<br />
radius=0.05)</p>
<div>
<p class="Normal">This creates the following image:</p>
</div>
</div>
</div>
<div><div><div>
<p align="center" class="Normal"> <img src="images/curve_append.png" width="250" height="151" alt="curve" /></p>
<div>
<div>
<div>
<div>
<div>
<p class="Normal">If you don't need to specify color or radius you can just give a list of positions, either as individual positions or in a list of positions:</p>
<p class="program">c.append( vector(-1,0,0), vector(0,1,0), vector(1,0,0) )<br />
c.append([vector(-1,0,0), vector(0,1,0), vector(1,0,0)])</p>
<div>
<p class="Normal">Suppose you have created a curve named c, and p represents either just a position vector (as just shown above) or a full description of a point in either of the following forms:<br />
<br />
<span class="program0"><strong>p = {pos:vector, color:a vector, radius:a number, visible:true or false}</strong></span><br />
<br />
<span class="program0"><strong>p = dict(pos=a vector, color=a vector, <br />
radius=a number, visible=true or false)</strong></span></p>
<div>
<p class="Normal"></p>
</div>
<p class="program">c.append( p1, p2, p3 ) # add several points</p>
</div>
<p class="program">c.append([p1, p2, p3]) # add several points</p>
<p class="program">pts = [p1, p2, p3]<br />
c.append(pts) # add several points</p>
<div>
<p class="Normal">You can also add several points that all have the same color, radius, etc.:</p>
</div>
<div></div>
<p class="program">c.append(pos=[p1, p2, p3], color=color.green) </p>
<p class="Normal"></p>
<p class="Normal"><strong><font color="#0000a0">Manipulating points</font></strong></p>
</div>
</div>
<div>
<p class="Normal">Here are details on getting data about points in a curve named "c", or modifying them.</p>
<p class="Normal"><span class="attribute">npoints</span></p>
</div>
<p class="program">c.npoints # number of points in the curve</p>
<p class="Normal"></p>
<p class="Normal"><span class="attribute">append</span></p>
<p class="program">c.append(...) # add points at end <br />
# (see above)</p>
<p class="Normal"></p>
<p class="Normal"><span class="attribute">unshift</span></p>
<p class="program">c.unshift(p1, p2, p3) # insert points at # start</p>
<p class="program">pts = [p1, p2, p3]<br />
c.unshift(pts) # insert points at # start</p>
<p class="Normal">The <span class="attribute">splice</span> method inserts new points starting at location "start" (where 0 is the first point of the curve), deleting "howmany" points before doing the insertion:</p>
<p class="program">c.splice(start,howmany,p1,p2,p3) # insert</p>
<p class="program">pts = [p1, p2, p3]<br />
c.splice(start,howmany,pts) # insert </p>
<p class="program"></p>
<p class="Normal">The <span class="attribute">modify</span> method lets you change specified attributes of a point:</p>
<p class="program"> c.modify(N, # modify point number N<br />
pos=p, color=c, radius=r, visible=v)<br />
c.modify(N, x=3, y=5) # changing x and y<br />
# but not z<br />
c.modify(N, vector(x,y,z)) # change only pos</p>
<p class="Normal"></p>
<p class="Normal"><span class="attribute">clear</span></p>
<p class="program">c.clear() # remove all points from curve</p>
<p class="Normal"></p>
<p class="Normal"><span class="attribute">pop</span></p>
<p class="program">data=c.pop() # get & remove last point<br />
data=c.pop(3) # get & remove point number 3</p>
<p class="Normal"></p>
<p class="Normal"><span class="attribute">shift</span> This is the same as c.pop(0):</p>
<p class="program">data = c.shift() # get & remove first point</p>
<p class="Normal"></p>
<p class="Normal"><span class="attribute">point</span></p>
<p class="program">P = c.point(N) # get a point in the form<br />
# {pos:p, color:c, radius:r, visible:v}<br />
# P.pos is p, P.color is c, etc.</p>
<p class="Normal"></p>
<p class="Normal"><span class="attribute">slice</span></p>
<p class="program">data = c.slice(2,4) # get a list of<br />
# points from point 2 through point 3,<br />
# each in the form<br />
# {pos:p, color:c, radius:r, visible:v}<br />
# The first point is 0, <br />
# the last point is -1</p>
</div>
</div>
<p class="Normal"><strong><font color="#0000a0">Interpolation of colors</font></strong></p>
<div>
<p class="Normal">The curve machinery interpolates colors from one point to the next. If you want an abrupt change in color, add another
point at the same location. In the following example, adding a cyan
point at the same location as the orange point makes the first
segment be purely cyan. </p>
</div>
<p class="program">c = curve(color=color.cyan, radius=0.1)<br />
c.append( vector(-1,0,0) ) <br />
# add an extra cyan point: <br />
c.append( vector(0,0,0) )<br />
# repeat the same point: <br />
c.append( pos=vector(0,0,0), <br />
color=color.orange )<br />
# add another orange point:<br />
c.append( pos=vector(1,0,0), <br />
color=color.orange ) </p>
<p class="Normal">In the image shown here, the upper thick curve, made without the second cyan point, has three pos and color points, cyan, orange, orange, left to right, so the blue fades into the orange. The lower curve includes the extra cyan point and has four pos and color points, cyan, cyan, orange, orange, so there is a sharp break between blue and orange. (Again, in JavaScript use "push" instead of "append".)</p></div></div></div></div>
<table width="450" border="0">
<tr>
<td width="450"><div align="center"><span class="Normal"><img src="images/colors_abutting.png" width="312" height="200" alt="colors abutting" /></span></div></td>
</tr>
</table>
<div>
<div></div>
</div>
<div> </div>
<p class="Normal"><strong><font color="#0000a0">JavaScript</font></strong></p>
<p class="Normal">See the <a href="cylinder.html"><strong>cylinder</strong></a> documentation for how to create an object in JavaScript.</p>
<!-- InstanceEndEditable --></td>
</tr>
</table>
<p><a href="#top"><strong>Top of page</strong></a></p>
</body>
<script type="text/javascript" language="javascript" src="navigation.js"></script>
<!-- InstanceEnd --></html>