/
index.html
628 lines (551 loc) · 37.5 KB
/
index.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
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta http-equiv='cache-control' content='max-age=0' />
<meta http-equiv='cache-control' content='no-cache' />
<meta http-equiv='expires' content='0' />
<meta http-equiv='expires' content='Tue, 01 Jan 1980 1:00:00 GMT' />
<meta http-equiv='pragma' content='no-cache' />
<meta name='viewport' content='width=device-width, initial-scale=1'>
<meta name='viewport' content='width=device-width'>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link rel='stylesheet' href='css/normalize.min.css'>
<link rel='stylesheet' href='css/style.css?v=1.0'></link>
<link rel='stylesheet' href='css/prism.css'></link>
<link ref='icon' type='image/x-icon' href='https://lmccart.github.io/DMA28-Interactivity/favicon.ico'>
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet'>
<script src='https://code.jquery.com/jquery-3.1.1.min.js' integrity='sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=' crossorigin='anonymous'></script>
<script src='main.js'></script>
<title>DMA252A: Interactivity</title>
</head>
<body>
<div class='container'>
<div class='content'>
<!-- NAV -->
<nav>
<ul id='links'>
<li class='button' data-id='syllabus'>Syllabus</li>
<li class='button' data-id='schedule'>Schedule</li>
<li class='button' data-id='studies'>studies</li>
<li class='button' data-id='resources'>Resources</li>
</ul>
</nav>
<!-- HEADING -->
<h1><a href=''>DMA252A: Programming Media</a></h1>
<!-- SYLLABUS -->
<div id='syllabus' class='block' style='display: block'>
<h2>Syllabus</h2>
<section>
Tuesday and Thursday 2–4:50pm<br>
UCLA Broad Art Center 4240
<br><br>
Professor: Lauren Lee McCarthy (<a href='mailto:[email protected]'>[email protected]</a>)
<br>(office hours: Tuesdays 5-6pm, Broad 3246)
<br><br>
LA: Jules Johnson (<a href='mailto:[email protected]'>[email protected]</a>)
</section>
<section>
<h3>Description</h3>
<p>This course is an introduction to coding within the visual arts, with a focus on interactivity. Writing code involves learning a different way of thinking and making. We will consider interactions with other people and the environment as the starting point for understanding our interactions with code. We’ll consider the roles of race, gender, sexuality, disability, and class within an increasingly software-driven world, and strategies of response as artists and designers. Can we understand software as inherently social? The ideas and skills taught in this course set a foundation that will serve as a platform for future learning within the BA program and beyond. The class is taught as a series of workshops and discussions with demonstrations and time to work.</p>
<p>This course asks a few questions:<br>
— How has software affected the visual arts?<br>
— What is the potential of software within the visual arts?<br>
— As a designer or artist, why would I want (or need) to write software?<br>
— What are the power relationships, inequities, and biases embedded within software and technology?
</p>
<p>
For this foundation we will focus on six sets of ideas:<br>
— Instructions and Statements<br>
— Variables and Response<br>
— Questions and Conditionals<br>
— Repetition and Loops<br>
— Functions and Parameters<br>
— Data and AI
</p>
</section>
<section>
<h3>Studies</h3>
<p>This class is built around six studies, each with a media assignment (reading + videos), a workshop, and a discussion about your finished study on the day that it’s due. Each study derives from the elements above. The final project will push one of the studies further. All studies will be completed in p5.js and are due at the start of class.</p>
<p>Studies may be turned in up to one week late for a one letter grade deduction off the grade. Work that is more than one week late will not be accepted. If you are absent, you are expected to turn in studies online by the deadline. It is possible that you may encounter save issues, editor or browser errors, computer crash, etc. It is highly recommended that you regularly click File > Download to save copies of your work in progress as zip files.</p>
</section>
<section>
<h3>Expectations</h3>
<p><span class='label'>Grading.</span> Grading is based on the studies, the final project, and active participation. Focus, articulation of ideas, keeping up with the work and assignments, and contribution to class discussions are all part of participation. All work will be evaluated based on (1) the fundamental idea you develop, (2) the way the “look and feel” of the work relates to the idea, and (3) the craft, meaning the details of the images, motion, and interaction. Outstanding work will receive As, good work will receive Bs, sufficient work that does nothing more than meet requirements will receive Cs.</p>
<span>The numeric breakdown for all assignments follow:</span>
<ul>
<li>Participation 10%</li>
<li>Study 1 10%</li>
<li>Study 2 10%</li>
<li>Study 3 10%</li>
<li>Study 4 10%</li>
<li>Study 5 10%</li>
<li>Study 6 10%</li>
<li>Final project 25%</li>
<li>Final project documentation 5%</li>
</ul>
<p><span class='label'><a onclick='openSection("#studies")'>Studies.</a></span> Studies are due at the start of class on the date assigned via the <a href='https://docs.google.com/spreadsheets/d/1ePtab7Yj9XtUtuCKWQROELVMLG4Hslk_cwzfOioyHFA/edit#gid=0'>studies spreadsheet</a>. Studies may be turned in up to one week late for a one letter grade deduction off the study grade. Work that is more than one week late will not be accepted. If you are absent, you are still expected to turn in studies online by the deadline. Extra time will not be given for work lost due to save issues, editor or browser errors, computer crash, etc. You should regularly click File > Download to save a copies of your work in progress as zip files. It would also be wise to make a backup of these online or on an external harddrive or USB stick in case your computer is lost.</p>
<p><span class='label'>Media.</span> Each study will be accompanied by a collection of readings, videos, and other media to look at. You are expected to read/watch/consume each item listed. Doing so will make this class much easier and more enjoyable. If it is clear you are not doing this work, your study grades will lower. All of the assigned readings from the course will be from <a href='https://www.amazon.com/Getting-Started-p5-js-Interactive-JavaScript-dp-1457186772/dp/1457186772/ref=mt_paperback?_encoding=UTF8&me=&qid=' target='_blank'>Getting Started with p5.js</a> or located online, you will need to purchase this textbook.</p>
<p><span class='label'>Participation.</span> Participation is critical to passing and enjoying this class. Do the work, share your thoughts, ask questions, prepare for meetings, offer feedback during critiques. This class is meant to be a safe space in which you feel encouraged and supported in learning and taking creative risks. This means being aware and considerate of different backgrounds, perspectives, and identities. Respect each other and this space we are building together. Don’t assume, ask. Remain open, be willing to take responsibility, apologize, and learn. Help each other in this. If there are concerns please let me or Hye Min know as soon as possible.</p>
<p><span class='label'>Attendance.</span> I have the strong expectation that you will join for each class and workshop session, but I won’t be keeping a scored attendance record this quarter. If something happens and you can't join the class, please email me. If you feel frustrated or you come across other problems, please communicate with me directly and quickly.</p>
</section>
<section>
<h3>Commitment to Diversity and Safer Spaces</h3>
<p>We understand the classroom as a space for practicing freedom; where one may challenge psychic, social, and cultural borders and create meaningful artistic expressions. To do so we must acknowledge and embrace the different identities and backgrounds we inhabit. This means that we will use preferred pronouns, respect self-identifications, and be mindful of special needs. Disagreement is encouraged and supported, however our differences affect our conceptualization and experience of reality, and it is extremely important to remember that certain gender, race, sex, and class identities are more privileged while others are undermined and marginalized. Consequently, this makes some people feel more protected or vulnerable during debates and discussions. A collaborative effort between the students, TA, and instructor is needed to create a supportive learning environment. While everyone should feel free to experiment creatively and conceptually, if a class member points out that something you have said or shared with the group is offensive, avoid being defensive; instead approach the discussion as a valuable opportunity for us to grow and learn from one another. Alternatively if you feel that something said in discussion or included in a piece of work is harmful, you are encouraged to speak with the instructor or TA. (<a href='https://github.com/voidlab/diversity-statement'>tx voidLab!</a>)</p>
</section>
<section>
<h3>Disability Services</h3>
<p>UCLA strives to make all learning experiences as accessible as possible. If you anticipate or experience academic barriers based on a disability, please let me know as soon as possible. It is necessary for you to register with the <a href='http://www.cae.ucla.edu/'>UCLA Center for Accessible Education</a> so that we can establish reasonable accommodations. After registration, make arrangements with me to discuss how to implement these accommodations.</p>
</section>
</div>
<!-- SCHEDULE -->
<div id='schedule' class='block'>
<h2>Schedule</h2>
<section>
<table>
<!-- WEEK 1 -->
<tr>
<td>WEEK 1</td>
<td>Tu 10/3</td>
<td>
Introduction<br>
Assign Study 1
</td>
</tr>
<tr class='spacer'></tr>
<tr>
<td></td>
<td>Th 10/5</td>
<td>
Lab<br>
DUE: <a onclick="openSection('#studies', 'p1')">Study 1, part 1</a><br>
</td>
</tr>
<tr class='weekspacer'></tr>
<!-- WEEK 2 -->
<tr>
<td>WEEK 2</td>
<td>Tu 10/10</td>
<td>
DUE: <a onclick="openSection('#studies', 'p1')">Study 1, part 2</a><br>
Assign Study 2
</td>
</tr>
<tr class='spacer'></tr>
<tr>
<td></td>
<td>Th 10/12</td>
<td>
Lab<br>
DUE: <a onclick="openSection('#studies', 'p2')">Study 2, part 1</a><br>
</td>
</tr>
<tr class='weekspacer'></tr>
<!-- WEEK 3 -->
<tr>
<td>WEEK 3</td>
<td>Tu 10/17</td>
<td>
DUE: <a onclick="openSection('#studies', 'p2')">Study 2, part 2</a><br>
Assign Study 3
</td>
</tr>
<tr class='spacer'></tr>
<tr>
<td></td>
<td>Th 10/19</td>
<td>
NO CLASS, MFA SHOW!<br>
DUE: <a onclick="openSection('#studies', 'p3')">Study 3, part 1</a><br>
</td>
</tr>
<tr class='weekspacer'></tr>
<!-- WEEK 4 -->
<tr>
<td>WEEK 4</td>
<td>Tu 10/24</td>
<td>
Studio
</td>
</tr>
<tr class='spacer'></tr>
<tr>
<td></td>
<td>Th 10/26</td>
<td>
DUE: <a onclick="openSection('#studies', 'p3')">Study 3, part 2</a><br>
Lab<br>
</td>
</tr>
<tr class='weekspacer'></tr>
<!-- WEEK 5 -->
<tr>
<td>WEEK 5</td>
<td>Tu 10/31</td>
<td>
DUE: <a onclick="openSection('#studies', 'p4')">Study 4, part 1</a>
</td>
</tr>
<tr class='spacer'></tr>
<tr>
<td></td>
<td>Th 11/2</td>
<td>
Lab<br>
</td>
</tr>
<tr class='weekspacer'></tr>
<!-- WEEK 6 -->
<tr>
<td>WEEK 6</td>
<td>Tu 11/7</td>
<td>
DUE: <a onclick="openSection('#studies', 'p4')">Study 4, part 2</a><br>
Assign Study 5
</td>
</tr>
<tr class='spacer'></tr>
<tr>
<td></td>
<td>Th 11/9</td>
<td>
Lab
</td>
</tr>
<tr class='weekspacer'></tr>
<!-- WEEK 7 -->
<tr>
<td>WEEK 7</td>
<td>Tu 11/14</td>
<td>
Studio
</td>
</tr>
<tr class='spacer'></tr>
<tr>
<td></td>
<td>Th 11/16</td>
<td>
DUE: <a onclick="openSection('#studies', 'p5')">Study 5</a><br>
Assign Final Project
</td>
</tr>
<tr class='weekspacer'></tr>
<!-- WEEK 8 -->
<tr>
<td>WEEK 8</td>
<td>Tu 11/21</td>
<td>
DUE: <a onclick="openSection('#studies', 'p6')">Final Project, part 1</a><br>
Individual meetings
</td>
</tr>
<tr class='spacer'></tr>
<tr>
<td></td>
<td>Th 11/23</td>
<td>
NO CLASS: THANKSGIVING
</td>
</tr>
<tr class='weekspacer'></tr>
<!-- WEEK 9 -->
<tr>
<td>WEEK 9</td>
<td>Tu 10/28</td>
<td>
Studio
</td>
</tr>
<tr class='spacer'></tr>
<tr>
<td></td>
<td>Th 10/30</td>
<td>
Lab
</td>
</tr>
<tr class='weekspacer'></tr>
<!-- WEEK 10 -->
<tr>
<td>WEEK 10</td>
<td>Tu 11/5</td>
<td>
DUE: <a onclick="openSection('#studies', 'p6')">Final Project, part 2</a>
</td>
</tr>
<tr class='spacer'></tr>
<tr>
<td></td>
<td>Th 11/7</td>
<td>
No lab. Have a nice break!
</td>
</tr>
<tr class='weekspacer'></tr>
</table>
</section>
</div>
<!-- studies -->
<div id='studies' class='block'>
<h2>studies</h2>
<section>
<p>Studies are due at the start of class on the date assigned.</p>
<h3 id='p1'>Study 1: Instruct</h3>
<div id='p1-content' class='toggle' style='display:none;'>
<h4>Media</h4>
Getting Started with p5.js:
<ul>
<li>1/Hello</li>
<li><s>2/Starting to Code</s> (skip this)</li>
<li>3/Draw</li>
</ul>
YouTube:
<ul>
<li><a href="https://www.youtube.com/watch?v=yPWkPOfnGsw">1.1: Code! Programming for Beginners with p5.js</a></li>
<li><a target='_blank' href="https://www.youtube.com/watch?v=MXs1cOlidWs">1.2: p5.js Web Editor</a></li>
<li><a target='_blank' href="https://www.youtube.com/watch?v=c3TeLi6Ns1E">1.3: Shapes & Drawing</a></li>
<li><a target='_blank' href="https://www.youtube.com/watch?v=riiJTF5-N7c">1.4: Color</a></li>
<li><a target='_blank' href="https://www.youtube.com/watch?v=LuGsp5KeJMM">1.5: Errors & Console</a></li>
<li><a target='_blank' href="https://www.youtube.com/watch?v=xJcrPJuem5Q">1.6: Code Comments</a></li>
</ul>
<p>Read and watch all of the media. Type and run the programs as you read the text. Create an account and write the code at <a href='https://editor.p5js.org/' target='_blank'>editor.p5js.org</a>. Note: The editor Dan is using from tutorial 2.1 forward is different from the online editor, but all of the code is the same.</p>
<h4>Description</h4>
Part 1 due 10/5:
<ul>
<li>Spend some time looking at instructions or guides for using various technologies. This might mean a setup guide for a piece of technology, cooking instructions, a TikTok video giving advice, an assembly instructions for Ikea furniture, etc. Think broadly about the terms “technology” and “instructions”. Bring one or two you like to lab on Thursday.</li>
<li>In partners, pick an activity that you both do regularly. Each partner creates a set of instructions for how they perform this activity. Exchange instruction sets and follow them as best you can.</li>
</ul>
Part 2 due 10/10:
<ul>
<li>Use p5.js to create a visual representation interpreting one, both, or a combination of your instruction sets. Each of you will create your own study but they should visually relate to each other somehow.
Please feel free to be as expansive as you like with this assignment.
You might choose to take only a small part of the instruction set, draw from your experience of performing it, or riff on a reflection you had during the first part of the exercise.
See if you can connect this study to your practice in some way that feels meaningful.
If you would like to push beyond what has been introduced code-wise so far, you are welcome but not expected to.
Think of the assignment as a prompt to structure a new experiment in your work.
Come prepared to share in class.</li>
</ul>
</div>
<h3 id='p2'>Study 2: Text + Sound (DUE 10/17)</h3>
<div id='p2-content' class='toggle' style='display:none;'>
<h4>Media</h4>
Getting Started with p5.js:
<ul>
<li>4/Variables</li>
<li>5/Response (pages 59-63)</li>
</ul>
YouTube:
<ul>
<li><a target='_blank' href="https://www.youtube.com/watch?v=RnS0YNuLfQQ">2.1: Variables in p5.js (mouseX, mouseY)</a></li>
<li><a target='_blank' href="https://www.youtube.com/watch?v=Bn_B3T_Vbxs">2.2: Variables in p5.js (Make your own)</a></li>
<li><a target='_blank' href="https://www.youtube.com/watch?v=nicMAoW6u1g">2.4: The map() function</a></li>
<li><a taregt='_blank' href="https://www.youtube.com/playlist?list=PLRqwX-V7Uu6aFcVjlDAkkGIixw70s7jpW">17: p5.js Sound Tutorial</a></li>
</ul>
<!-- Online:
<ul>
<li><a target='_blank' href='https://itp.nyu.edu/classes/performinguser/files/2016/03/Haraway-CyborgManifesto-1.pdf'>Donna Haraway, Cyborg Manifesto (optional but recommended!)</a></li>
</ul> -->
<p>Read and watch all of the media in time for class on Thursday. Type and run the programs as you read the text.</p>
<h4>Description</h4>
Part 1 due 10/12:
<ul><li>
Write a short text that you will read/perform for the class. It could be a manifesto for your practice, a monologue for a character or element in a piece,
a rant, a poem, a set of instructions, or anything else. How can you use this short piece of writing to explore some new ideas in your work?
Bring the text and some intial ideas for your study to class on Thursday.
</li></ul>
Part 2 due 10/17:
<ul><li>
Based on the text, create an audioreactive piece that you will use to perform the text.
Using the <a href='https://editor.p5js.org/lmccart/sketches/thuaoBZ7_' target="_blank">provided code template</a>, make your study react to audio, changing as the volume of your voice changes.
Rehearse your text performance ahead of time, modulating the volume of your voice as needed to control the piece.<br><br>
Options:<br>
Working with a partner, intercut your two texts to create a script for a performed conversation. This could be abstract.<br>
Dig deeper into the <a href="https://p5js.org/reference/#/libraries/p5.sound" target="_blank">p5.sound</a> library and incorporate other audio responsive functionality.
</li></ul>
</div>
<h3 id='p3'>Study 3: One Loop Story (DUE 10/26)</h3>
<div id='p3-content' class='toggle' style='display:none;'>
<h4>Media</h4>
Getting Started with p5.js:
<ul>
<li>8/Motion</li>
<li>7/Translate, Rotate, Scale</li>
</ul>
<ul>
<li><a href='https://www.youtube.com/watch?v=1Osb_iGDdjk' target='_blank'>3.1: Introduction to Conditional Statements</a>
<li><a href='https://www.youtube.com/watch?v=LO3Awjn_gyU' target='_blank'>3.2: The Bouncing Ball</a>
<li><a href='https://www.youtube.com/watch?v=o9sgjuh-CBM' target='_blank'>9.1: Transformations Pt.1 (Translate, Rotate, Push/Pop)</a></li>
<li><a href='https://www.youtube.com/watch?v=nfmV2kuQKwA' target='_blank'>2.5: The random() Function</a>
</ul>
Web:
<ul>
<li><a target='_blank' href="https://github.com/golanlevin/lectures/blob/master/lecture_loops/README.md">LOOPs by Golan Levin</a></li>
</ul>
<p>Read all of the media in time for class on Thursday. Type and run the programs as you read the text.</p>
<h4>Description</h4>
Part 1 due 10/24:
<ul><li>
Pick one question to ask of other people. For a few days, ask as many people as you can your question, take notes on their answers.
You could ask a friend or family member, a classmate, someone you see in your daily life, someone far away, a stranger...
</li></ul>
Part 2 due 10/26:
<ul><li>
Create a looping animation inspired by an answer to your question.
You may want to start by writing a one sentence story to focus things.
See examples <a href='http://monkeybicycle.net/one-sentence-stories/'>here</a> and <a href='https://web.archive.org/web/20190808135338/http://www.roarreadingseries.com/one-sentence-story-contest.html'>here</a> and <a href='http://web.archive.org/web/20140528015912/http://onesentence.org/'>here</a>.
</li></ul>
</div>
<h3 id='p4'>Study 4: Tool (DUE 11/7)</h3>
<div id='p4-content' class='toggle' style='display:none;'>
<h4>Media</h4>
Getting Started with p5.js:
<ul>
<li>5/Response (whole chapter this time)</li>
<li><a href='http://amodern.net/wp-content/uploads/2016/05/2010_Original_Rosa-Menkman-Glitch-Studies-Manifesto.pdf' target='_blank'>Rosa Menkman, Glitch Studies Manifesto</a></li>
</ul>
YouTube:
<ul>
<li><a target='_blank' href="https://www.youtube.com/watch?v=1Osb_iGDdjk">3.1: Introduction to Conditional Statements</a></li>
<li><a target='_blank' href="https://www.youtube.com/watch?v=r2S7j54I68c">3.3: Else and Else if, AND and OR</a></li>
<li><a target='_blank' href="https://www.youtube.com/watch?v=Rk-_syQluvc">3.4: Boolean Variables</a></li>
</ul>
<p>Read and watch all of the media in time for class on Monday. Type and run the programs as you read the text.</p>
<h4>Description</h4>
<p>There's a long history of writing software to draw on computers. From the light pen, to the mouse, to touch screens, some of these programs are basic and some are bursting with features; some are serious and others are whimsical; some are general and others are as unique as the individual who wrote them. This project has three parts. You will make a separate sketch for each part of the project, the canvas for each sketch should be 600 x 600 pixels.</p>
<p>Create a drawing tool in the tradition of <a href='https://jamesfriend.com.au/pce-js/' target='_blank'>Kid Pix</a>. Include, at the minimum, at least two different tools for making marks and two other features. Create an interface to select which tool to draw with, by creating buttons and/or by using the keyboard or some other input. Have a clear point of view about drawing that is expressed through the design of your program. How is your drawing program unique and what is it for?</p>
<p>Feel free to stretch the meaning of "drawing tool" and think expansively about mark making. Consider the interface — you could make something for screen, phone, tablet, using audio input, accelerometer, images, text, touch, etc. We'll explore some of these topics next week.</p>
<p>PART 1 (DUE 10/31)<br>
Bring your ideas and sketches for your tool to class. What is the core idea of this tool? What is it used for? Who is the intended user? What affordances and limitations will it have?
We'll spend some time breaking down how to approach each one with code.
</p>
<p>PART 2 (DUE 11/7)<br>
Bring your completed tool to class. We'll spend time trying each one out.
</p>
</div>
<h3 id='p5'>Study 5: Collective (DUE 11/16)</h3>
<div id='p5-content' class='toggle' style='display:block;'>
<h4>Media</h4>
Getting Started with p5.js:
<ul>
<li>7/Media</li>
<li>9/Functions</li>
<li>11/Arrays</li>
</ul>
YouTube:
<ul>
<li><a target="_blank" href="https://www.youtube.com/watch?v=rO6M5hj0V-o&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=36&t=1s&ab_channel=TheCodingTrain">Uploading Media Files</a></li>
<li><a target="_blank" href="https://www.youtube.com/watch?v=wRHAitGzBrg&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=21&ab_channel=TheCodingTrain">5.1: Function Basics</a></li>
<li><a target="_blank" href="https://www.youtube.com/watch?v=zkc417YapfE&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=22&ab_channel=TheCodingTrain">5.2: Function Parameters and Arguments</a></li>
<li><a target="_blank" href="https://www.youtube.com/watch?v=qRnUBiTJ66Y&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=23&ab_channel=TheCodingTrain">5.3: Functions and Return</a></li>
<li><a target="_blank" href="https://www.youtube.com/watch?v=VIQoUghHSxU&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=28&ab_channel=TheCodingTrain">7.1: What is an array?</a></li>
<li><a target="_blank" href="https://www.youtube.com/watch?v=RXWO3mFuW-I&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=29&ab_channel=TheCodingTrain">7.2: Arrays and Loops</a></li>
</ul>
<h4>Description</h4>
<p>
Working in partners, make a work that is collectively created in some way. This may be an installation that different people interact and contribute to.
It may be something created by media or text collectively sourced. Or anything else you can imagine. The result should be a dynamically
evolving visual, textual, sonic, or performative artifcat that develops from a novel interaction betwen friends, siblings, collaborators,
neighbors, or strangers. Carefully consider the kinds of actions or authorship you hope to elicit, and how the interaction design of
your system influences individual (and hence collective) behavior. Paradoxically, the tightest constraints can often produce the most
interesting results. How do you create the conditions for unexpected emergent behaviors to arise?
</p>
Visit one of the following:
<ul>
<li>Nov 8 (W) — <a href="https://hammer.ucla.edu/programs-events/2023/tanya-aguiniga-ambos-art-made-between-opposite-sides" target="_blank">Tanya Aguiñiga & AMBOS: Art Made Between Opposite Sides (Hammer)</a></li>
<li>Nov 9–10 (W/Th) — <a href="https://www.redcat.org/events/2023/takemehome" target="_blank">Dimitri Chamblas with Kim Gordon, takemehome (REDCAT)</a></li>
<li>Nov 12++ (Su) — <a href="https://www.moca.org/exhibition/paul-pfeiffer-prologue-to-the-story-of-the-birth-of-freedom" target="_blank">Paul Pfeiffer: Prologue to the Story of the Birth of Freedom (MOCA)</a></li>
<li>Ongoing — <a href="https://www.redcat.org/events/2023/the-feminist-art-program" target="_blank">The Feminist Art Program (1970-1975): Cycles of Collectivity</a></li>
<li>Ongoing — <a href="https://hammer.ucla.edu/exhibitions/2023/made-la-2023-acts-living?gad=1&gclid=Cj0KCQiAuqKqBhDxARIsAFZELmKJVB6oW-sk-uXzvgsExqtGZTjs1FZwK9cLm_aMj7t7gNC95gLxHAMaAuzQEALw_wcB" target="_blank">Made in LA (Hammer)</a></li>
</ul>
Consider whether the work feels collectively created to you. What do you find interesting? What do you find yourself reacting to? What ideas does it give you for your own project?
</div>
<h3 id='p6'>Final Project: Iterate and Refine (DUE 12/5)</h3>
<div id='p6-content' class='toggle' style='display:none;'>
<h4>Media</h4>
Getting Started with p5.js:
<ul>
<li>9/Objects</li>
</ul>
YouTube:
<ul>
<li><a target="_blank" href="https://thecodingtrain.com/tracks/code-programming-with-p5-js/code/6-objects/1-intro">Object-Oriented Programming with ES6</a></li>
<li><a target="_blank" href="https://thecodingtrain.com/tracks/code-programming-with-p5-js/code/6-objects/2-classes">Classes in ES6</a></li>
<li><a target="_blank" href="https://thecodingtrain.com/tracks/code-programming-with-p5-js/code/6-objects/3-constructor">Constructor Arguments with Classes</a></li>
<li><a target="_blank" href="https://thecodingtrain.com/tracks/code-programming-with-p5-js/code/6-objects/4-editor-js-files">JavaScript Files in the p5.js Web Editor</a></li>
</ul>
<h4>Description</h4>
<p>Use study 1, 2, 3, 4, or 5 as a prototype for your final project. Expand the idea beyond the original one-week study into a project that can be completed for presentation on 12/5.</p>
Part 1 due 11/21:
<ul>
<li>Prepare a pecha kucha presentation on your final project idea, including background and references — other artists, projects, events, research that will inform the development of the project.
The presentation will be in google slides, with 15 auto-advancing slides displayed for 20 seconds each, totaling a rapid five minutes presentation.
Feel free to embrace the fun, casual, and chaotic.</li>
<li>Create 15 <b>auto-advancing</b> slides by duplicating <a href="https://docs.google.com/presentation/d/15AfEqEJC_0Ub_iAOGFRUlGjXKpDGO39K_Te8uB_5xXU/edit?usp=sharing" target="_blank">this template</a>.</li>
</ul>
Part 2 due 12/5:
<ul>
<li>Come prepared to share your project in class.</li>
</ul>
</div>
</section>
</div>
<!-- RESOURCES -->
<div id='resources' class='block'>
<h2>Resources</h2>
<section>
<h3 id='javascript'>JAVASCRIPT</h3>
<ul>
<li><a target='_blank' href='https://docs.google.com/presentation/d/1Ml4xaR1Z8DX-UbYfr1MiToWDBfwfR5DqQ42ywmL2Em0/edit?usp=sharing'>Tips for Debugging</a> (thanks NYU ITP Residents)</li>
<li><a href='http://p5js.org'>p5js.org</a> - p5.js website, includes library, reference, examples, and tutorials</li>
<li><a href='https://www.amazon.com/Getting-Started-p5-js-Interactive-JavaScript-dp-1457186772/dp/1457186772/ref=mt_paperback?_encoding=UTF8&me=&qid=' target='_blank'>Getting Started with p5.js</a></li>
<li><a href='https://forum.processing.org/two/'>p5.js forum</a> - good place for p5.js programming questions</li>
<li><a href='https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA'>Daniel Shiffman's Coding Train videos</a> - p5.js tutorials</li>
<li><a href='https://www.codecademy.com/learn/javascript'>Codecademy: JavaScript</a></li>
<li><a href='https://www.amazon.com/Make-Interactive-Graphics-JavaScript-Processing/dp/1457186772'>Getting Started with p5.js</a> - by Lauren McCarthy, Casey Reas, and Ben Fry, O'Reilly 2016</li>
<li><a href='https://www.kadenze.com/courses/introduction-to-programming-for-the-visual-arts-with-p5-js/info'>Intro to programming for the visual arts with p5.js</a> - online class from kadenze, free with sign up</li>
<li><a href='https://github.com/getify/You-Dont-Know-JS'>You Don't Know JS</a></li>
</ul>
</section>
<section>
<h3 id='html_css'>HTML & CSS</h3>
<ul>
<li><a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element'>HTML Element Reference</a></li>
<li><a href='https://www.codecademy.com/articles/glossary-html'>Codecademy HTML Glossary</a></li>
<li><a href='http://htmldog.com/references/css/properties/'>CSS Property Reference</a></li>
<li><a href='https://www.codecademy.com/learn/web'>Codecademy: HTML & CSS</a></li>
<li><a href='https://www.khanacademy.org/computing/computer-programming/html-css'>Khan Academy: Intro to HTML & CSS</a></li>
<li><a href='https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction'>MDN: Intro to HTML</a></li>
<li><a href='http://learn.shayhowe.com/html-css/'>Learn HTML & CSS</a> - another great tutorial</li>
<li><a href='http://learnlayout.com/'>Learn CSS Layout</a></li>
<li><a href='https://css-tricks.com/snippets/css/a-guide-to-flexbox/'>Guide to Flexbox</a></li>
</ul>
</section>
<section>
<h3 id='html_css'>Class Notes & Examples</h3>
<ul>
<li><a href='https://docs.google.com/presentation/d/1k3sZnxzyikpE_8o0d7DrqLW-5f9-NtbiblW3SQwOVvA/edit?usp=sharing' target='_blank'>week 1 slides</li>
<li><a href='https://docs.google.com/presentation/d/1mxTkUFkx4I8WXuwnugoVO-jpV9K31xRalPZOHEvaFDY/edit?usp=sharing' target='_blank'>week 4 slides</li>
<li><a href='https://docs.google.com/presentation/d/1y_0Ewd8w_vuYWflLDsCxh0cE4BCPbMWd-YFyC8__p5g/edit?usp=sharing' target='_blank'>week 5 slides</li>
<li><a href='https://docs.google.com/presentation/d/1zgjYGLj_7Mabai8SFXoZ140tXIlIeTNRYmDtxFKZpng/edit?usp=sharing' target='_blank'>week 6 slides</li>
<li><a href='https://docs.google.com/presentation/d/1UfsqCrX4xYAK_ELEyzR1AkU4xFpFhTxEY9y8jP7lsZg/edit?usp=sharing' target='_blank'>week 8 slides</li>
<li><a href='https://docs.google.com/presentation/d/1A6Z1TsdaUQeNXLGGzJzpGoRbWOxM4TILlN3yolt5HXM/edit?usp=sharing' target='_blank'>week 9 slides</li>
<li><a href='https://publicapis.io/' target='_blank'>public apis list</a></li>
<li><a href='https://docs.google.com/spreadsheets/d/1wZhPLMCHKJvwOkP4juclhjFgqIY8fQFMemwKL2c64vk/edit#gid=0' target='_blank'>data is plural resource</a></li>
</ul>
</section>
<section>
<h3 id='html_css'>Inspiration</h3>
<ul>
<li><a href='http://www.digiart21.org/' target='_blank'>21st Century Digital Art</a></li>
<li><a href="http://creativeapplications.net" target='_blank'>Creative Applications</a></li>
<li><a href="http://openprocessing.org" target='_blank'>Open Processing</a></li>
<li><a href="http://eyeofestival.com" target='_blank'>Eyeo Festival</a> talks on <a href="https://vimeo.com/eyeofestival">Vimeo</a></li>
<li><a href="http://formandcode.com/links" target='_blank'>Artists featured in Form+Code</a></li>
</section>
</div>
</div>
</div>
<!-- <div id='updated'>Last updated: <span id='updated_date'></span></div> -->
</body>
</html>