[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
  • NYS Standards
  • Blueprint Foundations Student Outcomes
  • Vocabulary
  • Planning Notes
  • Resources
  • Assessments
  • Do Now/Warm Up (~5-7 minutes)
  • Repeat Shapes with a While Loop (15 min)
  • Student Practice & Play (15 - 20 min)
  • Wrap Up (5 min)
  • Extensions

Was this helpful?

  1. Unit 3: Arrays, Loops, Media

U3LA1.1: While Loops

How can we use iteration to make abstract artwork?

Overview && Teacher Feedback

This lesson introduces repetition using while loops. Students will create a sketch with a repeated element to fill a specific space.

While loops is a great introduction to loops because of the syntax for declaring, conditional checking and incrementation are not as complicated as it is for a for loop.

Common misconceptions are forgetting to increment the variable, writing a valid condition and forgetting to use curly brackets. It is always important to have students write comments to debug their code.

This pair-programming experience is very open-ended - try to encourage students to talk together about features for their program, rather than each person deciding for the group when it is their turn to navigate.

Push students to think about the user experience in leaving their feedback: did they know while loop is working correctly? How could this be improved?

Objectives

Students should be able to:

  • Explain how the components of the while loops are essential to efficiency

  • Create while loops

  • Use while loops to generate multiple shapes

Suggested Duration

45 Minutes (~1 period)

NYS Standards

9-12.CT.4 Implement a program using a combination of student-defined and third-party functions to organize the computation.

9-12.CT.8 Develop a program that effectively uses control structures in order to create a computer program for practical intent, personal expression, or to address a societal issue.

9-12.DL.1 Type proficiently on a keyboard.

9-12.DL.2 Communicate and work collaboratively with others using digital tools to support individual learning and contribute to the learning of others.

Blueprint Foundations Student Outcomes

Abstraction

  • Give examples of specific patterns in something I can see, do or touch.

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

  • Explain how I might help others identify patterns.

Algorithms

  • Explain why I used specific instructions to complete a task.

  • Compare and contrast my instructions with other instructions that complete the same task.

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

Prototype

  • Experiment with the commands of a programming language.

  • Explain why I chose specific commands to communicate my instructions.

Vocabulary

  • loop - a sequence of instructions that is repeated until a certain condition is no longer met.

  • iteration - the repetition of a process

  • while loop - a control flow statement that allows code to be executed repeatedly as long as the condition is true

  • control structure - a block of code that that specifies the flow of a program according to specific conditions

Planning Notes

Planning Notes
Materials Needed

There are no specific planning notes for this lesson, but it is the first lesson students will be using media - whoo!

No special materials needed.

Resources

Assessments

Assess the Do Now assignment. Check for the ability to:

  • Identify the changeable values of an ellipse.

  • Identify a design pattern in the placement of the ellipses.

Assess the learning activity. Check for the ability to:

  • Complete exercises #1 & 2.

  • Show understanding of the while loop syntax and structure.

  • Apply while loops to create a design with multiple simple and/or complex shapes placed around the canvas.

Assess the Wrap Up assignment. Check for the ability to:

  • Explain the use of while loops.

  • Create while loops to repeat multiple shapes.

  • Identify the challenges of working with while loops.

Do Now/Warm Up (~5-7 minutes)

Have students create 5 equidistant ellipses.

Open a new sketch, name it U3LA1 While loops and recreate the image below

Ask students to do the following:

  1. Add 5 more ellipses to the current row, they will most likely get frustrated because they will have to keep the ellipses equidistant.

  2. Answer the prompt: how we can call the ellipse function more efficiently? Push their thinking to think about why loops are necessary.

Repeat Shapes with a While Loop (15 min)

From this Do Now, ask students how could they code their loops effectively? Students might talk about copy/pasting lines of code, adjusting only selected numbers, etc. Most, if not all students, probably came to a solution like so:

function draw() {
	background(180);
	ellipse(100, 60, 40, 40);
	ellipse(200, 60, 40, 40);
	ellipse(300, 60, 40, 40);
	ellipse(400, 60, 40, 40);
	ellipse(500, 60, 40, 40);
}

But this is a lot of repitition, and something that students should start getting used to is if something looks like it repeats frequently, there is probably an easier, or at least more efficient, way to handle it in our code.

Talk students through the actual process that you are following, which is something to the effect of:

Essentially, we are are drawing a new circle every 100 pixels, and we may be tempted to write a conditional statement that says something to that effect. However, students will find this conditional doesn't work as intended, and that is because conditionals are not meant to act as loops. Conditionals run once, and once the condition is met, they stop running. (Albeit in the draw function, which is called repeatedly, it can appear as if the loop is repeating.)

Luckily, there is a control structure that can help us do this! Introducing the while loop: a loop that only runs WHILE a certain condition is true, and stops running once it ceases to be true. It looks something like this:

var x = 100
while(x < width){
  ellipse(x, 60, 40,40)
  x = x + 100
}

There are three steps needed to make sure our loop works correctly:

  1. We declare and initialize a variable. Initializing a variable is setting the initial value for that variable, or where you want it to start. In this case, we would like to it begin at 100 pixels.

  2. We check whether it meets a condition. The condition is inside the parentheses. We want to execute the code in the brackets on condition that x is still less than the width of the canvas.

  3. We change the value of that variable in a way that will eventually make it meet the condition. In the code below, 100 is added to x inside the brackets. Every time the code is run x will increase by 100 until its value is larger than the width of the canvas. Then the loop will be completed and the program will move on in the code.

This ensures we don't create an infinite loop, which will certainly crash our browsers. Be prepared for browser crashes - make sure students DO NOT have the AutoSave feature selected as it might refresh before their loops are done. When students inevitably crash everything, cheer for them! They know enough code to break something!

Code this for loop with students so that they have an example saved in their account. (They can comment out previous ellipses from the Do Now.)

The big benefit of loops is that not only does it make our code cleaner and more efficient, but our code is now easy to change, customize, and update. If we want the row of ellipses to start somewhere else, we can adjust the starting variable. If we want to increase or decrease the spacing between the ellipses, we can adjust what we add to x. And we can change the circles themselves without having to make edits to multiple places in our code! Give students 2-3 minutes to just play with numbers and add shapes/features to their loop - it's important they understand the loop can do more than just draw one repeated shape.

Student Practice & Play (15 - 20 min)

After students have had a chance to experiment with the code from the lesson section, send students to work either individually or in pairs/small groups, based on your classroom. (We STRONGLY encourage collaborative pair or group work to help students grow their soft skills as they learn to code!)

Instruct students to use the while loop to do the following (and be on the lookout for curly bracket errors, and multiple while loop errors):

  • Start a row at the left end of the canvas

  • Draw a row of ellipses 50 pixels apart

  • Draw ellipses only on the left half of the canvas

For students who need an extra spicy challenge, ask them to try to recreate one of the following in their while loop. Make sure they understand they only need ONE while loop that will contain multiple shapes!

Alternately, or in addition, students may take a design they have created previously and try to get it to repeat in a while loop, or build a new custom design that will be repeated.

Wrap Up (5 min)

Ask students to post their project links in a forum such as Slack or Google Classroom. Then, have them view and comment on two other projects, leaving a glow and grow for each

Guiding questions:

  • How do while loops make the code more efficient?

  • Explain the parts of a while loop. Why are they important?

  • What was challenging about using a while loop?

Extensions

Give students specific and logically challenging tasks for while loops such as:

  • Repeating their emoji from unit 1

  • Creating a grid of ellipses

Previous🔮 Unit 3 OverviewNextU3LA1.2: For Loops Pt 1

Last updated 2 years ago

Was this helpful?

(Youtube Video) | (4.1a to 4.2b)

While Loop w/ Code Comments Code Sample ( | )

Spicy Challenge Example Code Sample (| )

4.1 While and for loop
Code
Learning Processing: Chapter 6. Loops
Getting Started With p5.js: Chapter 4. Variables (Section: Repetition)
p5 editor
repl.it
p5 editor
repl.it
A row of five equally spaced, congruent ellipses
Handwriting that describes the loop of drawing ellipses and moving right.
Row of concentric, differently colored circles looking like targets.
Row of red 😐 faces.