-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathp1.html
554 lines (496 loc) · 21 KB
/
p1.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Code 2 | Projects</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="style.css" />
<!-- import the webpage's javascript file -->
<script src="/script.js" defer></script>
</head>
<body>
<div class="nav">
<h1>Code 2</h1>
<ul>
<li>
<a
href="https://docs.google.com/document/d/16yNNHgZIqe3B8W9TLSEBrOSo2KsAF5qVFqkZ8sEh2mc/edit?usp=sharing"
target="blank"
>Syllabus</a
>
</li>
<li>
Projects <a href="p1.html">#1</a> <a href="p2.html">#2</a>
<a href="p3.html">#3</a> <a href="p4.html">#4</a> #5
</li>
<li><a href="events.html">Public Events</a></li>
<li><a href="readings.html">References</a></li>
<li><a href="people.html">People</a></li>
</ul>
</div>
<div class="content">
<h1>Project #1 Modular Animation</h1>
<h2>Description</h2>
<p>
Modular design is a term coined by the West as a response to
mass-production, however the idea has long existed in non-Western
cultures as early as the beginning of written languages. Create a set
number of 2D primitive shapes and transform them to compose three
different images using p5 math and the switch statement. No shapes
should be added or subtracted throughout the transformations. Pay close
attention to the positive and negative space each transformation
creates.
</p>
<h2>Timeline</h2>
<p>
Jan 22 - Jan 29: Design Phase<br />
Jan 29 - Feb 5: Production Phase
</p>
<h2>Due Dates</h2>
<p>
Jan 29: 12-frame storyboard<br />
Feb 5: project due, present in class
</p>
<h2>Design Constraints</h2>
<p>
(1) Your canvas size should be 600px * 600px<br />
(2) Use a set number of 2D primitive shapes and transform them to
compose three different images <br />
(3) Use <= 3 colors for the sketch, though you are encouraged to
use
<a href="https://p5js.org/reference/#/p5/blendMode">p5 blend mode</a> to
"mix" additional colors<br />
</p>
<h2>References</h2>
<p>
(1)
<a href="https://sasj.tumblr.com/">Daily Art</a> by Saskia Freeke
<br />
(2)
<a href="https://dpmanual.bitbucket.io/pages/programs.html#"
>Computational Graphic Design Manual</a
>
by mark webster
</p>
<h2>Resources</h2>
<p>
(1)
<a
href="https://cdn.glitch.com/5dd99b18-3ebb-45c5-90fb-b4b67dc2e128%2FCode2_storyboardTemplate.pdf?v=1579761035887"
>p5 Storyboard Template</a
>
<br />
(2)
<a
href="https://cdn.glitch.com/5dd99b18-3ebb-45c5-90fb-b4b67dc2e128%2FCode-1-clock-assignment.pdf?v=1579725453799"
>p5 Hours - Degrees - Radians Diagram</a
><br />
(3)
<a
href="https://cdn.glitch.com/5dd99b18-3ebb-45c5-90fb-b4b67dc2e128%2FrhetoricalDesign001.pdf?v=1579809386856"
>Understanding Comics</a
>
-- this excerpt offers a really useful appraoch for articulating
strategies for both representational and abstract sequencing
</p>
<h2>Submission Guidelines</h2>
<p>
Please submit your sketch to two places: <br />
(1) Submit your “Edit” sketch link to Canvas Project #1<br />
(2) Add the “Embed” sketch link to the
<a
href="https://glitch.com/edit/#!/join/11692888-4a11-4eb4-b9f5-b69cabd002a6"
>Project #1 Glitch page</a
>
for presentational purposes
</p>
<h1>Study Guide</h1>
<h2>Design Phase</h2>
<h3>Modular Design</h3>
<div class="full-width-box">
<img
src="https://i.pinimg.com/736x/ef/8d/6b/ef8d6b1fcc9118a815a58eb289eb7124--drawing-tips-document.jpg"
/>
</div>
<p>
Before we begin to draw a storyboard for Project #1, let's first review
the definition of modular design. By Wikipedia's definition, "modular
design, or modularity in design, is an approach (design theory and
practice) that subdivides a system into smaller parts called modules
(such as modular process skids), which can be independently created,
modified, replaced or exchanged between different systems". The
application for modular design are endless and goes way beyond
interaction design. Here are some examples of modular "designs" that
were collectively generated in class:
</p>
<ul>
<li class="bullet">Legos</li>
<li class="bullet">Sushi</li>
<li class="bullet">Fashion Arrangements</li>
<li class="bullet">Modular Furniture</li>
<li class="bullet">USB adaptors</li>
<li class="bullet">Light Bulbs</li>
<li class="bullet">The Internet</li>
<li class="bullet">Cocktails</li>
<li class="bullet">Computer Parts</li>
<li class="bullet">The International Space Station</li>
<li class="bullet">Camera parts</li>
<li class="bullet">Automobile parts</li>
<li class="bullet">The game station</li>
<li class="bullet">Loading screen</li>
<li class="bullet">Tetris</li>
<li class="bullet">Honeycombs</li>
<li class="bullet">Janga</li>
<li class="bullet">Computer mice</li>
<li class="bullet">Chess</li>
<li class="bullet">Emergent systems</li>
<li class="bullet">Apartment layouts / units</li>
<li class="bullet">DNA</li>
<li class="bullet">Ecosystem</li>
<li class="bullet">Construction materials</li>
<li class="bullet">Restaurant menu</li>
<li class="bullet">Bedsets</li>
<li class="bullet">Natural elements</li>
<li class="bullet">Circuits</li>
<li class="bullet">Chipotle</li>
<li class="bullet">Letterpress</li>
<li class="bullet">Mr. Potato Head</li>
<li class="bullet">Bible denominations</li>
<li class="bullet">Power rangers</li>
<li class="bullet">Build a bear</li>
<li class="bullet">Cutomed makeup palette</li>
<li class="bullet">Multi-functional bras</li>
<li class="bullet">Cutomed makeup palette</li>
<li class="bullet">Lincoln Logs</li>
<li class="bullet">Tupperware</li>
<li class="bullet">Shopping cars</li>
<li class="bullet">Train tracks</li>
<li class="bullet">Modular tables</li>
<li class="bullet">Books</li>
<li class="bullet">Modular package design</li>
</ul>
<p>
Come up with an overall theme for your project, and jolt down some ideas
for how you would express the theme through visuals and motions. When
you begin to design your compositions and transformations, consider the
following visual design principles:
</p>
<ul>
<b>
<li>(1) Contrast</li>
<li>(2) Hierarchy</li>
<li class>(3) Alignment</li>
<li class>(4) Balance</li>
<li>(5) Proximity / Unity</li>
<li>(6) Repetition / Movement</li>
</b>
</ul>
<h4>(1) Contrast</h4>
<p>
Contrast occurs when two or more elements in the composition are
different from one another. Examples of contrast:
</p>
<div class="full-width-box">
<img
style="height:200px"
src="https://image.jimcdn.com/app/cms/image/transf/none/path/s5e2faa515265122a/image/iaf67fb546e639cbb/version/1505129978/image.png"
/>
</div>
<div class="full-width-box">
<img
style="height:200px"
src="https://image.jimcdn.com/app/cms/image/transf/dimension=1920x400:format=png/path/s5e2faa515265122a/image/ibf64ccc3b1481bed/version/1505130232/image.png"
/>
</div>
<h4>(2) Hierarchy</h4>
<p>
Hierarchy occurs when visual elements are arranged in a way that shows
visual emphasis. The technique directs the viewers' eyes to see the most
important visual element first and the least important visual element
last. Examples of hierary:
</p>
<div class="full-width-box">
<img
src="https://image.jimcdn.com/app/cms/image/transf/dimension=1920x400:format=png/path/s5e2faa515265122a/image/i8d4d887ecbe4cd3a/version/1505132841/image.png"
/>
</div>
<h4>(3) Alignment</h4>
<p>
Alignment helps create visual cohesion by turning a group of elements
into a "visual block". Examples of alignment:
</p>
<div class="full-width-box">
<img
style="height:150px"
src="https://image.jimcdn.com/app/cms/image/transf/none/path/s5e2faa515265122a/image/i204982e8b624c175/version/1505146034/image.png"
/>
</div>
<div class="full-width-box">
<img
style="height:200px"
src="https://image.jimcdn.com/app/cms/image/transf/dimension=1920x400:format=png/path/s5e2faa515265122a/image/i72c055afbf60b5a5/version/1505146078/image.png"
/>
</div>
<h4>(4) Balance</h4>
<p>
Balance represents the visual weight of a composition. It can be used to
establish either a feeling of structure and stability (symmetrical
balance and radial balance), or create a dynamic visual effect through a
lack of balance (assymetrical balance). Examples of balance:
</p>
<div class="full-width-box">
<img
src="https://image.jimcdn.com/app/cms/image/transf/dimension=1920x400:format=png/path/s5e2faa515265122a/image/ibf9e6f542fdd8cd6/version/1505146186/image.png"
/>
</div>
<div class="full-width-box">
<img
src="https://image.jimcdn.com/app/cms/image/transf/dimension=1920x400:format=png/path/s5e2faa515265122a/image/i57e79863ab1d1f52/version/1505146268/image.png"
/>
</div>
<h4>(5) Proximity / Unity</h4>
<p>
Proximity & unity occurs when the arrangement of a group of visual
elements create a "secondary image". The principle of closure applies
when we see complete figures even when part of the information is
missing. Can you see the white triangle in the center image below?
</p>
<div class="full-width-box">
<img
src="https://image.jimcdn.com/app/cms/image/transf/dimension=1920x400:format=png/path/s5e2faa515265122a/image/i91ce90f9c6486a5e/version/1505178055/image.png"
/>
</div>
<h4>(6) Repetition / Rhythm</h4>
<p>
Repetition occurs when a visual element is repeated in a orderly manner,
and rhythm occurs when the repeated elements are arranged in a way that
directs the eyes to move across the horizontal / vertical axises.
</p>
<div class="full-width-box">
<img
src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fgmellor182.files.wordpress.com%2F2012%2F07%2Frep001.jpg&f=1&nofb=1"
/>
</div>
<p>
An example that explains modular animation:
</p>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/zzv9O46EFYI"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
<h2>
Production Phase
</h2>
<h3>Creating Basic Keyframe Animation in p5.js</h3>
<iframe src="https://editor.p5js.org/xinxin/embed/-uliLUmcU"></iframe>
<p>
In p5, we can create simple keyframe animations using the conditional
statements. In the example sketch above, the ball transitions between
keyframe A and B, and that is controlled by an if... else if statement:
</p>
<script src="https://gist.github.com/xinemata/3878cd4afcb4649560d1b0a3f976f237.js"></script>
<a href="https://editor.p5js.org/xinxin/sketches/-uliLUmcU"
>Link to Source Code</a
>
<h3>JavaScript switch Statement</h3>
<p>
The switch statement is a type of conditional statement that is often
used in programming to buildg a finite state machine (FSM). Different
from an If / Else conditional statement which only executes a statement
if an expression is true, a switch statement matches the expression with
the case name and executes statements associate with the specific case.
For example:
</p>
<script src="https://gist.github.com/xinemata/001f80b03f6841aeb66a1600c78c7589.js"></script>
<p>
This block of code uses the variable <i>num</i> as the expression in the
switch statement. Whenever <i>num</i> matches the case name, the program
will execute the corresponding statement under the <i>case</i>. When num
matches none of the case name, the program would execute the statement
under <i>default</i>.
</p>
<iframe src="https://editor.p5js.org/xinxin/embed/eh_gS-2bA"></iframe>
<p>↳ click on screen to start animation.</p>
<a href="https://editor.p5js.org/xinxin/sketches/eh_gS-2bA"
>Link to Source Code</a
>
<p>
Here are examples of creating animation using switch. You can think
about each of the case as a keyframe, and figure out what needs to go
under the case to make the shape transition into the next stage.
</p>
<iframe src="https://editor.p5js.org/xinxin/embed/9bUX2-N0K"></iframe>
<p>↳ click on screen to start animation.</p>
<a href="https://editor.p5js.org/xinxin/sketches/9bUX2-N0K"
>Link to Source Code</a
>
<iframe src="https://editor.p5js.org/xinxin/embed/GCqaGeo3r"></iframe>
<p>↳ click on screen to start animation.</p>
<a href="https://editor.p5js.org/xinxin/sketches/GCqaGeo3r"
>Link to Source Code</a
>
<p>
For the sake of clarity, I'm using mousePressed() to progress
<i>num</i> in these examples. However you could also use
<a href="https://p5js.org/reference/#/p5/millis">millis()</a> or
<a href="https://p5js.org/reference/#/p5/frameCount">frameCount()</a> to
create a timed animation.
</p>
<h3>Smoothing Animation Using lerp()</h3>
<p>
The approach above lets us move objects on the screen in constant speed.
However the motion isn't always very smooth. This is where we could use
the p5
<a href="https://p5js.org/reference/#/p5/lerp">lerp()</a> function to
interpolate the movement and create an easing and acceleration effect.
</p>
<div class="full-width-box">
<iframe src="https://editor.p5js.org/xinxin/embed/jE4G52o6t"></iframe>
<p>↳ click on screen to restart animation.</p>
</div>
<p>
Here's the syntax for lerp():
</p>
<script src="https://gist.github.com/xinemata/70205a958623bd82c6948b1e763ca3f8.js"></script>
<p>
By using lerp(), we can calculate a number (<i>myVariable</i>) between
two numbers (<i>start</i>, <i>stop</i>) at a specific increment
(<i>amt</i>). Try increasing / decresing the <i>amt</i> in the source
code and see what happens.
</p>
<div class="full-width-box">
<script src="https://gist.github.com/xinemata/4c852527bb0683e82ae9c40ffb751b67.js"></script>
<a href="https://editor.p5js.org/xinxin/sketches/jE4G52o6t"
>Link to Source Code</a
>
</div>
<h3>map()</h3>
<p>
The textbook definition of map() is that it re-maps a number from one
range to another. That might sound a little abstract, but we actually
have practiced the concept of map() WAAAAAAAY before learning to code.
One of the common examples is how we map seconds into minutes, and
minutes into hours when we read the clock. We have practiced this so
much that we inherently understand that half an hour is 30 minutes, and
three quarters of an hour is 45 minuetes. <br /><br />
Our minds are pretty good at mapping things in broad stroke, so what if
we need to find out how many minutes is 2.4 hour? or 7.35 hour?
</p>
<div class="full-width-box">
<img
src="https://cdn.glitch.com/5dd99b18-3ebb-45c5-90fb-b4b67dc2e128%2Fb2de6607-7b1f-4681-8fec-c33ac7709424.image.png?v=1580262025287"
/>
</div>
<p>
This is where p5 map() comes in handy. Here's the syntax for map():
</p>
<script src="https://gist.github.com/xinemata/551cc553fc031e1475ee34656ece23c5.js"></script>
<p>
There are three pairs of numbers at work here:
</p>
<ul>
<li>
(1) Minimum (<i>start1</i>) and maximum (<i>stop1</i>) values that
define the first range
</li>
<li>
(2) Minimum (<i>start2</i>) and maximum (<i>stop2</i>) values that
define the second range
</li>
<li>
(3) The input value (<i>value</i>), which get compared to the
<i>start1</i> and <i>stop1</i> range, and the final outcome
(<i>myVariable</i>), which gets caculated based on the relationship
between (1) and (2)
</li>
</ul>
<p>
If that was hella confusing, this example might help you:
</p>
<iframe src="https://editor.p5js.org/xinxin/embed/VdQVV3y9"></iframe>
<div class="full-width-box">
<script src="https://gist.github.com/xinemata/a6b56bcf55a877fe0d79e5a6c9e22cd3.js"></script>
</div>
<a href="https://editor.p5js.org/xinxin/sketches/VdQVV3y9"
>Link to Source Code</a
>
<p>
This sketch maps the range between <i>minHour</i> and
<i>maxHour</i> onto <i>minMinute</i> and <i>maxMinute</i>. Then it takes
<i>currentHour</i>, a value indicated by
<a href="https://p5js.org/reference/#/p5/hour">p5 hour()</a> and get the
result of <i>hourToMinute</i>.
</p>
<p>
Once you get the basic ideas of map(), you might wonder what else this
is good for. The possibilities are endless, and you might have to
encounter an actual problem to realize how useful map() is. One of the
practical applications of map() is to make a slider:
</p>
<iframe src="https://editor.p5js.org/xinxin/embed/jPlyTTyZ"></iframe>
<p>↳ change value by dragging the slider.</p>
<a href="https://editor.p5js.org/xinxin/sketches/jPlyTTyZ"
>Link to Source Code</a
>
<h1>FAQ</h1>
<h2>Q: What is a keyframe?</h2>
<p>
In both animation and filmmaking, a keyframe shows us the starting or
ending point of a motion.
</p>
<div class="full-width-box">
<img
style="width:300px; height:180px"
src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Ftumult.com%2Fhype%2Fdocumentation%2F2.0%2Fimages%2FanimationKeyframes.png&f=1&nofb=1"
/>
</div>
<p>
The idea of keyframe can be traced back to landscape photographer Edward
Muybridge's photo experiment, which
<a href="https://mashable.com/2015/12/21/muybridge-motion-studies/"
>revolutionized the way we understand motion</a
>.
</p>
<div class="full-width-box">
<img
src="https://mondrian.mashable.com/wp-content%252Fuploads%252F2015%252F12%252Fmuybridge-21.jpg%252Foriginal.jpg?signature=RnvuNd_720SM-upCxAEMm1KH6ms=&source=http%3A%2F%2Fa.amz.mshcdn.com"
/>
</div>
<p>
In drawn animation a keyframe literally refers to the first frame or the
last frame of a transition. The position of keyframes on an animation
timeline has an overpowering effect on how timing and movement is
experienced.
</p>
<div class="full-width-box">
<img
src="https://i.pinimg.com/originals/44/c3/70/44c3709dc50a93dcd10a456324fb2ff8.jpg"
/>
</div>
<h2>Q: What is blend mode?</h2>
<p>
<a href="https://p5js.org/reference/#/p5/blendMode">Blend mode</a>
blends the pixels in the display window according to the defined mode.
This feature is identical to the blending feature in Photoshop. For
example:
</p>
<iframe src="https://editor.p5js.org/xinxin/embed/5NhLJj33Y"></iframe>
<p>MULTIPLY multiplies the colors. The result will always be darker.</p>
<iframe src="https://editor.p5js.org/xinxin/embed/qdfjVs0bT"></iframe>
<p>
SCREEN is the opposite of MULTIPLY, uses inverse values of the colors.
</p>
<iframe src="https://editor.p5js.org/xinxin/embed/YwwtbKvSo"></iframe>
<p>
OVERLAY mixes MULTIPLY and SCREEN by multiplying dark values and
screening light values.
</p>
</div>
</body>
</html>