Vidcode: SFX Magic
Educator Resources
60 minutes
JavaScript
the Activity
Make sparkles appear at random around the screen using a loop.
Big Idea: Loops make your code repeat!
-
CCSS.MATH.PRACTICE.MP1 Make sense of problems and persevere in solving them.
CCSS.MATH.PRACTICE.MP2 Reason abstractly and quantitatively.
NGSS ETS1.A: Defining and Delimiting Engineering Problems
CSTA 1B-AP-09 Create programs that use variables to store and modify data.
CSTA 1B-AP-10 Create programs that include sequences, events, loops, and conditionals.
CSTA 1B-AP-11 Decompose (break down) problems into smaller, manageable subproblems to facilitate the program development process.
CSTA 1B-AP-12 Modify, remix, or incorporate portions of an existing program into one's own work, to develop something new or add more advanced features.
AP CS P Standards
EK 4.1.1D Iteration is the repetition of part of an algorithm until a condition is met or for a specified number of times.
EK 5.2.1C Program instructions may involve variables that are initialized and updated, read, and written.
EK 5.3.1M Application program interfaces (APIs) and libraries simplify complex programming tasks.
lesson plan
Time: 45-60 minutes
10 minutes background
35 minutes coding
5 minutes sharing
5 minutes reflection
Background (10 minutes)
Review: What is randomness? (something you can't predict)
Review: What library is random in? (Math)
Congratulations, programmers! You are ready to level up your code with loops! A loop tells the computer to repeat one or more lines of code. You can use it to change things over time.
repeat(function(){ //do something here }, 1); The way we're going to do loops in JavaScript is with repeat. Repeat is a function that takes two arguments. The first argument is a function that holds the code that is to be repeated, and the second is a number that says how often to repeat it.
This function repeats your code over and over until the video ends. We can use it to make our visual elements move and change!
Code Challenge (35 minutes)
Have students complete the "SFX: Magic" tutorial. Circulate to make sure they are moving through the instructions, and reading them thoroughly. If students are having trouble grasping the point of the project, give them the example of vampires with tiny sparkles, or hearts around someone's head.
If there is extra time, challenge students to concentrate their effect placement around a specific part of the screen. They will have to use some more complex math to do so.
Sharing (10 minutes)
Be prepared to share what you created and share/explain how it worked.
Class:
Share projects as a class. How did you use special effects differently? Did anyone have ideas that you could build on in future projects? Make notes in your journal.
Partners:
Share projects with neighbors. Talk about what else you could do with loops to change things over time. Write down ideas in your journal.
Reflection (10 minutes)
What things did other students create that you'd like to know how to do?
What things did you create that you are proud of figuring out?
Put a completed project on the main screen to analyze. As a class, label all the parts of the repeat function to say what they're for.
Extended Reflection:
Are you surprised that you can put a function as an argument of a function? A function that takes another function as an argument is called a higher-order function. This is an advanced programming tool, but you're already using it!
In your journal, explain in your own words how the repeat function works.
