Skip to content

Commit a961abc

Browse files
committed
hyperlinked functions
1 parent 902e532 commit a961abc

1 file changed

Lines changed: 12 additions & 13 deletions

File tree

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ gallery: # Below is for including an image gallery
1313
---
1414

1515
![Create a digital collage with p5.js!]({{ "https://verse.works/image/w3840/static%2F1dbce05a-42de-4250-a1b7-4f22d3e61886.png@webp" | relative_url }})
16-
[Generativemasks](https://generativemasks.io/gallery) by Shunsuke Takawo
16+
[Generativemasks](https://generativemasks.io/gallery). Made in [p5.js](https://p5js.org/) by Shunsuke Takawo.
1717

1818
# Introduction
1919

@@ -23,7 +23,9 @@ gallery: # Below is for including an image gallery
2323
2424
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.
2525

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.
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()](https://p5js.org/reference/p5/random/) feature.
27+
28+
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.
2729

2830
## Premise
2931

@@ -50,12 +52,12 @@ Build a simple generator that makes multiple variations of the same mask.
5052
### Grade 6~8
5153

5254
- System Variables vs. User-Defined Variables
53-
- mouseX, mouseY
54-
- width, height
55+
- [mouseX](https://p5js.org/reference/p5/mouseX/), [mouseY](https://p5js.org/reference/p5/mouseY/)
56+
- [width](https://p5js.org/reference/p5/width/), [height](https://p5js.org/reference/p5/height/)
5557
- Data types
5658
- Global vs. local variables
57-
- random()
58-
- mousePressed(), keyPressed()
59+
- [random()](https://p5js.org/reference/p5/random/)
60+
- [mousePressed()](https://p5js.org/reference/p5/mousePressed/), [keyPressed()](https://p5js.org/reference/p5/keyPressed/)
5961
- console.log()
6062

6163
### Grade 9~12
@@ -76,27 +78,24 @@ This project will take approximately four 45-minute sessions:
7678
### Planning your Mask Generator Project
7779

7880
1. Draw Your Grid
79-
80-
- Use your paper and pencil to draw a large square (around 4x4 inches).
81-
- Divide the square into a 20 x 20 grid with a ruler.
82-
- This will help you keep things lined up and make variations easier to compare.
81+
- Use your paper and pencil to draw a large square (around 4x4 inches).
82+
- Divide the square into a 20 x 20 grid with a ruler.
83+
- This will help you keep things lined up and make variations easier to compare.
8384

8485
1. Create Two Key Expressions
85-
8686
- Using the [Wheel of Emotions](<https://www.isu.edu/media/libraries/counseling-and-testing/documents/Wheel-of-Emotions-Handout-(3).pdf>) as a reference and select two types of emotional expressions.
8787
- In the first square, draw a mask showing Expression 1 (e.g., inspired, courageous, respected).
8888
- In the second square, draw the same face showing Expression 2 (e.g., worried, overwhelmed, alienated).
8989

9090
1. Keep the features the same, but change features like:
91-
9291
- Eyes: big, small, squinted
9392
- Mouth: smiling, frowning, open, closed
9493
- Eyebrows: raised, tilted, flat
9594

9695
1. Design the In-Between Faces
9796
- Now, imagine how the mask moves from the first expression to the second.
9897
- 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-
1. Observe & Reflect (5–10 mins)
98+
1. Observe & Reflect
10099
- Compare your key expressions:
101100
- What changes the most between expressions?
102101
- Which parts stay mostly the same?

0 commit comments

Comments
 (0)