# How can I use a "for" loop to redraw something multiple times?

**URL:** <https://discourse.processing.org/t/how-can-i-use-a-for-loop-to-redraw-something-multiple-times/8585>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [February 21, 2019, 2:53am UTC](https://discourse.processing.org/t/how-can-i-use-a-for-loop-to-redraw-something-multiple-times/8585 "2019-02-21T02:53:20Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![bh1234](https://avatars.discourse-cdn.com/v4/letter/b/ecae2f/32.png) [@bh1234](https://discourse.processing.org/u/bh1234)\
**Post date:** [February 21, 2019, 2:53am UTC](https://discourse.processing.org/t/how-can-i-use-a-for-loop-to-redraw-something-multiple-times/8585/1 "2019-02-21T02:53:20Z")

</div>

So, I’m taking this CSS 101 class and our professor has given us some code that draws an owl:

_void setup ( ) {_  
_size(600,600);_  
_background(200);_  
_smooth( );_  
_frameRate(30);_  
_}_

_void draw ( ) {_  
_owl(35,100);_  
_}_

_void owl (int x, int y) {_  
_stroke(0);_  
_strokeWeight(70);_  
_line(x, -35+y, x, -65+y); // body_  
_noStroke();_  
_fill(255);_  
_ellipse(-17.5+x, -65+y, 35, 35); // left eye dome_  
_ellipse( 17.5+x, -65+y, 35, 35); // right eye dome_  
_arc(0+x, -65+y, 70, 70, 0, PI);_  
_fill(0);_  
_ellipse(-14+x, -65+y, 8, 8); // left eye_  
_ellipse( 14+x, -65+y, 8, 8); // right eye_  
_quad(0+x, -58+y, 4+x, -51+y, x, -44+y, -4+x, -51+y);_  
_}_

This creates **one** owl. How do I create a for() loop to create eight owls exactly next to each other? This seems like it should be some basic work but I’m honestly stumped.

And how would I create more rows under those, and how can I create those rows of owls to increase by one?

Example: Row 1 has 3 owls, row 2 has 3 owls, row 3 has 4 owls, etc.

EDIT: Forgot to add, professor wants us to clear the background before each draw()

---

<div class="post-metadata">

**Author:** ![bryan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bryan/32/2538_2.png) [@bryan](https://discourse.processing.org/u/bryan)\
**Post date:** [February 21, 2019, 3:35am UTC](https://discourse.processing.org/t/how-can-i-use-a-for-loop-to-redraw-something-multiple-times/8585/2 "2019-02-21T03:35:49Z")

</div>

Hi! i really suggest you to read the book “Learning Processing” by Daniel Shiffman. It explain you about how you can create things in processing, in a really easy way.

About your code. Owl is a function who stores the way of creating an owl (like a template) using shapes like ellipse, lines, and squares. the arguments x and y are the positions where you want to draw your owl (in this case, at 35 in x, and 100 in y), so if you call again that **function** with other parameters, you’ll see the owl get drawn in that position.

Either way, i encourage you to give a quick look at that book, you’ll find how to do it faster than you think.

---

<div class="post-metadata">

**Author:** ![bh1234](https://avatars.discourse-cdn.com/v4/letter/b/ecae2f/32.png) [@bh1234](https://discourse.processing.org/u/bh1234)\
**Post date:** [February 21, 2019, 7:08am UTC](https://discourse.processing.org/t/how-can-i-use-a-for-loop-to-redraw-something-multiple-times/8585/3 "2019-02-21T07:08:16Z")

</div>

I’m still lost… I don’t know how to make the draw(), draw the owl function multiple times with the needed “x” translations by using for().

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 21, 2019, 7:27am UTC](https://discourse.processing.org/t/how-can-i-use-a-for-loop-to-redraw-something-multiple-times/8585/4 "2019-02-21T07:27:17Z")

</div>

Look at the reference

See for command

when you have for(int i…

you can use i for the x

owl( 35 + i, …

Work from there

---

<div class="post-metadata">

**Author:** ![bryan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bryan/32/2538_2.png) [@bryan](https://discourse.processing.org/u/bryan)\
**Post date:** [February 21, 2019, 7:27am UTC](https://discourse.processing.org/t/how-can-i-use-a-for-loop-to-redraw-something-multiple-times/8585/5 "2019-02-21T07:27:39Z")

</div>

ok, you really need to check the reference to know how the for loop works: [https://processing.org/reference/for.html](https://processing.org/reference/for.html)

In your particular example, you’ll need to use a nested loop. If you check the link above, you’ll notice that the fourth example it generates a kind of bidimensional pattern like:

```auto
void setup() {
  size(640, 480);
  stroke(255);
}

void draw() {
background(0);
  // Nested for() loops can be used to
  // generate two-dimensional patterns
  for (int x = 0; x < 640; x = x+50) {
    for (int y = 0; y < 480; y = y+50) {
      point(x, y);
    }
  }
}

```

Ok, this creates a grid of points. If you notice the function **point(x, y)** expects an x and y coordinates as well. what if you replace that point function by the owl function. what if you change the parameters of the for loops.  
keep trying!