Overview
In this learning activity, students will expand their understanding of for loops by using them to draw repeated designs on the y-axis in addition to the x-axis.
Unit 3 Loops, Arrays, Media
How can sounds, images, and fonts can be combined and manipulated with code?
1.3 For Loops II
How can we use iteration to abstract artwork?
Suggested Duration
45 minutes
Objectives
Students will be able to:
- Create for loops
Student Outcomes
Abstraction:
- Describe different things I tried in order to achieve a goal.
Algorithms:
- Explain why I used specific instructions to complete a task.
- Demonstrate the benefit of using an event, conditional or loop in my prototype.
Prototype:
- Experiment with the commands of a programming language.
Vocabulary
| Loops | A sequence of instructions that is repeated until a certain condition is met. |
|---|---|
| Iterations | The repetition of a process or utterance. |
| For Loop | The for loop loops through a block of code a specific number of times |
Resources
- 4.1 While and for loop | Code(4.1a to 4.2b)
- Learning Processing: Chapter 6. Loops
- Getting Started With p5.js: Chapter 4. Variables (Section: Repetition)
Drawing Columns
Try drawing a vertical column instead of a horizontal row. We will need to change the y value instead of the x value. Remember that if you want to draw repeated shapes filling the height of the canvas, your condition will be (y < height), and not width. Example
Diagonal Line
Say we wanted to increment both the x and y value each time the loop runs. Incrementing and x and y value of a repeating shape each loop would result in a diagonal line. Try incrementing both the x and y values in your for loop. There are a few ways that you can do this, but the simplest way might be to use the same variable for the x and y location of your shapes.
In this example, the x and y locations are contained in the variable y. The first shape is therefore drawn at the x-location 0 and the y-location 0. The shapes are incremented by 40 as long as y is less than or equal to the height of the canvas which is 600. Example.
We can see the diagonal line, but it doesn’t cover the entire canvas. Let’s see what happens if we draw a square canvas so that the width and height are equal.
This design looks a lot more symmetrical, but we won’t always have a square canvas. Sometimes we will want to use the same variable to increment multiple values (like both the x and y location) but we will want to adjust the variable for one of the values.
Adjusting Variables Inside A Loop
In the previous example, we had a canvas that was 600 pixels in width and 120 pixels in height. The width of the canvas was 5 times larger than its height. If I wanted to draw a diagonal line from the upper left corner of the canvas to the lower right, each shape would need to be incremented by 5 times the number of pixels on the x-axis compared to the y-axis.
We can accomplish this by adding an x variable instead of using the same variable for both the x and y location, and if the y variable is incrementing by 10 (y=y+10), the x variable can increment by 50 (x=x+50), I simplified the design to clarify this concept.
We can achieve the same result using only 1 variable by doing a little math inside of our for loop structure. We can use the same variable for the x and y locations of our shapes, but we can multiply the x location by 5.
Exercise: Design Using Multiple For Loops
Use loops to repeat your design in multiple directions. You can create a column and row, two diagonals at different angles, or maybe an X if you are up for a challenge.