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

Processing Coding Questions
1

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()

2

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.

1 Like
3

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().

4

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

1 Like
5

ok, you really need to check the reference to know how the for loop works: 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:

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!

1 Like