-
Notifications
You must be signed in to change notification settings - Fork 21
/
Copy pathpage2.html
289 lines (217 loc) · 10.7 KB
/
page2.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
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
276
277
278
279
280
281
282
283
284
285
286
287
288
289
<!doctype html>
<head>
<title>Curriculum — page 2</title>
<link rel=stylesheet href="fonts.googleapis.com/css-family=Averia+Serif+Libre:300,400">
<link rel=stylesheet href=style.css>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
</head>
<h1>Curriculum: page 2, pictures</h1>
<p>The previous page told you exactly, literally what to do, without
leaving you any choices. We apologize for this shameless suppression
of your artistic self. Now that you know the basics, the course
material will be less linear, with more room for experimentation.</p>
<h2 class=step>Open the picture playground</h2>
<h3 class=goal>Goal</h3>
<p>Get acquainted with our visual programming environment.</p>
<h3 class=inst>Instructions</h3>
<p>Open the <a href="sandbox/#drawing.js" target=_blank>playground
page</a> in a new tab.</p>
<p>Rejoice.</p>
<p>Next, read the first part of the JavaScript program.</p>
<p>Randomly play around with the content of the <code>drawing</code>
function. Change some numbers and colors, render again. Now read the
text below the program and add some new shapes.</p>
<h3 class=ex>Explanation</h3>
<p>What we are going to do is get a feel for programming concepts by
applying them to something easily observable: graphics. The linked
page defines a number of convenient drawing operations for us, and
invites you to experiment with them.</p>
<p>At the bottom of the program there are a number of lines starting
with two slashes (<code>//</code>). These are
called <em>comments</em>. They clarify the program, but are not
actually part of it. You can write anything you want in a comment, the
computer won't even look at it.</p>
<p>Your programs, as entered into the sandbox page, don't run in a
vacuum. We have, for the purpose of this course, defined a number of
simple functions for performing graphics operations, as described at
the bottom of the example, and your program may refer to those.</p>
<p>The <code>function drawing()</code> part defines a function
named <code>drawing</code>. We'll see more about function definitions
in a few steps, but this one is special, in that it is executed when
the script is rendered. Thus, it is the place where the statements
that produce your drawing go.</p>
<h2 class=step>The loop</h2>
<h3 class=goal>Goal</h3>
<p>Learn what a loop is, and how to express them in JavaScript.</p>
<p>Problem statement: we want to draw twenty dots, without
writing <code>circle(x, y, something)</code> twenty times.</p>
<h3 class=inst>Instructions</h3>
<p>Open <a href="sandbox/#drawing_loop.js" target=_blank>this link</a>
to get a <code>drawing</code> function containing this program:</p>
<pre>color("red");
var column = 0;
while (column < 20) {
circle(column * 10, 0, 4);
column = column + 1;
}</pre>
<h3 class=ex>Explanation</h3>
<p>A program, when not otherwise instructed, will simply execute its
statements from top to bottom. The great thing about making a computer
work for us is that it can take repetetive tasks of our hand. Thus, we
don't want to write <code>circle(0, 0, 4); circle(10, 0, 4);</code> etc
to draw our dots.</p>
<p>The word <code>while</code> can be used to create a special kind of
statement that is called a <em>loop</em>. It consists of
a <em>condition</em> (<code>column < 20</code>) and a <em>body</em>
(the part between the braces). A loop does not obey the usual top-down
order of execution. It will continue executing the body as long as the
condition holds true.</p>
<p>The braces around the two statements inside the loop are used to
group them together—they make clear that these statements both belong
to the loop body. You have probably noticed that some space is added
in front of these, to make it clear that they are part of a block.
This is done to help readability of the program, but isn't
strictly required.</p>
<p>The example code uses a variable to track its progress.
The <code>column</code> variable starts at zero, and is moved forward
by one every time the loop body executes. A loop condition is a
normal expression, and the <code><</code> symbol is a normal
operator that compares two expressions and returns a value that
indicates whether the one to the left is smaller than the one to the
right. Thus, we can expect the loop body to be executed exactly twenty
times—first with <code>column</code> at zero, then at one, and so on
until nineteen. When it reaches twenty, the condition no longer holds,
and the program continues below the loop (which is the end of our
example).</p>
<p>There are a few more things you might need to know about
the <code><</code> operator. The value it produces is not a number
or a string, but a new type, called <em>boolean</em>. There are only
two values of this type, called <code>true</code>
and <code>false</code>. There are similar operators for checking
whether a value is greater than (<code>></code>) or equal to
(<code>==</code>) to some other value.</p>
<p><strong>Exercise:</strong> try to write a program that prints a
20-by-20 <em>grid</em> of dots, instead of just a line. You'll need
two loops, and two counter variables (one for columns, one for rows). Hint: you may put a loop inside
another loop.</p>
<p>When trying out programs in the sandbox, keep an eye on the
console. When the computer can't make sense of your program, it will
output (more or less informative) messages there. When nothing happens
after pressing 'Render', chances are you mistyped something.</p>
<h2 class=step>Conditional execution</h2>
<h3 class=goal>Goal</h3>
<p>Next, we want to draw every other dot in our lines of dots in a
different color. The even ones should be black, the odd ones grey.</p>
<p>In order to do this, we will learn about conditional statements.</p>
<h3 class=inst>Instructions</h3>
<p>Here is the program that, when put inside the <code>drawing</code>
function, does what we want, and is
available <a href="sandbox/#drawing_if.js" target=_blank>here</a>:</p>
<pre>var column = 0;
while (column < 20) {
if (column % 2 == 0) {
color("black");
} else {
color("gray");
}
circle(column * 10, 0, 4);
column = column + 1;
}</pre>
<h3 class=ex>Explanation</h3>
<p>The first new concept introduced here is the <code>%</code>
operator. This is pronounced 'remainder'. It is not a very important
operator, but it is useful here. What it does is divide the value on
the left by the one on the right, and give us the remainder of that
division. Thus, <code>column % 2 == 0</code> is a way to check
whether <code>column</code> is even—if it is, then the remainder of
dividing it by two will be zero.</p>
<p>But the <em>important</em> new concept introduced here is
the <code>if</code>/<code>else</code> statement. Like a loop, it
accepts a condition. If the condition is <code>true</code>, it will
execute the statement coming after it. Otherwise, it will execute the
statement that follows the <code>else</code> word.</p>
<p>The <code>else</code> part can be left off to indicate that nothing
at all should happen when the condition does not hold.</p>
<p><strong>Exercise:</strong> extend the example program to draw every
third dot 10 units higher than the others. Hint: define a
variable <code>height</code> and set its value inside of a
conditional.</p>
<h2 class=step>Functions</h2>
<h3 class=goal>Goal</h3>
<p>Now consider that we want to draw a smiley in multiple, specific
places. We could repeat the six statements needed to draw one such
shape several times, but again, what we're trying to do here is to
make the computer <strong>work</strong> for us.</p>
<p>We are about to learn how to define new functions to perform useful
operations for us.</p>
<h3 class=inst>Instructions</h3>
<p>This is the <code>smiley</code> function:</p>
<pre>function smiley(x, y) {
moveTo(x, y);
color("yellow");
circle(0, 0, 50);
color("black");
circle(-20, 10, 7);
circle(20, 10, 7);
lineWidth(3);
path("g -20 -10 q 20 -10 0 -50 c");
goBack();
}</pre>
<p>You can put it in your code next to the <code>drawing</code>
function, and change that function to call it,
as <a href="sandbox/#drawing_function.js" target=_blank>shown
here</a>:</p>
<pre>function drawing() {
smiley(0, 0);
smiley(-100, 20);
smiley(100, 50);
}</pre>
<h3 class=ex>Explanation</h3>
<p>A function is, in effect, a shorthand for a piece of code. You
define it with the <code>function</code> word as shown above. This
produces a variable with the given name (<code>smiley</code>, in this
case) that refers to the chunk of code. The words after the function's
name—<code>(x, y)</code>—are the <em>parameters</em> to the function.
These are given a value when the function is used. For
example <code>smiley(0, 0)</code> will run the function's body with
both <code>x</code> and <code>y</code> holding the value zero.</p>
<p>One thing to be aware of is that variables defined inside functions
(including their parameters), are <em>local</em> to that function. So
if you have another function that also has a parameter
called <code>x</code>, such as <code>circle</code>, that
function's <code>x</code> and the one in <code>smiley</code> are
separate variables, and do not interfere with each other. Mentions
of <code>x</code> in <code>smiley</code> refer to that
function's <code>x</code>, and mentions in other functions refer to
whichever variable happens to be called <code>x</code> in that
function.</p>
<p><strong>Exercise:</strong> define a
function <code>smileySquadron</code> draws five smileys next to each
other by using a <code>while</code> loop. Once it works, use it to
draw a whole lot of smileys.</p>
<h2 class=step>Free-form</h2>
<h3 class=goal>Goal</h3>
<p>Write some kind of entertaining graphical program yourself.</p>
<h3 class=inst>Instructions</h3>
<p>Here are some tools to help you get started:</p>
<p><code>Math.random()</code> can be used to produce a random
(unpredictable) number between zero and one. Thus, <code>Math.random()
* 10</code> produces a number between zero and ten, and so on.</p>
<p><code>setInterval(func, n)</code> is a way to run a function
every <code>n</code> milliseconds. If you combine it with
the <code>clear</code> function to clear the screen, you can produce
an animation. You can find a
demonstration <a href="sandbox/#drawing_animate.js"
target=_blank>here</a>.</p>
<p>The <code>moveTo</code>, <code>rotate</code>, <code>scale</code>,
and <code>goBack</code> functions defined in the playground, when
combined with functions that call themselves, make it very easy to
define hierarchical, fractal drawing.
See <a href="sandbox/#drawing_tree.js" target=_blank>this tree</a> for
an example.</p>
<h3 class=ex>Explanation</h3>
<p>Doing is the best way to learn. Go nuts. Think of something
elaborate. Ask the coaches for help when you are unsure how to go
about something.</p>
<h2>And on</h2>
<p><a href="page3.html">→ To the third page</a>.</p>