🎨🎨 Unit 4 Final Project: Animated Greeting Card/PSA
How can I showcase my skills in an animated program?
Teacher Notes
Plan on spending roughly 3-5 days on this project, depending on the speed in which your students work and how ambitious you set this project up to be.
You can also adjust the parameters and prompts for this project based on the needs of your class! We generally suggest that this project be either an animated greeting card and/or a public service announcement - but you can feel free to present only one option or other options depending on the needs/interests of your students. They have so many skills at their disposal that they can really make anything - they might just need some information!
Objectives
Students will be able to:
Showcase their understanding of animation and motion (including incrementing variables, transformations, sine/cosine) based on Unit 4 lessons in a culminating final project.
Integrate programming skills from the duration of the year into an animated greeting card project.
Prompt
Close your eyes while we take a journey in the wayback machine:
The year is 1998, and your favorite holiday is approaching. You know you need to spread the joy of this holiday to your friends, family, and loved ones, but how? You could break out the construction paper and crayons and make a card, but that’s sooooo 1988, and plus, you don’t want to have to make cards for every single person you know. Nor do you want to wait to give them the cards; blech, waiting is for peasants.
Then, your eyes drift to the boxy desktop computer in the corner, with it’s wired mouse and chunky keyboard. Of course.You should use the internet to help you!
Back in the late 90s and early aughts, there were a plethora of websites that had free, sendable e-greeting cards. These greeting cards usually featured some sort of animation (the best ones were interactive, sometimes even games!) and could be customized with the names of your loved ones. Just type in a name and e-mail, and your best friend would get a message directing them to a webpage with an animated scene wishing them well on whatever holiday you wanted to celebrate. And y’all, they were cool.
Back in the present, you’re feeling inspired. And, unlike the weird 1998 version of you, you have easy access to a wealth of coding knowledge and an easy-to-use IDE! It’s time to make your own E-Greeting Card to celebrate a holiday or educate about an important social cause, friend.
Your Task:
Pick a holiday of your social cause of your choosing - it can be any holiday or social cause. If you are feeling creative/silly/fancy and on the holiday path, you’re also welcome to make up your own holiday. (Here is a list of wacky holidays if you need inspiration)
If you're picking a social cause, pick something that is important to you that you think would be good to educate others about in a fun and creative way!
Create an animated greeting card for your holiday or an animated public service announcement/card for your social cause. Your card should use:
Sine/cosine (one or both!) to create some type of oscillating motion, circle, spiral, or size change. (It can be circular or it can just oscillate!)
Transformations to make something translate/scale/rotate. (This thing can be moving or stationary, it’s up to you!)
An animation that relies on incrementing a variable, such as x += speed
Your choice of text, sound, or both to capture the mood of your holiday
Some type of user interaction (clicks, keypresses, mouse on shape collisions, etc)
Whatever else you would like to showcase!
Your holiday or social cause should be EASILY IDENTIFIABLE as yours, and if you are picking a social cause, the viewer should be able to learn something about it.
Reflection Prompts:
What holiday or social cause did you choose, and why did you choose it?
How does your card showcase and celebrate the holiday you selected, or educate on the social cause you picked?
Who is the target audience for this card? (Who would be sending it and who would be receiving it?)
Summarize all of the p5.js skills you showcased in this project.
Sample Output
Culturally Responsive Best Practices
Within this design-based challenge, there are many prompts you can give students to make the project seem more relevant to them and the cultures of communities that they are a part of. (Please recall that communities can refer to a lot of things, including just the culture of being a teen, a Minecraft player, or a KPop fan - be mindful that you are allowing students to explore choice in their creations in a way that is authentic to them!)
The PSA half of this activity is easily scalable to focus students on a more social-justice focused lens; encourage students to consider causes that are important to them, and how they can bridge the gap between real-world social action and the coded PSA they have created.
Possible CR-SE Prompts (Greeting Card Focus):
Create a greeting card to celebrate any holiday you would like, real or imagined! (You wanna make a card for your birthday and only your birthday? Go for it.)
Create a greeting card for a holiday-specific to your cultural background, and highlighting any traditions you follow. (EX: St Nick’s day in the Midwest)
Create or remix a holiday that challenges traditional perception of what the holiday represents.
Level 3 + hide some easter eggs that can teach the user about your holiday while also celebrating it!
Extensions
Research on your own how to take input from a user through either a popup or an input box added to your sketch so you can find and add the name of the user to the program!
Research how to use millis() to count time, and trigger certain events in your program to happen after a specific amount of time has passed. (You could also use frameCount() for this, but millis() is a little more intuitive!)
Find a way to turn your postcard into an interactive game or scavenger hunt that the user must complete to reveal their message
Last updated
