[1.0 JS] Introduction to Computational Media
  • Introduction to Computational Media
  • How to Use this Curriculum
  • Submit Feedback
  • Curriculum Extras
    • 🔮Curriculum Extras Overview
    • Imposter Syndrome (pt. 1)
      • Imposter Syndrome (pt 2)
    • Timers in p5.js
    • Time Functions: Crazy Clock Mini Project
    • Using Sliders
    • Getting Sound from Mic
    • Sound Recognition with ml5
  • Unit 1: Drawing, Variables, and Random
    • 🔮Unit 1 Overview
    • U1LA1.1 p5.js Introduction & Deconstruction
    • U1LA1.2 Line Functions and Parameters
    • U1LA1.3: Rectangles, Ellipses, and Layering
    • U1LA1.4 Various Shapes, Stroke, Weight, Fill
    • 🗃️🗃U1LA1 Mini Project: Taijitu Symbol
    • U1LA2.1 Intro to Variables - System Variables
    • U1LA2.2 Custom Variables in p5.js
    • U1LA2.3 Random Function & Variables
    • 🗃️🗃U1LA2 Mini Project: Custom Emoji pt. 1
    • U1LA.3.1 Intro to Color
    • U1LA3.2: RGB vs HSB Color Modes
    • U1LA3.3 Color Palettes & Design
    • 🎨🎨 Unit 1 Final Project: Abstract Album Art
  • Unit 2: Respond & Draw on Canvas
    • 🔮Unit 2 Overview
    • U2LA1.1 - Conditionals and if statements
    • U2LA1.2 - Conditionals and if, else if, else statements
    • U2LA1.3 - Logical Operators And/Or
    • 🗃️🗃U2LA1 Mini Project: Make a Traffic Light 🚦
    • U2LA1.4: Draw with Mouse
    • U2LA1.5: The Map Function
    • U2LA2.1 - Collision with Collide2D
    • U2LA2.2: Mouse Clicks && Shapes As Buttons
    • 🗃️🗃U2LA2 Mini Project: Light Switch Game
    • U2LA3.1: Key Presses && Nested Conditionals
    • 🎨🎨 Unit 2 Final Project: Interactive Drawing App
  • Unit 3: Arrays, Loops, Media
    • 🔮🔮 Unit 3 Overview
    • U3LA1.1: While Loops
    • U3LA1.2: For Loops Pt 1
    • U3LA1.3: Nested For Loops (For Loops pt 2)
    • 🗃️🗃U3LA1 Mini Project: Wallpaper Design
    • U3LA2.1: Introduction to Arrays
    • U3LA.2.2: Arrays with floor() and random()
    • 🗃️🗃U3LA2 Mini Project 1: Fortune Teller
    • U3LA2.3: Loops and Arrays
    • 🗃️🗃U3LA2 Mini Project 2: Random Starfield
    • U3LA3.1: Preload && Images
    • U3LA3.2: Tint && Image Manipulation
    • 🗃️🗃U3LA2 Mini Project 3: Vision Board
    • U3LA3.3: Images and Arrays with ml5
    • U3LA4.1 Fonts && Text Styling
    • 🗃️🗃U3LA4 Mini Project 4: Typography
    • U3LA5.1: Loading & Playing Sound Files
    • 🗃️🗃U3LA5 Mini Project: Keyboard/Patatap
  • 🎨🎨Unit 3 Final Project: Random Meme Generator
  • Unit 4: Motion, Animation, Transformation
    • 🔮🔮 Unit 4 Overview
    • U4LA1.1: Intro to Motion with Flipbooks
    • U4LA1.2: Move In All Directions & Make it Bounce
    • 🗃️🗃 U4LA.1: Make a Floating DVD Logo
    • U4LA2.1: Translation Battleship
    • U4LA2.2: Rotations
    • U4LA3.1: Sine & Oscillating Motion
    • U4LA3.2: Cosine & Circular Motion
    • 🎨🎨 Unit 4 Final Project: Animated Greeting Card/PSA
  • Unit 5: Functions & Abstraction
    • 🔮🔮 Unit 5 Overview
    • U5LA1.1: What is Abstraction?
    • U5LA1.2: Intro to Functions & Function Calls
    • U5LA1.3: Draw with Functions
    • 🗃️🗃 U5LA1 Mini Project: Custom Function Library
    • U5LA2.1: Data Type Scavenger Hunt
    • U5LA2.2: Functions that Return Values
    • U5LA2.3: Functions with Purpose
    • U5LA2.4: Functions with Boolean Returns
    • 🗃️🗃 U5LA2 Mini Project: Build Your Own Challenge
    • 🔮🔮 Unit 5 Final Project: Menu of Options
Powered by GitBook
On this page
  • Teacher Notes
  • Objectives
  • Prompt
  • Sample Output
  • Culturally Responsive Best Practices
  • Extensions

Was this helpful?

  1. Unit 4: Motion, Animation, Transformation

🎨 Unit 4 Final Project: Animated Greeting Card/PSA

How can I showcase my skills in an animated program?

PreviousU4LA3.2: Cosine & Circular MotionNext🔮 Unit 5 Overview

Last updated 3 years ago

Was this helpful?

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:

Animation of Strongbad from Homestar Runner using an old PC

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:

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):

  1. 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.)

  2. 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)

  3. Create or remix a holiday that challenges traditional perception of what the holiday represents.

  4. 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

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 s if you need inspiration)

🎨
list of wacky holiday
Example Code