Interactive Animations and Games - Lesson 18

Name(s)_______________________________________________ Period ______ Date ___________________

Project Guide - Interactive Card

Overview
You’re going to be developing an interactive digital card to share with someone you care about, but you’ll need to do
some planning before you start to program.

Before you jump into programming your scene, you need to plan! Let’s use our handy Problem-Solving Process to help
us! You can refer back to the Problem Solving Process and Programming handout to help you with the steps!

Define – READ REQUIREMENTS!!

Write out a short description of your scene, thinking about ways to include the following requirements: 3 sprites with
updating properties (both random movement and counter pattern), 2 conditionals responding to user input and 1
conditional triggered by a variable or sprite property. What sorts of shapes, sprites, animation, and text do you want to
include to meet those criteria?

My E-card is going to be about national bird day with birds flapping trough the sky and clouds also moving. The whole
card will repeat itself. When you hold space big text will appear and say, “Its national bird day!” and when the user
clicks the screen all the birds will start going backwards until they let go.

Prepare
Take a few minutes to sketch out your idea. It can include shapes, text, and sprites! QUICK DRAW

Shapes:

background(color)
rect(x, y, width, height)
ellipse(x, y, width, height)
line(x1, y1, x2, y2)
text(string, x, y, width, height)
textSize(pixels)
Color and Style:
fill(‘color’)
noFill()
stroke(‘color’)
noStroke()
strokeWeight()

Sprites: Use the table below to plan out your sprites. (You need at least 3, but you can use more if you want!) Next to
each sprite, plan out the image it will use, and which properties will be updated in the draw loop and how (you need to
use both random Number and the counter pattern movements).3 requirements in these directions!!
 Sprite Label Image(s) Properties

Moving birds A pixelated animated GIF of a bird that Moving.x bird = Moving.x bird + 4
(5 of these) flaps its wings. The color scheme is
green.

Clouds A few white circles that shape to make a Clouds.x = Clouds.x + 4

(3 of these) cloud.

Buildings A picture of a building that stays on the Building.height = building.height +

(2 of these) bottom of the screen that shows that we 0.05
are near land.

Interactions: The final element of your card to consider is how the user will interact with it, and how the sprites may
interact with each other. You’ll want to include at least 2 conditionals that respond to user input (such as keyDown())
as well as a conditional that responds to changing variables or sprite properties (such as sprite.y > 300). Use the
table below to plan out all of your conditionals and the corresponding action (you can add more rows if needed)

If / Else if / Else Condition Action

If/else Keydown “space” Text will appear saying, “Its national bird day!”
If the user does not click space the text will not
appear.

If/else Mousedown “left button” When you click, a random bird will start moving
backwards if the user doesn’t click the bird the
bird moves forward. Same with the clouds.

Do you need variables to store information about where something is? No

Variable Label Description

*I don’t need a variable* *I don’t need a variable*

Try
Once your teacher has approved your design, go to Code Studio to program your card.

Check your e-card to make sure it has everything it needs. Check the rubric!!

Reflect – after you are finished coding!!

Answer at least three of the reflection questions below:

1. Compare your program to the defined problem … Were you successful in solving all aspects of the problem? How
do you know?
I think I accomplished the goal because when I checked with the rubric, I had everything I need. I have
all aspects of the problem and I know it because when checked with the rubric I had everything I needed.

2. Ask a classmate to try your program … Are there places where they struggle or show confusion?
When I asked my shoulder partner to run my program, he did not show any signs of confusion.

3. Ask a classmate to read your code … Is your code and documentation clear and accurate?
When I asked my shoulder partner to read my program, he did not show any signs of confusion. He was able
2
to read all the lines of the code and understand it.

4. Try to "break" your program … Did you find types of interaction or input that you could handle better?
When I was about to start writing my reflection, I had the click button separate for each sprite, but I changed it
to all have in one conditional.

5. Are there any changes or improvements you can make to this program or another like it in the future?
I am fully satisfied with my program and maybe in the future I will make so that the building move with the
birds as well.