世界中のアニメーションマスクを作ろう - Javascript のデジタルアート!

=====================
WHAT WE'LL CREATE
=====================

In this 4-week class, learners will study cultural masks around the world. They'll investigate what the masks are used for, who wears them, when and why they are worn, that masks can reveal as well as hide, and what stories they tell. Learners will also reflect on simple design principles that recur in many masks. While they're studying masks, learners will also explore code in p5.js (JavaScript for artists). They'll create some basic shapes that appear in many masks, choose colors, apply textures, and animate the masks so that eyes, mouth, and other features move in lifelike ways.

=====================
HOW WE'LL LEARN
=====================
To learn coding in p5.js JavaScript, learners begin by working in a collaborative coding environment where everyone can write commands together. I'll model how the commands should look, and learners will practice them. Both students and teacher can help each other with questions and problems. We'll learn one command at a time, with plenty of time for exploration and practice. As learners become comfortable with the commands, they'll begin to work on their own mask projects.

=====================
SCHEDULE
=====================
I am happy to add new days and times for this class if you need them (just click the "Request Another Time" button)! 

=====================
CURRICULUM
=====================
Day 1. 
Learners will explore examples of animated cultural masks from around the world, focusing on Africa, Inuit indigenous culture, and Pacific Islanders. We'll discuss who wears these masks, what they are made of, what representational and abstract shapes recur in their design, the purposes for wearing them, and common design principles like symmetry, texture, color, and pattern evident in most masks. In p5.js, learners will begin exploring the basic shapes found in all masks – ellipses, rectangles, almond shapes, and curved lines. They will also investigate the coordinate grid (numbers that are used for defining the horizontal and vertical position of shapes on the screen).

Day 2. 
Learners will continue to discuss design principles and to explore coding basic shapes in p5.js JavaScript. In addition, learners will learn about web colors and apply them to the borders and interiors of shapes. Learners will have time to begin their own mask.

Day 3.
Learners will explore how to animate features of their masks and how to make their masks respond when viewers move the computer pointer across the screen. In technical terms, learners investigate variables – how to create them, how to set them to specific values, and how to modify those values during the animation to track the position of the pointer. Learners will have time to continue working on their own mask.

Day 4.
Learners will continue working on their own masks. If time permits, they can learn how to apply textures like wood or stone to masks by adding images and making those images appear within shapes like the head, eyes, or mouths of masks. During the end of the class, learners will be encouraged to share their masks, even if they are still in progress.


=====================
APPROACH
=====================
Class sizes are small so that I can work with individual students. Learning is carefully structured to provide challenges with low thresholds (all learners can reach them successfully) and high ceilings (learners with more experience can explore). At the same time, all learners progress through the basic skills they need to work confidently and independently on their digital animated masks. I provide supplementary written or video materials for students who move faster than the class.

This class is intended both for students with no experience in text-based coding (writing commands instead of dragging blocks) and also for students who've written short scripts in Roblox or Minecraft or who have completed tutorials and video lessons online. However, for more advanced students who already write code independently in p5.js, JavaScript, or another language, please contact me to arrange a more appropriate learning experience.

=====================
GETTING READY
=====================
(1) Learners should join our coding group at Open Processing, where they'll write code and see their animations. See additional information in "Parental Guidance," below.
(2) Learners should log into Open Processing *before each class* so they're ready to work when class begins. 
(3) Learners should know how to cut and paste and how to move among different tabs in their web browsers.
Thanks! Please let me know if you need help with these requests. I am always happy to help!