Outschool
Open currency, time zone, and language settings
Log In

Make Animated Masks From Around the World - Digital Art in Javascript!

In this 4-week art and coding class, learners will study cultural masks from around the world. Then they'll design and animate their own digital masks by coding in a computer programming language called p5.js (JavaScript for artists).
Terry D [Code & Art, JavaScript, M.Ed]
Average rating:
5.0
Number of reviews:
(46)
Class
Play

What's included

4 live meetings
3 hrs 40 mins in-class hours

Class Experience

=====================
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!

Learning Goals

* Learn about the purposes and structures of cultural masks from Africa, Inuit indigenous cultures, and Pacific Islanders.
* Learn about design principles that recur across masks, including symmetry, texture, color, and pattern.
* In p5.js JavaScript, learn about x- and y-coordinates and how they control the placement of shapes and images on screen.
* In p5.js JavaScript, learn:
- - - how to draw ellipses, rectangles, almond-shapes, and curved lines
- - - add color to the outline or interior of shapes
- - - create and modify variables
- - - use variables to change the dimensions and position of shapes on screen
- - - show images
- - - restrict the view of images so that they appear inside shapes like heads, eyes, or mouths.
learning goal

Other Details

Parental Guidance
Students will create a login and join a coding group at Open Processing, where their class will write code and see the animations. Student logins at Open Processing include many safety features. For example, no personal information is collected, student profiles and projects are visible only to the teacher and classmates, and students are not allowed to comment or annotate projects outside their class. For a full description of these protections, see "Restricted Student Accounts" at https://intercom.help/openprocessing/en/articles/5228489-student-account-types. This free code editor, funded by the Processing Foundation, works on Windows, Mac, Linux, and Chromebook computers but isn't appropriate for iPads or phones.
External Resources
In addition to the Outschool classroom, this class uses:
Joined August, 2022
5.0
46reviews
Profile
Teacher expertise and credentials
15 years of experience teaching JavaScript, Python, Scratch, web development, robotics, and artbotics to students from 8 - 15 years old in private, public, and after-school settings. Two masters degrees in education – from Harvard Graduate School of Education with a focus on technology and from Lesley University in mathematics education. And, most of all, great love, patience, and respect for the many different ways that students learn and the different gifts they each bring to the classroom!

Reviews

Live Group Class
Share

$18

weekly
1x per week, 4 weeks
55 min

Completed by 1 learner
Live video meetings
Ages: 9-14
2-4 learners per class

This class is no longer offered
About
Support
SafetyPrivacyCA PrivacyLearner PrivacyYour Privacy ChoicesTerms
Financial Assistance
Get The App
Download on the App StoreGet it on Google Play
© 2025 Outschool