forked from scrippscollege/MS_053_F23
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathassignment-4.html
121 lines (106 loc) · 4.53 KB
/
assignment-4.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
<!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 4</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="assets/nopaint.png"/>
<p>
<a href="https://nopaint.art/" style="width:70%" >No Paint</a> (2020) by Jeffrey Scudder
</p>
<h2>Drawing Machine</h2>
<h3>Objective</h3>
<p>
Design and code a drawing software that makes marks in a novel way.
</p>
<h3>Description</h3>
<p>
The human body, particularly the human hands, is the most rudimentary tool we have for mark-making. Throughout human history, a variety of tools have been developed to extend the hands and diversify the marks we're able to make. Unlike analog drawing tools such as a charcoal stick or a paintbrush, digital drawing tools rely on code instructions to simulate pixel transformation. Therefore, <i>what</i> to simulate and <i>how</i> to simulate it becomes the central question in the creation of drawing software.
</p>
<p>For this assignment, you're asked to design drawing software that makes marks in a novel way. Consider the software's ability to transform minimal user inputs into disproportionate and unexpected outcomes.</p>
<h3>Design Constraint</h3>
<p>Canvas Size: 600 x 400px (landscape) or 400 x 600px (portrait)</p>
<h3>References</h3>
<ul>
<li><a href="https://asdf.us/asciiblaster/">ASCII Blaster</a></li>
<li><a href="https://make8bitart.com/">Make 8-Bit Art</a></li>
<li><a href="https://asciiflow.com/#/">ASCII Flow</a></li>
<li><a href="https://rgb.constraint.systems/">RGB painter</a></li>
<li><a href="https://etch.constraint.systems/">Etch</a></li>
<li><a href="https://sketch.io/sketchpad/">Sketchpad</a></li>
<li><a href="https://www.youidraw.com/apps/painter/">Youl Draw</a></li>
<li><a hrf="https://www.deviantart.com/muro/">Muro</a></li>
<li><a href="https://hex.constraint.systems/">Hex</a></li>
<li><a href="https://superinternet.space/">Superinternet Space</a></li>
<li><a href="www.nopaint.org">No Paint</a></li>
<li><a href="https://www.escapemotions.com/experiments/rebelle/index.php">Rebelle</a></li>
<li><a href="https://edankwan.com/experiments/icicle-bubbles/">Icicles Bubbles</a></li>
</ul>
<h3>Timeline</h3>
<h4>Part 1 : Due 2/19</h4>
<ol>
<li>
For the first part of the assignment, you will design the user interface and basic features of your drawing software. Make a drawing of your interface and list out descriptions of your features in 1~2 slides on <a href="https://docs.google.com/presentation/d/1B7F5M2IfLWwCm6XyMICtQITF__NbSXhFawrTwUoJbrU/edit?usp=sharing">this collaborative slideshow</a>. We will be presenting your design on Monday, February 19.
</li>
</ol>
<h4>Part 2: Due 2/26</h4>
<ol>
<li>
For the second part of the assignment, you will implement and code your design in p5.js. Make sure you incorporate the following programming concepts:
<ul>
<li>function</li>
<li>passing the parameters</li>
</ul>
</li>
</ol>
<h3>Submission Guidelines</h3>
<ol>
<li>Submit the sketch to Canvas Assignment 4</li>
</ol>
<h3>Tutorials</h3>
<ul>
<li>
4.1 Function Basics (<a
href="https://www.youtube.com/watch?v=wRHAitGzBrg"
>YouTube</a
>), Coding Train
</li>
<li>
4.2 Functions: parameters & arguments (<a
href="https://www.youtube.com/watch?v=zkc417YapfE"
>YouTube</a
>), Coding Train
</li>
<li><a href="https://library.superhi.com/posts/how-to-paint-with-code-creating-paintbrushes">How to Paint with Code: Creating Your Brushes</a></li>
</ul>
</main>
</html>