Overview
In this learning activity, students will expand their understanding of for loops by using them to draw repeated designs with varying sizes and colors.
Unit 3 Loops, Arrays, Media
How can sounds, images, and fonts can be combined and manipulated with code?
1.4 Variation In For Loops
How can we use iteration to abstract artwork?
Suggested Duration
45 minutes
Objectives
Students will be able to:
- Create for loops
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.
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)
Incrementing Size
Until now, we used our growing values inside of our loops to adjust the location of our shapes, but our growing x value can be used to play with other parameters apart from the ellipse's position. Here, we use an incrementing x value to change the circles' sizes: Notice how in this code, the x variable is also used for the width and height of the ellipse but it is divided by 10.
We saw the concept of adjusting the existing variable to better fit the parameter in the previous lesson when we multiplied the x location by 5 to allow the diagonal line to fit the canvas. In this case the x variable is being divided by 10 when used for the size. X is being incremented by 100 in our loop. Let’s see what happens when we don’t divide x and just use the variable for the size of the ellipses.
It’s hard to see, but our ellipse begins at 100 pixels in width and height, and then increments to 200,300, etc. Our canvas is only 400 pixels in height, which means that when x=400, the ellipse is already too big for our canvas.
When we divide x by 10 however, the first ellipse is 10 pixels in height and width since x is set to 100 and 100/10=10. In the second loop x=200. 200/10=20, so our second ellipse is 20 pixels in height and width. This process continues and our ellipse grows but at increments that better fit our canvas.
Incrementing Color
We can increment color the same way. Use x for any value and divide x to achieve the effect that you want.
Exercise 1: Incrementing Color in a For Loop
Play with these values and note the changes in the ellipses. Try using x for the other color values or for alpha so that the ellipses range from transparent to opaque.
Specific Numbers of Repetition
We can also use loops to create a specific number of elements and alter a value inside of the loop itself. This is a very common way to use for loops. In this example I wanted to draw 5 ellipses and so I wrote a loop that would run 5 times. I decreased the size of the ellipse inside of the loop so that we will get a smaller circle every time.
Exercise #2: Create a design with an incrementing color or size value
In the example below I iterated on my smiley face designs and added a mouth that opens a little bit more with each face that is drawn.