Outschool
Open currency, time zone, and language settings
Log In

Math in Motion Camp: Javascript Apps With Algebra Gems

In this 8-class coding camp, learners create 4 JavaScript apps: Kaleidoscope, Meditation, Snowflakes, and Catch Me. They explore JavaScript while engaging 2 key algebra skills, recognizing patterns and representing them in symbols. #builder
Terry D [Code & Art, JavaScript, M.Ed]
Average rating:
5.0
Number of reviews:
(44)
Class
Play

What's included

8 live meetings
7 hrs 20 mins in-class hours

Class Experience

===================================
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
Learning Goals
In mathematics, students analyze and discuss patterns of change in position, color, size, transparency, rotation, and acceleration (gravity). Using the model of a flip book, learners represent these changes as a series of still images and then describe what is different in each image. Learners represent these changes using informal language. Then they explore variables and equations that represent these changes formally.

In JavaScript, learners will:
- create shapes and colors
- create and change variables
- use variables to change the position, color, size, transparency, rotation, and acceleration of shapes
- learn to measure the distance between shapes
- add music to projects
learning goal

Other Details

Parental Guidance
Students will create a login and join a coding group at Open Processing, where their class will write code and see the animations. Student logins at Open Processing include many safety features. For example, no personal information is collected, student profiles and projects are visible only to the teacher and classmates, and students are not allowed to comment or annotate projects outside their class. For a full description of these protections, see "Restricted Student Accounts" at https://intercom.help/openprocessing/en/articles/5228489-student-account-types. This free code editor, funded by the Processing Foundation, works on Windows, Mac, Linux, and Chromebook computers but isn't appropriate for iPads or phones.
External Resources
In addition to the Outschool classroom, this class uses:
Joined August, 2022
5.0
44reviews
Profile
Teacher expertise and credentials
15 years of experience teaching JavaScript, Python, Scratch, web development, robotics, and artbotics to students from 8 - 15 years old in private, public, and after-school settings. Two masters degrees in education – from Harvard Graduate School of Education with a focus on technology and from Lesley University in mathematics education. And, most of all, great love, patience, and respect for the many different ways that students learn and the different gifts they each bring to the classroom!

Reviews

Live Group Class
Share

$72

weekly or $144 for 8 classes
4x per week, 2 weeks
55 min

Completed by 2 learners
Live video meetings
Ages: 11-15
1-4 learners per class

This class is no longer offered
About
Support
SafetyPrivacyCA PrivacyLearner PrivacyManage Data PreferencesTerms
Financial Assistance
Get The App
Download on the App StoreGet it on Google Play
© 2024 Outschool