forked from scrippscollege/MS_139_S24
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathassignment-1.html
275 lines (242 loc) · 10.2 KB
/
assignment-1.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Coded Poetry 2024 – Assignment 1</title>
<link rel="stylesheet" href="style.css" />
<script src="/script.js" defer></script>
</head>
<!-- this page looks at nav, background image/video -->
<header>
<h1>
<a href="index.html">Coded Poetry</a>
</h1>
</header>
<nav>
<ul>
<li>
<a
href="syllabus.html"
>Syllabus</a
>
</li>
<li id="selected">
<a href="assignments.html">Assignments</a>
</li>
<li>
<a href="tutorials.html">Tutorials</a>
</li>
<li>
<a href="people.html">People</a>
</li>
</ul>
</nav>
<main>
<img src="https://diaryofdennis.files.wordpress.com/2014/06/fly-on-the-wall.jpg" style="width:70%"/>
<h2>Fly on the Wall</h2>
<h3>Prompts</h3>
<p>What kind of poems might you write if you were a fly on the wall?</p>
<p>How might you observe your most intuitive, energetic, and even impulsive voice?</p>
<p>Try to:<br/>
Write on a piece of paper using a "fast" pen. So that your thoughts are recorded onto the paper as soon as they land on your mind.</p>
</p>
<h3>Coding Requirements</h3>
<p>In p5, translate your list(s) into arrays. Use text() and random() to create a very simple poem generator.</p>
<h3>Submission Guidelines</h3>
<p>Please submit your sketch to Canvas Assignment 1.</p>
<h3>Tutorials</h3>
<ul>
<li>2.1 System defined variables – mouseX, mouseY (<a href="https://www.youtube.com/watch?v=7A5tKW9HGoM&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=8">YouTube</a>), Coding Train</li>
<li>2.2 User defined variables (<a href="https://www.youtube.com/watch?v=dRhXIIFp-ys&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=9">YouTube</a>), Coding Train</li>
<li> Array (<a href="https://www.youtube.com/watch?v=VIQoUghHSxU">YouTube</a>), Coding Train </li>
<li>2.4 random() (<a href="https://www.youtube.com/watch?v=POn4cZ0jL-o&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=11">YouTube</a>), Coding Train</li>
<li>7.2 Mouse & Key Inputs (<a href="https://www.youtube.com/watch?v=asvnmtVjeEk">YouTube</a>), Xin Xin</li>
</ul>
<h3>Study Guide</h3>
<div id="basic"><h2>Working with Local Data</h2></div>
<h3>
Loading & Displaying Data
</h3>
<p>
<a href="https://p5js.org/reference/#/p5/loadTable">loadTable()</a>
is a p5 function that reads the contents of a CSV file and creates a
<a href="https://p5js.org/reference/#/p5.Table">p5.Table</a> object with
its values. The CSV file must either be located in the sketch's folder
or elsewhere online.
</p>
<div class="full-width-box">
<img
src="https://cdn.images.fecom-media.com/HE1546624_160911-HOP-ENG-P01.jpg?width=348"
/>
</div>
<p>
Using loadTable() with a local CSV file, let's try to recreate the
"sentence flip book" children often use to learn how to construct
sentences. First, open your desktop spreadsheet software (e.g. Excel) or
Google spreadsheet, and let's create a couple possible sentences for the
flip book. In the example below I'm using a name, a verb, and a food
item to construct every sentence. Keep in mind that these sentences must
follow the rules of modular design, so that different combinations of
the words would still make out logical sentences.
</p>
<p>
Once you're done with that, download the spreadsheet as a CSV file, and
upload it to your p5 sketch folder. When you click on the CSV file
inside the p5 editor, you should see something like this:
</p>
<div class="full-width-box">
<img
src="https://cdn.glitch.com/5dd99b18-3ebb-45c5-90fb-b4b67dc2e128%2FScreen%20Shot%202020-02-26%20at%201.25.08%20AM.png?v=1582698317988"
/>
</div>
<p>
If you look carefully, you might notice that every new line creates a
new row, and every comma creates a new column. You can edit your CSV
file inside the editor if you decide that something needs to change.
</p>
<p>
Great! Now let's load the table into the sketch! Just like loading any
other files in p5, you need to load the CSV file using
<i>function preload()</i>. Also, inside the p5.Table object, there are a
couple methods you should know about in order to properly load and
display the data:
</p>
<ul>
<li class="bullet">
<a href="https://p5js.org/reference/#/p5.Table/getString"
>getString(row, column)</a
>: retrieves a String value from the Table's specified row and column.
Based on the example above, <i>getString(0,0)</i> will retrieve the
word "Anshuman", and <i>getString(3,2)</i> will retrieve "dumplings"
</li>
<li class="bullet">
<a href="https://p5js.org/reference/#/p5.Table/getColumnCount"
>getColumnCount()</a
>
or
<a href="https://p5js.org/reference/#/p5.Table/getRowCount"
>getRowCount()</a
>: returns the total number of columns or rows in a Table. It's used
in a similar way as array.length
</li>
</ul>
<div class="full-width-box">
<iframe src="https://editor.p5js.org/xinxin/embed/hb73hbbK"></iframe>
<p>↳ click to randomize sentence</p>
<p>
To put it all together, I have used <i>random()</i> to generate three
different row numbers within the range of <i>getRowCount()</i> at the
start of the sketch as well as when every time mouse is pressed. And I
use <i>text()</i> three times to load the possible sentences
individually:
</p>
</div>
<div class="full-width-box">
<script src="https://gist.github.com/xinemata/aacbce3f23bcddff8b82b8380c7987e5.js"></script>
</div>
<a href="https://editor.p5js.org/xinxin/sketches/hb73hbbK"
>Link to Source Code</a
>
<p>
So while you're trying this out on your own, you might have noticed that
a couple lines are being repeated a couple different times to do similar
things. You could try to combine them into for Loops to write less lines
of code. However, you'd need to turn your <i>row1</i>, <i>row2</i>, and
<i>row3</i> variables into a <i>row[]</i> array in order to load them
properly. Here's the
<a href="https://editor.p5js.org/xinxin/sketches/n_1zbjwh"
>optimized version</a
>
of the code above.
</p>
<h3>
Overwriting Data
</h3>
<p>
Now that we know how to load data from a CSV file and turn it into a
p5.Table object. Let's learn how to overwrite a cell value inside a
table object using
<a href="https://p5js.org/reference/#/p5.Table/set"
>set(row, column, value)</a
>. Add the lines below to the end of setup() inside the previous code
example:
</p>
<script src="https://gist.github.com/xinemata/ffe3e8bd8d75785e21a245380834581b.js"></script>
<p>
Now when you click on the screen, you should see that column 0 - row 0
has now been set to "Chloe":
</p>
<iframe src="https://editor.p5js.org/xinxin/embed/SBGCIRZo"></iframe>
<a href="https://editor.p5js.org/xinxin/sketches/SBGCIRZo"
>Link to Source Code</a
>
<p>
There are
<a href="https://p5js.org/reference/#/p5.Table">many other methods</a>
you could use under p5.Table that goes beyond what has been mentioned
above. Take a look at them to get a sense of what's possible.
</p>
<div id="join">
<h2>
JavaScript join()
</h2>
</div>
<p>
In the examples above, each word has a position X and Y. What if we want
to connect the words together so that there are no spacings in between?
This is where
<a
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join"
>JavaScript join()</a
>
comes in handy. join() is a method that connects all the items inside an
array together to form a string. For instance, copy & paste the code
below into your p5 editor:
</p>
<script src="https://gist.github.com/xinemata/c9be3e001d14eda3b34b1b6657939a95.js"></script>
<p>
Now try to replace <i>sentence.join(" ")</i> to
<i>sentence.join("-")</i>:
</p>
<script src="https://gist.github.com/xinemata/7b896ff92dfb127dda6ee5e31eb288f7.js"></script>
<p>
You will see that console now prints 'I-<3-programming'. Essentially,
join() makes all the items inside an array hold hands with each other!
</p>
<p>
Next, let's add join() and splice() to our previous example, so that
when mouse is pressed, splice() will add sentences to an empty array,
and join() will help to format the sentence.
</p>
<iframe src="https://editor.p5js.org/xinxin/embed/Mqn01a4f"></iframe>
<p>↳ click to add sentence to the array</p>
<script src="https://gist.github.com/xinemata/5105f0f6f122081e05a3b4ff2fade9b7.js"></script>
<a href="https://editor.p5js.org/xinxin/sketches/Mqn01a4f"
>Link to Source Code</a
>
<div id="substring">
<h2>
JavaScript substring()
</h2>
</div>
<p>
The
<a
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring"
>substring()</a
>
method lets you access and load part of a string. The method takes up to
two parameters: the start of the index and the end of the index. By
using this method, we could create a typewriter effect inside our
sketch. This makes the reading experience more engaging and less
daunting, especially when you're displaying a large amount of texts:
</p>
<iframe src="https://editor.p5js.org/xinxin/embed/_HvJLGKo"></iframe>
<p>↳ click to see the typewriter effect</p>
<script src="https://gist.github.com/xinemata/8b4534d0d9de9cb84aa216715fa85270.js"></script>
<a href="https://editor.p5js.org/xinxin/sketches/_HvJLGKo"
>Link to Source Code</a
>
</main>
</html>