Math in Motion Camp: Javascript Apps With Algebra Gems

===================================
WHAT WE'LL LEARN
===================================

In this 8-session (4-week) class, learners will practice the essential algebra skills of recognizing patterns and representing them in symbols. While these algebra skills can sometimes seem very abstract in mathematics curricula, making games and animations gives them focus and purpose. For example, to make shapes move in a JavaScript animation, learners think about movement as repeated changes in position. In JavaScript, learners represent this pattern by using a variable to represent the shape's position and then changing that variable repeatedly via simple equations. Learners can "play" with these variables and equations, changing them to see how the animation responds. Because that response is immediate and concrete, learners develop an intuitive understanding of what the variables represent, why we use them, and how to manipulate them to produce the changes learners want. 

===================================
SCHEDULE
===================================
I am happy to add new days and times for this class if you need them (just click the "Request Another Time" button)! 

===================================
DAYS 1 AND 2: KALEIDOSCOPE APP
===================================
Learners will create a kaleidoscope app where they draw a shape that moves with the on-screen pointer. They will also write code to make the computer add reflected shapes, creating lovely and mesmerizing patterns. Mathematically, learners analyze and discuss the patterns in these reflections. For example, when the main shape moves to the right, another shape moves to the left by the same amount. Learners investigate how to represent the position of these shapes on a coordinate grid and then use the grid to reveal simple mathematical relationships between them. With that information in mind, learners write equations to make the movements appear on screen. 

In JavaScript, learners:
- write commands that create colors and ellipses
- explore how JavaScript's built-in variables can move a shape with the on-screen pointer
- create equations that move other shapes in opposition to the on-screen pointer
- and investigate the coordinate plane and how it facilitates creating mirror images.

===================================
DAYS 3 AND 4: MEDITATION APP
===================================
Learners extend their previous investigations into movement by creating several meditation apps – for example, apps where shapes not only move but also slowly change color, size, and transparency in calming ways. Music can be added, too. Mathematically, learners use the model of a flip book to represent these changes as a series of still images in which each element changes repeatedly. Then learners explore how to create variables that represent these changes and write equations to incorporate them into an animation.

In JavaScript, learners:
- create rectangles
- create and change variables
- use their variables to change position, size, color, and transparency
- add music to projects

===================================
DAYS 5 AND 6: SNOWFLAKES AND SEASHELLS
===================================
Learners use rotation to create an endless variety of snowflakes and seashells. Mathematically, learners continue using the flip book model to view snowflakes and seashells as a single line of shapes rotated like a pinwheel. Learners investigate angles and degrees that make pleasing rotations and describe mathematically why those angles are pleasing. Then learners explore how to create variables that represent these changes and write equations to incorporate them into an animation. 

In JavaScript, learners will:
- learn the "translate" and "rotate" commands that create rotations
- create and change variables for the angle of rotation, position, color, and the length of the line that is rotated.

===================================
DAYS 7 AND 8: CATCH ME GAME
===================================
Learners create a Catch Me game in which a ball moves in an arc across the screen towards a target. Players choose the speed of the ball and the gravity that pulls it downward, with the goal of getting the ball to touch the target. Mathematically, learners investigate what happens when the position of an object is controlled by two forces – one force that pushes it forward and a second force that pulls it downward. Building on their previous variables and equations for changes in position, they add an additional variable for gravity and note how it creates life-like motion. 

When learners complete this project, they will have used variables to represent many different kinds of change, deepening and extending their intuitive understanding of these essential algebra symbols.

In JavaScript, learners will:
- create and use variables to control the speed of the ball and the gravity that pulls it downward
- create and use variables to control the state of the game (different game phases when the players can change the ball speed versus when the ball is in motion further changes aren't allowed)
- create and use variables to calculate the distance between objects


=============================
HOW WE'LL LEARN
=============================

In this class we write code in type of JavaScript called p5.js, which makes it easy to draw shapes. 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 learners 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 projects.

Class sizes are small so that I can work with individual learners. 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 projects. I provide supplementary written or video materials for learners who move faster than the class.

This class is intended both for learners with no experience in text-based coding (writing commands instead of dragging blocks) and also for learners who've written short scripts in Roblox or Minecraft or who have completed tutorials and video lessons online. However, for more advanced learners 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) On each class day, learners should log into Open Processing *before 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!

#builder