forked from scrippscollege/MS_053_F23
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathassignment-2.html
100 lines (88 loc) · 4.43 KB
/
assignment-2.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
<!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 2024 – Assignment 2</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">Projects</a>
</li>
<li>
<a href="tutorials.html">Tutorials</a>
</li>
<li>
<a href="people.html">People</a>
</li>
</ul>
</nav>
<main>
<img src="https://www.mokafolio.de/thumbs/works/Weird-Faces/01-2400x1526.jpg" style="width:70%" alt="15 cartoony faces drawn in thin and doodly black strokes are displayed in a 3 by 5 grid."/>
<p>
<a href="https://www.mokafolio.de/works/Weird-Faces-Vending-Machine" target="blank">Weird Faces Vending Machine</a> (2013) by Matthias Dörfelt
</p>
<h2>Face Generator</h2>
<h3>Objective</h3>
<p>
Build a simple generator that makes multiple variations of the same face.
</p>
<h3>Description</h3>
<p>
In <a href="http://formandcode.com/code-examples/parameterize-chair">parameterized design</a>, you are a conductor rather than an individual musician. Instead of producing a single design where you have to draw out all the details step by step, you are using code to create a set of parameters that generate a variety of results.
</p>
<p>
For Assignment 2, you will create a face generator using customized variables and the random() function. Plug the maximum / minimum values into the random() for each feature. The face generator will create multiple variations of the face through mouse or keyboard interactions. Test, iterate, and refine the parameters by paying great attention to details.
</p>
<p>
This is an individual assignment. You are welcome to ideate and brainstorm with your peers, but the work you submit should be your own.
</p>
<h3>Design Constraint</h3>
<p>Canvas Size: 400 x 400px</p>
<h3>Timeline</h3>
<h4>Due 2/5</h4>
<ol>
<li>
Prepare a piece of paper and pencil, and recreate this <a href="https://cdn.glitch.com/e65c6bfb-f5bf-4ddf-a967-53a0e911a960%2Fwk2_asset.jpg?v=1599548178631">400 * 400 px grid template</a> by drawing on paper.
</li>
<li>
Draw two stages of the same face – the first drawing should depict the face at its first stage, and the second drawing should depict the face at its second stage. Once you have an idea of how your face would look like in its first and second stages, you should be able to use the range in between to create variations of the form. Here's an <a href="https://editor.p5js.org/nicky.jpg/embed/wOwZ4mUPp">example</a> by Nicky Du (BFADT '22).
</li>
<li>
Transfer your drawings into the p5 sketch. Plug the maximum / minimum values into random() for each of the attributes.
</li>
<li> Make sure that you include the following technical components in your sketch: <ul>
<li>User-defined variables</li>
<li>random()</li>
<li>mouseX / mouseY, mousePressed() / keyPressed(), or mouseIsPressed() / keyIsPressed()</li>
</ul>
</li>
<li> Closely observe how the attributes relate to one another in every variation, and refine the parameters until every
variation feels intentional. </li>
</ol>
<h3>Submission Guidelines</h3>
<p>Please submit your a link to your saved p5.js sketch to Canvas.</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>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>
</main>
</html>