[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
  • Overview/Teacher Feedback
  • Objectives
  • Suggested Duration
  • Blueprint Foundations Student Outcomes
  • Vocabularly
  • Planning Notes
  • Resources
  • Assessments
  • Do Now/Warm-Up (3-5 Minutes)
  • Traffic Light Planning && Work Time
  • Wrap Up (10 minutes)
  • Culturally Responsive Best Practices
  • Extensions

Was this helpful?

  1. Unit 2: Respond & Draw on Canvas

🗃U2LA1 Mini Project: Make a Traffic Light 🚦

How can I use conditional logic to create a responsive program?

Overview/Teacher Feedback

In this project, students will plan for and create their first complicated program: a traffic light, where the light color changes as the students are on different regions of the canvas.

This is the first time that students are really asked to navigate control flow and create a complex program learning the skills that have been introduced in this unit. It can be a bit overwhelming for them to get started, and the more time you spend on planning and organizing with them, the better off they will be for this project and future projects.

You may want to have paper/chart paper available for students to plan and for you to review with them. Try to make the biggest lift in helping them getting them set up with a solid plan; encourage students to use their resources to create the code that matches they plan that they have come up with.

While this is estimated to only take 2-3 days to complete, please be aware that students with more experience may take less time, and students completely new to coding may need a bit more.

Objectives

Students should be able to:

  • Create a plan to address control flow within their program

  • Create a program that responds to the mouse being on different areas of the screen

Suggested Duration

~2-3 Periods (90 - 135 minutes)

Blueprint Foundations Student Outcomes

Abstraction

  • Describe different things I tried in order to achieve a goal.

  • Describe how I might use patterns to express an idea.

  • Explain characteristics or patterns that informed a function or an interface I created.

Algorithms

  • Demonstrate the benefit of using an event, conditional or loop in my prototype.

  • Compare and contrast how conditionals or loops were used in classmates’ prototypes.

Programming

  • Discuss what can and cannot be done with a specific set of commands.

  • Describe the changes I made after testing at least three parts of my program.

Vocabularly

No new vocabularly is introduced in this project.

Planning Notes

Planning Notes
Materials Needed

Be prepared to do a lot of assistance in student planning - you may want them to plan together, and then share as a full group

Visual resources and guides are your friend!

Pens/Pencils

Index Cards/Half Sheets for Exit Slip (optional) Chart Paper

Markers

Resources

Assessments

Formative Assessment: Planning Page

Summative Assessment: Traffic Light Project

Do Now/Warm-Up (3-5 Minutes)

Draw a traffic light in your notebook and describe how it works. If you have time, explain other components that are a part of or associated with a traffic light.

Once students finish, ask them to share what they have come up with.

Traffic Light Planning && Work Time

Explain to students that they are going to be tasked with coding a traffic light that changes colors; however, this one will change colors based on where the mouse is. It may be helpful here to display a large image of a traffic light, or to draw one on chart paper, so you can demonstrate that the traffic light should turn red when the mouse is on the top third of the screen, yellow when the mouse is in the middle, and green when the mouse is in the bottom third.

Students will need to plan out their project before they begin. This can happen individually, as partners, or in a small group, depending on your preference - ask students to draw their light and determine what sort of code (elliipse, rect, fill, etc) they will need to use. Then, ask them to plot out what sort of conditions they will need to write in plain English and considering mouse coordinates. Remind students that they are working in thirds and can absolutely adjust canvas size This is a great time to break out markers or other planning tools to help students. If you’d like to prioritize kids using flow charts alongside their pseudocode, this can also be a time to do that.

Once most students have an idea, come together as a group to decide on one example that you can all have as reference in the classroom. It is also worth noting that some students may need assistance decomposing this problem - you may want to make a checklist, with student assistance, of what they should be doing first/second/third in this project. (EX: Create image of traffic light that doesn’t work, create variables, create conditionals, work in extension, etc)

After planning, students can begin coding. This is often an independent project, but can of course be reimagined as a pair-programming activity. Anticipate that coding and testing will most likely take a full one and a half to two periods.

Wrap Up (10 minutes)

This project will most likely take multiple days for students to complete. To give closure to each work time, consider asking to students to fill out some sort of check-in that will give their current comfort/frustration level as well as where they are in the project. It may also be useful to have students share their work with the class to either demonstrate something they are proud of or something that they are struggling with and would like assistance on at the end of each period.

Guiding Questions:

  • Where are you in this program?

  • What is going well?

  • What are you struggling with?

Culturally Responsive Best Practices

Pseudocode is something that can be applied to any project and is strongly encouraged as projects grow in complexity. There is no right or wrong way to do pseudocode - the purpose is to help a programmer think through something before applying computer-specific language. I like to get students in the habit of thinking in computer terms (using ‘if’ and ‘else’), but it’s also fine if they want to say ‘when’ or ‘because’ or any other word that comes to them (slang included - pseudocode has no place for ELA-style grammar or vocabulary policing). If students are more fluent in a different language, encourage them to pseudocode in that language - this is a planning tool meant to help them.

Extensions

Ask students to create the following in addition to their traffic light:

  • Style the lights so the strokeWeight/color changes to give a ‘glow’ when the mouse is in the correct place

  • Adjust your conditionals so the light changes only when you are on the correct third of the traffic light itself, not anywhere in the canvas in that region.

  • Create a ‘walk’ sign that will display only when the green light is on, and flash when the yellow light is on. (Random can help you do this at this point in the curriculum - really advanced students may benefit from learning about modulus and frameRate to help here, as well!)

PreviousU2LA1.3 - Logical Operators And/OrNextU2LA1.4: Draw with Mouse

Last updated 3 years ago

Was this helpful?

(Youtube Video)

(Youtube Video)

Pseudocode can also take many forms. As a person who leans heavily on written and verbal expression, I tend to prioritize written, verbal pseudocode. But students might also draw pictures, create flowcharts (mentioned above - also an industry-standard CS practice!), or even speak and record their ideas out loud. Speaking your programmers out loud actually has a rich legacy in programming - almost any programmer can tell you all about . Encourage students who want to record their ideas to listen back to them as they work! And for students who need debugging help, they can always grab a virtual ducky if they need it. ()

🗃️
Traffic Light Mini Project Launch
Traffic Light Planning Help
rubber ducking their code
Click ‘Talk to a Duck’ in the upper right corner.