You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: _curriculum/xx_02-01-Intro.md
+6-3Lines changed: 6 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -21,9 +21,9 @@ gallery: # Below is for including an image gallery
21
21
>
22
22
> \- Shunsuke Takawo, Right Click Save
23
23
24
-
In [parameterized design](https://formandcode.com/code-examples/parameterize-chair), 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.
24
+
In [parameterized design](https://formandcode.com/code-examples/parameterize-chair), you are a conductor, not just one musician. Instead of creating a single design by drawing every detail step-by-step, you use code to set up rules (called parameters) that can create many different versions of a design.
25
25
26
-
The kabuki theater in Japan uses highly expressive masks to illustrate different roles in the society. For this topic, you will reflect on your own background and design a mask generator using customized variables and the random() function. Plug the maximum/minimum values into the random() for each mask feature. The mask generator will create multiple variations of the mask through mouse or keyboard interactions. Test, iterate, and refine the parameters, paying close attention to details.
26
+
Kabuki theater in Japan uses expressive masks to show different roles in society. For this topic, you will reflect on your own background and design a “mask generator” using customized variables and the random() function. You’ll set the maximum and minimum values into the random() for each mask feature. The mask generator will create multiple values for each mask feature. The generator will use mouse or keyboard interactions to create different versions of your mask. Test it, make changes, and pay close attention to the details as you improve your design.
27
27
28
28
## Premise
29
29
@@ -97,4 +97,7 @@ This project will take approximately four 45-minute sessions:
97
97
- Now, imagine how the mask moves from the first expression to the second.
98
98
- On a new piece of paper, draw 2–3 versions that mix parts of each expression. For example: a mask that’s just starting to frown, or eyes that are half-closed.
99
99
1. Observe & Reflect (5–10 mins)
100
-
- Compare your key expressions. What changes the most between expressions? Which parts stay mostly the same? What combinations feel natural or interesting?
Copy file name to clipboardExpand all lines: _curriculum/xx_02-01_Intro.md
+48-16Lines changed: 48 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -28,22 +28,54 @@ We remember the past through words and images. When we describe a memory to a fr
28
28
29
29
If I ask you to describe your friend’s face to me, you might say, “brown hair, brown eyes, freckles,” but that description applies to many people, and might not help me identify your friend when I run into them next time. Humans can communicate imperfectly and still convey meaning because we expect and accept some level of ambiguity. In contrast, when we communicate with a computer through code, we must be very precise because it doesn’t interpret or infer the way a human does.
30
30
31
-
For example, this is how a smiley face is described in human language and computer language:
| The person is looking straight ahead |`noFill();`|
36
-
| and carrying a smile. |`strokeWeight(4);`|
37
-
||`stroke(0);`|
38
-
||`ellipse(200, 200, 100, 100);`|
39
-
||`arc(200, 215, 33, 30, 0, PI);`|
40
-
||`fill(0);`|
41
-
||`ellipse(180, 190, 10, 10);`|
42
-
||`ellipse(220, 190, 10, 10);`|
43
-
44
-
This topic explores the ambiguity in human language, as well as the gap between human language and computer language. Even with the advancement of computer-generated imagery, exemplified by OpenAI’s ChatGPT and Google’s Gemini, the same text prompt will still generate a wide variety of different outputs, revealing the differences between how humans and computers process information.
45
-
46
-
Completed in pairs of two, you will work with a partner and exchange detailed descriptions of a personal object you have lost in the past. Then, based on the descriptions, you will re-create the object for your partner in p5.js.
31
+
For example, this is how a smiley face is described in human language (what we might say) versus computer language (code):
This topic explores the ambiguity in human language and the gap between how humans and computers understand it. Even with the advancement of computer-generated imagery, like OpenAI’s ChatGPT, DALL-E, and even AI-generated TikTok filters, the same text prompt will still generate a wide variety of different results, revealing the differences between human intention and machine interpretation.
77
+
78
+
Completed in pairs of two, you will work with a partner and exchange detailed descriptions of a personal object you have lost in the past. Then, based on the descriptions, you will re-create the object for your partner using computer code with p5.js.
Copy file name to clipboardExpand all lines: _curriculum/xx_03_01-Intro.md
+31-17Lines changed: 31 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,18 +18,21 @@ gallery: # Below is for including an image gallery
18
18
alt: Pepón Osorio, No Crying Allowed in the Barbershop (En la barbería no se llora)
19
19
title: Pepón Osorio, No Crying Allowed in the Barbershop (En la barbería no se llora)
20
20
---
21
+
21
22
![Flat game example]({{ "https://s3.amazonaws.com/koaad7prod/s3fs-public/2023-01/field_enhanced_activity_image/Flatgames.jpeg" | relative_url }})
22
23
23
24
# Introduction
24
25
25
-
Every street, building, and corner in your neighborhood has a story. Maybe it’s where your classmate used to live, where your friends hang out after school, or where you had your first ice cream meltdown.
26
+
Every street, building, and corner in your neighborhood has a story. Maybe it’s where your classmate used to live, where your friends hang out after school, or where you learned how to ride your bike.
26
27
27
-
In this project, you’ll mix hand-drawn drawings and p5.js to build an interactive digital collage of your neighborhood. You’ll create a character (that can be you, a made-up guide, or even a stray cat), who takes us on a tour of your world.
28
+
In this project, you’ll mix hand-drawn artwork with p5.js to build an interactive digital collage of your neighborhood. You’ll create a character (this could be you, a made-up guide, or even a stray cat) who takes us on a tour of your world.
28
29
29
-
This is your chance to share memories, conversations, and stories that make your neighborhood yours.
30
+
This is your chance to share memories, places, and stories that make your neighborhood yours.
30
31
31
32
## Learning Objectives
33
+
32
34
### Grade 6~8
35
+
33
36
- Using images and code together to build a digital scene
34
37
- Making characters move and react using your keyboard or mouse
35
38
- Telling a story through interactive art
@@ -39,15 +42,18 @@ This is your chance to share memories, conversations, and stories that make your
39
42
- Designing and iteratively developing programs that combine control structures and use compound conditions
40
43
- Decomposing problems and subproblems into parts to facilitate the design, implementation, and review of programs
41
44
- Seeking and incorporating feedback from team members and users to refine a
42
-
solution that meets user needs
45
+
solution that meets user needs
43
46
- Using flowcharts and/or pseudocode to design and illustrate algorithms that solve complex problems
44
47
45
48
### Grade 9~12
49
+
46
50
- Justifying the selection of specific control structures by identifying tradeoffs
47
51
- Creating more generalized computational solutions using collections instead of repeatedly using simple variables.
48
52
49
53
## Technical Terms & p5.js Elements
54
+
50
55
### Grade 6~8
56
+
51
57
- async setup()
52
58
- image()
53
59
- IF, Else, Else If
@@ -57,39 +63,47 @@ solution that meets user needs
57
63
- dist()
58
64
59
65
### Grade 9~12
66
+
60
67
- Boolean variable
61
68
- text()
62
69
- Parallel IFs vs. nested IFs
63
70
- describe()
64
71
- Playtest
65
-
72
+
66
73
## References & Artworks for Discussion: Interpretations of Time
* Pepón Osorio, [No Crying Allowed in the Barbershop (En la barbería no se llora)](https://smarthistory.org/osorio-en-la-barberia-no-se-llora-no-crying-allowed-in-the-barbershop/)
- Pepón Osorio, [No Crying Allowed in the Barbershop (En la barbería no se llora)](https://smarthistory.org/osorio-en-la-barberia-no-se-llora-no-crying-allowed-in-the-barbershop/)
71
80
72
81
## Timeline
82
+
73
83
This project will take approximately eight 45-minute sessions:
74
84
75
85
1. Discussing art references and warm-up cxercise.
76
-
1. Researching and gathering materials to represent the neighborhood.
77
-
1. Illustrating the neighborhood by drawing on paper.
86
+
1. Researching and gathering materials to represent the neighborhood.
87
+
1. Illustrating the neighborhood by drawing on paper.
78
88
1. Digitizing the images and importing them to p5.js.
79
89
1. Coding the neighborhood in p5.js.
80
90
1. Making iterations as needed. Sharing out.
81
91
82
-
Optional:
92
+
Optional:
93
+
83
94
- This project can begin with interviews with family members or neighbors to gather different anecdotes of the neighborhood.
84
95
- Students who live in the same neighborhood have the option to collaborate on interviews and/or visual assets.
85
96
86
97
## Warm-Up Exercises
87
-
### Planning A Walk in the Neighborhood Project
98
+
99
+
### Planning A Walk in the Neighborhood Project
100
+
88
101
1. Collecting Visual Assets
89
-
1. Researching and taking photos of landmarks, buildings, parks, plants, homes, shops, etc that hold special meaning to you in your neighborhood. You can take photos by physically visiting the space or taking screenshots using Google Street View.
90
-
1. Writing down important memories associated with photos you've taken. Write in the tone and voice your character would speak in. The writing could take the form of short descriptions, conversations, monologues, etc.
102
+
103
+
1. Researching and taking photos of landmarks, buildings, parks, plants, homes, shops, etc that hold special meaning to you in your neighborhood. You can take photos by physically visiting the space or taking screenshots using Google Street View.
104
+
1. Writing down important memories associated with photos you've taken. Write in the tone and voice your character would speak in. The writing could take the form of short descriptions, conversations, monologues, etc.
91
105
92
106
1. Hand-Drawn Illustrations!
93
-
1. With a large sheet of paper, color pencils or crayons, and scissor, illustrate the different buildings, objects, people, and animals you'd like to include in your neighborhood drawing.
94
-
1. Take photos of individual item you've drawn, and remove the white background of these photos on a computer.
95
-
1. Import the photos into the p5.js Editor.
107
+
1. With a large sheet of paper, color pencils or crayons, and scissor, illustrate the different buildings, objects, people, and animals you'd like to include in your neighborhood drawing.
108
+
1. Take photos of individual item you've drawn, and remove the white background of these photos on a computer.
0 commit comments