forked from vpython/glowscript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathVisualIntro.html
More file actions
274 lines (231 loc) · 16.3 KB
/
VisualIntro.html
File metadata and controls
274 lines (231 loc) · 16.3 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
<!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" --><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>VPython Introduction</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<link href="VisualRef.css" rel="stylesheet" type="text/css" />
<!-- InstanceEndEditable -->
</head>
<body>
<div id="wrapper">
<div id="leftmenu">
<p class="Normal"><a href="index.html"> Home</a></p>
<p class="Normal"> <a href="VisualIntro.html">Overview of Python & VPython<br>
</a></p>
<p class="Normal"><a href="https://trinket.io/matter-interactions/courses/00_welcome_to_vpython#/welcome-to-vpython/getting-started"> "Welcome to VPython" tutorial</a></p>
<p class="Normal"><a href="videos.html"> Introductory Videos</a></p>
<p class="Normal"><a href="primitives.html"> Pictures</a> of 3D objects</p>
<p> <select id="menu1" onChange="jumpMenu(this)"></select></p>
<p> <select id="menu2" onChange="jumpMenu(this)"></select></p>
<p> <select id="menu3" onChange="jumpMenu(this)"></select></p>
<p class="Normal"><a href="https://vpython.org" target="_blank"> VPython 7 web site</a><br />
<a href="license.txt" target="_blank"> VPython license</a><br />
<br />
</p>
</td>
</div>
<div id="content">
<!-- InstanceBeginEditable name="content" -->
<h1 class="Title" align="center"> <font color="#FF0000">Simple 3D Programming
Using VPython</font> </h1>
<div>
<h3><font color="#0000A0">1: Getting started</font>
</h3>
<p class="Normal">To write a VPython program in the browser, sign in at webvpython.org, click the link to your programs, then click Create New Program. A blank edit page will open with a header line that says something like "Web VPython 3.2". Start typing your program on the second line. Click "Run this program" to try out your program.</p>
</div>
<div>
<h5 class="Heading2"> <font color="#0000A0">The canvas</font></h5>
<p class="Normal"> When using VPython the canvas shows objects in 3D.</p>
<p class="Normal"> (0,0,0) is in the center of the canvas<img src="axes.gif" alt="axes" align="right" /> . The +x axis runs to the right, the +y axis runs up, and the +z axis points out of the screen, toward you.</p>
<p class="Normal"> x, y, and z are measured in whatever units you choose;
the canvas is automatically scaled appropriately. (You could, for example,
create a sphere with a radius of 1E-15 m to represent a nucleus, or a sphere
with a radius of 1E6 m to represent a planet, though it wouldn't make sense
to put both of these objects in the same canvas!)</p>
<h5 class="Heading2"> <font color="#0000A0">The Output window</font></h5>
<p class="Normal"> The output of any -print- statements you execute in your program goes to a scrolling text window underneath the graphics window. You can use this window to print values of variables, print lists, print messages, etc.</p>
<h5 class="Heading2"> <font color="#0000A0">The Code window</font></h5>
<p class="Normal">If you type or copy the following simple program into the program editor and run it (click "Run this program" or press Ctrl-1 or Ctrl-2), you will see
a canvas conatining a red box and a green sphere, as shown in the figure. </p>
<p class="program"> redbox=box(pos=vector(4,2,3),<br />
size=vector(8,4,6),color=color.red)<br />
ball=sphere(pos=vector(4,7,3),radius=2,color=color.green)</p>
<p class="Normal"> <span class="Heading-1"><img src="spherebox.gif" alt="sphere" align="right" /></span></p>
<h5 class="Heading2"><font color="#0000A0">Viewing the scene</font></h5>
<p class="Normal"> In the canvas, click and drag with the right mouse
button (or hold down the Ctrl key while dragging). Drag left or right, and
you rotate around the scene. To rotate around a horizontal axis, drag up
or down. Click and drag up or down with the
middle mouse button to move closer to the scene or farther away (on a 2-button
mouse, hold down the left and right buttons; on a 1-button mouse, hold down
the Alt key). To pan left/right and up/down, drag with the shift key held down.</p>
<h3><font color="#0000A0">2: VPython Entities</font>
</h3>
<h5 class="Heading2"> <font color="#0000A0">Objects, names, and attributes</font></h5>
<p class="Normal"> The graphical objects you create, such as spheres, boxes,
and curves, continue to exist for the duration of your program, and the
VPython 3D graphics module will continue to display them, wherever they are.
You must give each object a name (such as <span class="attribute">redbox</span> or <span class="attribute">ball</span> in the example above) if you
wish to refer to it again later in your program. All objects have attributes:
properties like <span class="attribute">ball.pos</span> (the position
of the sphere), <span class="attribute">ball.color</span>, and <span class="attribute">ball.</span><span class="attribute">radius</span> or other size parameter. If you change an attribute of an object, such as
its position or color, VPython will automatically display the object in its
new location, or with its new color.</p>
<p class="Normal"> You can set the values of attributes in the "constructor" (the code used to create the object), and you can also modify attributes later:</p>
<p class="program"> ball.radius = 2.2</p>
<p class="Normal"> In addition to the built-in set of attributes, you can
create new attributes. For example, you might create a sphere named <span class="attribute">moon</span>;
in addition to its radius and location, you might give it attributes such
as mass (<span class="attribute">moon.mass</span>) and momentum (<span class="attribute">moon.momentum</span>).</p>
<h5 class="Heading2"><font color="#0000A0">Vectors</font> </h5>
<p class="Normal"><span class="Normal">Not all objects in VPython are visible objects. For example,
VPython allows you to create 3D vector quantities, and to perform vector
operations on them. If you create a vector quantity called <strong>a</strong>,
you may refer to its components as <strong>a.x</strong><em class="code">, </em><strong>a.y</strong>, and <strong> a.z</strong>. To add two vectors, <strong> a</strong> and <strong> b</strong>, however, you do not need to add the
components one by one; VPython will do the vector addition for you:</span> </p>
<p class="program"> a = vector(1,2,3) # can also be written briefly as vec(1,2,3)<br />
b = vector(4,5,6)<br />
c = a+b</p>
<p class="Normal"> If you include print(c), you will see that
it is a vector with components <5, 7, 9>.</p>
<h5 class="Heading2"><font color="#0000A0">Scalar multiplication</font></h5>
<p class="program">d = 3*a # d is a vector with components <3, 6, 9></p>
<h5 class="Heading2"><font color="#0000A0">Vector magnitude</font> </h5>
<p class="program">s = mag(c) # s is a scalar magnitude<br />
z = mag(c)**2 # square the magnitude of the vector; ** means "to the power of"</p>
<h4 class="Heading2"><font color="#0000A0">Vector products</font> </h4>
<p class="program">f = cross(a,b) # cross product<br />
g = dot(a,b) # dot product<br />
h = hat(a) # normalized (unit) vector a/mag(a); same as a.hat and a.norm() or norm(a)</p>
<p class="Normal"> The attributes of VPython objects can be vectors, such
as velocity or momentum.</p>
<h3><font color="#0000A0">3: Simple Python Programming</font>
</h3>
<h5 class="Heading2"><font color="#0000A0">Using the 3D Graphics Module</font></h5>
<p class="Normal"> The necessary first line of a Web VPython program is created for you, and looks like this, if the current version is 3.2:</p>
<p class="program"> Web VPython 3.2</p>
<h5 class="Heading2"><font color="#0000A0">Comments</font></h5>
<p class="Normal"> A comment in a Python program starts with "#"</p>
<p class="program"> # This line is a comment</p>
<h5 class="Heading2"><font color="#0000A0">Variables</font></h5>
<p class="Normal"> Variables can be created anywhere in a Python program, simply by assigning a variable name to a value. The type of the variable is determined by the assignment statement.</p>
<p class="program"> a = 3 # an integer<br />
b = -2.4 # a floating-point number<br />
c = vector(0.4, 3e3, -1e1) # a vector; can abbreviate to vec<br />
Earth = sphere(pos=vector(0,0,0), radius=6.4e6) # a 3D object<br />
bodies = [ship, Earth, Moon]
# a list of objects</p>
<p class="Normal"> Basic VPython objects such as sphere() and box() have
a set
of "attributes" such as color, and you can define additional attributes
such
as mass or velocity. Other objects, such as vector(), have built-in
attributes
but you cannot create additional attributes. </p>
<h5 class="Heading2"><font color="#0000A0">Exponentiation</font></h5>
<p class="program"> x**2 # Not x^2, which is a bit operation in Python</p>
<h5 class="Heading2"> <font color="#0000A0">Logical Tests</font></h5>
<p class="program"> # Note the obligatory indentation here.<br />
if a == b: # note the double equal sign for "is equal"<br />
c = 5 # executed if a is equal to b<br />
d = 5*a # also executed if a is equal to b<br />
elif a > 10: # a not equal to b but greater than 10<br />
x = a+b<br />
else: # any other case<br />
x = b/a </p>
<h5 class="Heading2"><font color="#0000A0">Logical expressions</font></h5>
<table border="1">
<tr>
<td rowspan="1" colspan="1"><p class="program"> ==</p></td>
<td rowspan="1" colspan="1"><p class="program"> equal</p></td>
</tr>
<tr>
<td rowspan="1" colspan="1"><p class="program"> !=</p></td>
<td rowspan="1" colspan="1"><p class="program"> not equal</p></td>
</tr>
<tr>
<td rowspan="1" colspan="1"><p class="program"> <</p></td>
<td rowspan="1" colspan="1"><p class="program"> less than</p></td>
</tr>
<tr>
<td rowspan="1" colspan="1"><p class="program"> > </p></td>
<td rowspan="1" colspan="1"><p class="program"> greater than</p></td>
</tr>
<tr>
<td rowspan="1" colspan="1"><p class="program"> <=</p></td>
<td rowspan="1" colspan="1"><p class="program"> less than or equal </p></td>
</tr>
<tr>
<td rowspan="1" colspan="1"><p class="program"> >=</p></td>
<td rowspan="1" colspan="1"><p class="program"> greater or equal</p></td>
</tr>
<tr>
<td rowspan="1" colspan="1"><p class="program"> or</p></td>
<td rowspan="1" colspan="1"><p class="program"> logical or</p></td>
</tr>
<tr>
<td rowspan="1" colspan="1"><p class="program"> and</p></td>
<td rowspan="1" colspan="1"><p class="program"> logical and</p></td>
</tr>
<tr>
<td rowspan="1" colspan="1"><p class="program"> in</p></td>
<td rowspan="1" colspan="1"><p class="program"> member of a sequence</p></td>
</tr>
<tr>
<td rowspan="1" colspan="1"><p class="program"> not in</p></td>
<td rowspan="1" colspan="1"><p class="program"> not sequence member</p></td>
</tr>
</table>
<h5 class="Heading2"><font color="#0000A0">Lists</font></h5>
<p class="Normal"> A list is an ordered sequence of any kind of object. It is delimited by square brackets.</p>
<p class="program"> moons = [Io, Europa, Ganymede, Callisto]</p>
<p class="Normal"> The function "arange" (short for "arrayrange")
creates an array of numbers:</p>
<p class="program"> angles = arange (0, 2*pi, pi/100) <br />
# from 0 to 2*pi-(pi/100) in steps of (pi/100)<br />
<br />
numbers = arange(5)<br>
for i in numbers:<br>
print(i) # prints 0, 1, 2, 3, 4</p>
<h5 class="Heading2"> <font color="#0000A0">Loops</font></h5>
<p class="Normal"> The simplest loop in Python is a "while" loop. The loop continues as long as the specified logical expression is true (note the obligatory indentation):</p>
<p class="program"> while x < 23:<br />
x = x + vx*dt</p>
<p class="Normal"> To write an infinite loop, just use a logical expression that will always be true:</p>
<p class="program"> while True:<br />
rate(30) # limit animation rate, render scene <br />
ball.pos = ball.pos + (ball.momentum/ball.mass)*dt</p>
<p class="Normal"> Infinite loops are ok, because you can always interrupt the program by clicking "Edit this program". However, you <strong><em>MUST</em></strong> include a rate statement in the animation loop.</p>
<p class="Normal"> It is also possible to loop over the members of a sequence:<br />
<p class="program"> moons = [Io, Europa, Ganymede, Callisto]<br />
for a in moons:<br />
r = a.pos - Jupiter.pos<br />
<br />
for x in arange(10):<br />
# see "lists" above<br />
...<br />
<br />
for theta in arange(0., 2.*pi, pi/100.): <br />
# see "lists" above</p>
You can restart a loop, or terminate the loop prematurely:</p>
<p class="program">if a == b: continue # go back to the start of the loop<br />
if a > b: break # exit the loop</p>
<h5 class="Heading2"> <font color="#0000A0">Printing results</font></h5>
<p class="Normal"> To print a number, a vector, a list, or anything else,
use the "print" option:</p>
<p class="program"> print(Europa.momentum)</p>
<p class="Normal"> To print a text message, enclose it in quotes:</p>
<p class="program"> print("We crashed with speed", v, "m/s.")</p>
<p class="Normal"> This could also be done like this (note the initial "f" that makes this work):</p>
<p class="program"> print(f"We crashed with speed {v} m/s.")</p>
<h5 class="Heading2"><font color="#0000A0">More Information about Python</font></h5>
<p class="Normal">We have summarized a small but important subset of the Python programming
language. Extensive Python information is available on the internet.</p>
<p class="Normal"> </p>
<!-- InstanceEndEditable -->
</div>
</div>
</body>
<script type="text/javascript" language="javascript" src="navigation.js"></script>
<!-- InstanceEnd --></html>