-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathassignment-1.html
185 lines (170 loc) · 5.67 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Intro to Computational Media 2023 – 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">Intro to Computational Media</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="../MS_053_F23/assets/2020_1_ardak.png" style="width:50%" alt="a brown woman in red dress wearing a gold necklace."/>
<p>The Necklace (2020) by Ardak Mukanova
</p>
<h2>Lost and Found</h2>
<h3>Objective</h3>
<p>
Draw a memory of an object described to you in plain language through
code.
</p>
<h3>Description</h3>
<p>
We remember the past through words and images. Oftentimes when we describe
our memories to our friends, our spoken words construct an image in their
mind. This image is an interpretation of our memories and inevitably will
look very different from the image in our mind. This is because unlike a
computer programming language, the human language is spectacularly
ambiguous. It is always approximate and never fully accurate.
</p>
<p>For example, to describe a smiley face:</p>
<details>
<summary>Human Language</summary>
<p>The person is looking straight ahead and carrying a smile.</p>
</details>
<details>
<summary>Computer Language</summary>
<code>
noFill();<br />
strokeWeight(4);<br />
stroke(0);<br />
ellipse(200, 200, 100, 100);<br />
arc(200, 215, 33, 30, 0, PI);<br />
fill(0);<br />
ellipse(180, 190, 10, 10);<br />
ellipse(220, 190, 10, 10);<br
/></code>
</details>
<p>
Assignment 1 explores this ambiguity in human language as well as the gap
between human language and computer language. Completed in pairs of two,
you will work with a partner and exchange a detailed description (a
memory) of a personal object you have lost in the past. Then based on the
description, you will create an image of the object for your partner in
p5.js.
</p>
<p>
The depiction of the object does not need to be an exact representation.
(In fact, this will likely be impossible.) The end result will be a
combination of how the memory of the object is described to you, your
interpretation of what that object looks like, and how you are able to
render the object through code.
</p>
<p>
The assessment of the assignment is not dependent on the work your partner
completes. Your work will be evaluated based on the code you produce and
reflections you write.
</p>
<h3>Design Constraint</h3>
<p>Canvas Size: 400 x 400px</p>
<h3>Timeline</h3>
<h4>Part 1 : Due 9/12</h4>
<ol>
<li>
Choose an object you have lost in the past that has meaning to you.
</li>
<li>
Describe your memory of the object using plain language. It is up to you
how much detail you impart, but be mindful of your own assumptions about
what your partner might know about the object.
</li>
<li>
Share your description (without any reference images) with your assigned
partner.
</li>
</ol>
<h4>Part 2: Due 9/14</h4>
<ol>
<li>
After exchanging descriptions, begin drawing that image on a piece of
paper. Then transfer the drawing in pseudocode. Be sure to include the
following technical components in your sketch:
<ul>
<li>2D Primitives</li>
<li>RGB Colors</li>
</ul>
<li>If you feel like you've got a good handle on the required technical components, feel free to take on further challenges by incorpodating Translate(), Rotate(), Push(), and Pop() features in your code.</li>
</li>
</ol>
<h3>Submission Guidelines</h3>
<p>Please submit your sketch to Canvas Assignment 1.</p>
<h3>Tutorials</h3>
<ul>
<li>
1.1 p5 Web Editor and the Console (<a
href="https://youtu.be/wiG7wLwyW0E"
>YouTube</a
>
/
<a
href="https://diode.zone/videos/watch/ce6aa5ed-7170-4b07-84db-5fa10199a55d"
>PeerTube</a
>), Xin Xin
</li>
<li>
1.2 2D Primitives (<a href="https://youtu.be/hISICBkFa4Q">YouTube</a>
/
<a
href="https://diode.zone/videos/watch/f791e49d-3be6-47b8-bad6-27aacadce78c"
>Peer Tube</a
>), Xin Xin
</li>
<li>
1.3 RGB Colors and blendMode() (<a
href="https://www.youtube.com/watch?v=fTEvHLLwSBE&feature=youtu.be"
>YouTube</a
>
/
<a
href="https://diode.zone/videos/watch/bf6a2187-93aa-494f-86a7-5834a20b4d47"
>PeerTube</a
>), Xin Xin
</li>
<li>
1.4 translate(), rotate(), push(), pop() (<a
href="https://www.youtube.com/watch?v=maTfm84mLbo&feature=youtu.be"
>YouTube</a
>
/
<a
href="https://diode.zone/videos/watch/37b25b2f-f067-4514-af58-f9087d7d9e34"
>PeerTube</a
>), Xin Xin
</li>
</ul>
</main>
</html>