# Beginner question on drawing mulitple random shapes related to each other?

**URL:** <https://discourse.processing.org/t/beginner-question-on-drawing-mulitple-random-shapes-related-to-each-other/38552>\
**Category:** Beginners\
**Created:** [August 29, 2022, 10:26pm UTC](https://discourse.processing.org/t/beginner-question-on-drawing-mulitple-random-shapes-related-to-each-other/38552 "2022-08-29T22:26:34Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![i-draw-monkeys](https://avatars.discourse-cdn.com/v4/letter/i/c6cbf5/32.png) [@i-draw-monkeys](https://discourse.processing.org/u/i-draw-monkeys)\
**Post date:** [August 29, 2022, 10:26pm UTC](https://discourse.processing.org/t/beginner-question-on-drawing-mulitple-random-shapes-related-to-each-other/38552/1 "2022-08-29T22:26:34Z")

</div>

I’ve been learning Processing for about a month and have a new idea and am not quite sure how to approach. What would your approach be? Like what do I need to look up and learn to write something where I draw a shape using random() to generate coordinates or size and then draw a subsequent shape related to those random numbers and so on…

So for a tangible example, let’s say I draw a rectangle:

```auto
int randwidth = int(random(0,100));
int randheight = int(random(0100));
rect(0,0, randwidth, randheight);

```

Now I want to draw another rectangle of a new random height and random width that starts at the bottom right corner of the previous rectangle, I suppose I could write this:

```auto
rect(randwidth, randheight, newrandwidth, newrandheight);

```

But let’s say I want to do this 7 times (or 100 times) and end up with 7 rectangles each of different random heights and widths, each starting at the bottom right corner of the previous rectangle. How would I do this cleanly without many lines of code?

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [August 29, 2022, 11:15pm UTC](https://discourse.processing.org/t/beginner-question-on-drawing-mulitple-random-shapes-related-to-each-other/38552/2 "2022-08-29T23:15:21Z")

</div>

One way:

```auto
final int _num = 100;

void drawRectangles(int rndmW, int rndmH) {
  int randwidth = int(random(0, 600));
  int randheight = int(random(0, 600));
  rect(0, 0, randwidth, randheight);
  rect(randwidth, randheight, rndmW, rndmH);
}

void setup() {
  size(800, 800);
  background(209);
  for (int x = 0; x < _num; x++) {
    int randWidth = int(random(0, 600));
    int randHeight = int(random(0, 600));
    drawRectangles(randWidth, randHeight);
  }
}

void draw() {
}

```

---

<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:** [August 30, 2022, 9:50am UTC](https://discourse.processing.org/t/beginner-question-on-drawing-mulitple-random-shapes-related-to-each-other/38552/3 "2022-08-30T09:50:32Z")

</div>

A for-loop is the way to go.

You can make a rectangle and draw it. Then store the lower right corner.

In the next iteration use the data and set the data with your new position.

---

<div class="post-metadata">

**Author:** ![i-draw-monkeys](https://avatars.discourse-cdn.com/v4/letter/i/c6cbf5/32.png) [@i-draw-monkeys](https://discourse.processing.org/u/i-draw-monkeys)\
**Post date:** [August 30, 2022, 11:19am UTC](https://discourse.processing.org/t/beginner-question-on-drawing-mulitple-random-shapes-related-to-each-other/38552/4 "2022-08-30T11:19:30Z")

</div>

> [@svan](#):
>
> ```auto
> final int _num = 100;
> 
> void drawRectangles(int rndmW, int rndmH) {
> int randwidth = int(random(0, 600));
> int randheight = int(random(0, 600));
> rect(0, 0, randwidth, randheight);
> rect(randwidth, randheight, rndmW, rndmH);
> }
> 
> void setup() {
> size(800, 800);
> background(209);
> for (int x = 0; x < _num; x++) {
> int randWidth = int(random(0, 600));
> int randHeight = int(random(0, 600));
> drawRectangles(randWidth, randHeight);
> }
> }
> 
> void draw() {
> }
> 
> ```

Thanks!

This isn’t exactly it. It basically is repeating the first rectangle from (0,0) and then adding one rectangle to the bottom right corner. I want essentially no overlap and each subsequent rectangle to start at the previous rectangle’s bottom right corner.

---

<div class="post-metadata">

**Author:** ![i-draw-monkeys](https://avatars.discourse-cdn.com/v4/letter/i/c6cbf5/32.png) [@i-draw-monkeys](https://discourse.processing.org/u/i-draw-monkeys)\
**Post date:** [August 30, 2022, 11:21am UTC](https://discourse.processing.org/t/beginner-question-on-drawing-mulitple-random-shapes-related-to-each-other/38552/5 "2022-08-30T11:21:32Z")

</div>

Exactly!

Now tell a newbie how to do that 🙂

The problem where I get stuck is how to store the lower right corner and then use it in the next iteration. I could “manually” do it a few times, but what if I want to draw 1000 rectangles?

Is this where I would use an array? Vectors?

Basically how in a for-loop do I relate subsequent lines/shapes/whatever to randomly generated numbers generated within the loop?

---

<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:** [August 30, 2022, 11:26am UTC](https://discourse.processing.org/t/beginner-question-on-drawing-mulitple-random-shapes-related-to-each-other/38552/6 "2022-08-30T11:26:44Z")

</div>

That’s the secret of the for loop: it’s doing the repetition for you

Before setup ()

float x,y;

Inside the for loop:

```auto
Define myWidth, myHeight

// draw rect
rect(x,y, myWidth, myHeight);

x=x+myWidth;
y=y+myHeight;

} // for

```

Show your attempt please

---

<div class="post-metadata">

**Author:** ![i-draw-monkeys](https://avatars.discourse-cdn.com/v4/letter/i/c6cbf5/32.png) [@i-draw-monkeys](https://discourse.processing.org/u/i-draw-monkeys)\
**Post date:** [August 30, 2022, 2:04pm UTC](https://discourse.processing.org/t/beginner-question-on-drawing-mulitple-random-shapes-related-to-each-other/38552/7 "2022-08-30T14:04:18Z")

</div>

This works!

```auto
float x;
float y;

void setup() {
  size(700,700);
  background(255);
}

void draw() {
  for (int i=0; i < 8; i++){
float myWidth = (random(100));
float myHeight = (random(100));
rect(x, y, myWidth, myHeight);
x=x+myWidth;
y=y+myHeight;
  }
  noLoop();
}

```

This draws me 8 rectangles exactly how I want. This is so simple, and yet it is making my head hurt. I definitely only partly understand for loops.

---

<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:** [August 30, 2022, 4:47pm UTC](https://discourse.processing.org/t/beginner-question-on-drawing-mulitple-random-shapes-related-to-each-other/38552/8 "2022-08-30T16:47:34Z")

</div>

Nice.

my version

- unique colors (using `lerpColor` command)
- giving x and y initial random values so they are not at 0,0 initially
- using random command with 2 parameters, so we have a minimum value bigger than 0

```auto

// pre-set the first rect  
float x=random(10, 90), 
  y=random(10, 90);

color RED = color(255, 0, 0); 
color GREEN = color(0, 255, 0); 

// --------------------------------------------------------------------------------

void setup() {
  size(700, 700);
  background(255);
  // stop running 
  noLoop();
}

void draw() {
  // main loop 

  // for loop 
  for (int i=0; i < 8; i++) {
    // set width and height 
    float myWidth = random(15, 100);
    float myHeight = random(15, 100);

    // calc color 
    float amt = map(i, 0, 8, 0, 1); 
    fill (lerpColor(RED, GREEN, amt));

    // draw rect 
    rect(x, y, myWidth, myHeight);

    // store the new lower right corner 
    x+=myWidth;
    y+=myHeight;
  } // for 
  //
} // func 
//

```

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [August 30, 2022, 8:06pm UTC](https://discourse.processing.org/t/beginner-question-on-drawing-mulitple-random-shapes-related-to-each-other/38552/9 "2022-08-30T20:06:37Z")

</div>

Question: If you only want it to draw once, why not move the ‘for’ loop to setup() and forget the noLoop()?

---

<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:** [September 2, 2022, 12:27pm UTC](https://discourse.processing.org/t/beginner-question-on-drawing-mulitple-random-shapes-related-to-each-other/38552/10 "2022-09-02T12:27:18Z")

</div>

> [@i-draw-monkeys](#):
>
> it is making my head hurt. I definitely only partly understand for loops.

Yeah, I guess it’s just a matter of practice and getting used to it.

---

<div class="post-metadata">

**Author:** ![i-draw-monkeys](https://avatars.discourse-cdn.com/v4/letter/i/c6cbf5/32.png) [@i-draw-monkeys](https://discourse.processing.org/u/i-draw-monkeys)\
**Post date:** [September 5, 2022, 6:33pm UTC](https://discourse.processing.org/t/beginner-question-on-drawing-mulitple-random-shapes-related-to-each-other/38552/11 "2022-09-05T18:33:55Z")

</div>

> [@Chrisir](#):
>
> ```auto
> // pre-set the first rect  
> float x=random(10, 90), 
> y=random(10, 90);
> 
> color RED = color(255, 0, 0); 
> color GREEN = color(0, 255, 0); 
> 
> // --------------------------------------------------------------------------------
> 
> void setup() {
> size(700, 700);
> background(255);
> // stop running 
> noLoop();
> }
> 
> void draw() {
> // main loop 
> 
> // for loop 
> for (int i=0; i < 8; i++) {
> // set width and height 
> float myWidth = random(15, 100);
> float myHeight = random(15, 100);
> 
> // calc color 
> float amt = map(i, 0, 8, 0, 1); 
> fill (lerpColor(RED, GREEN, amt));
> 
> // draw rect 
> rect(x, y, myWidth, myHeight);
> 
> // store the new lower right corner 
> x+=myWidth;
> y+=myHeight;
> } // for 
> //
> } // func 
> //
> 
> ```

Interesting and cool to see it another way! Learning a lot here…thanks

---

<div class="post-metadata">

**Author:** ![i-draw-monkeys](https://avatars.discourse-cdn.com/v4/letter/i/c6cbf5/32.png) [@i-draw-monkeys](https://discourse.processing.org/u/i-draw-monkeys)\
**Post date:** [September 5, 2022, 6:35pm UTC](https://discourse.processing.org/t/beginner-question-on-drawing-mulitple-random-shapes-related-to-each-other/38552/12 "2022-09-05T18:35:35Z")

</div>

Because I didn’t know that would work 🙂 thanks for telling me!

---

<div class="post-metadata">

**Author:** ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)\
**Post date:** [September 5, 2022, 9:54pm UTC](https://discourse.processing.org/t/beginner-question-on-drawing-mulitple-random-shapes-related-to-each-other/38552/13 "2022-09-05T21:54:41Z")

</div>

> [@i-draw-monkeys](#):
>
> ```auto
> for (int i=0; i < 8; i++){
> float myWidth = (random(100));
> float myHeight = (random(100));
> rect(x, y, myWidth, myHeight);
> x=x+myWidth;
> y=y+myHeight;
> }
> 
> ```
> 
> I definitely only partly understand for loops.

not much to grasp actually:

`for (this var ; while this condition is not met; do this to it)`and…  
`{do this using that var (or not) until the condition is met}` then…  
follow the rest of the code  
so  
`for (int i = 0; i < 8; i++)` means while `i` (initialized as zero) is less than  
8 keep adding one to it, execute the stuff inside brackets, test to see if it is less than 8. If it’s not, repeat, if it is, go ahead outside the brackets.

So if the condition is never met you would never get out the brackets

this is an infinite loop (not to be done!! unless you are really sure you want it):

```auto
//this code will break your program
for ( int = 0 ; i < 0; i++){
// do something... in this case for ever
} 
rect(0, 0, 10, 10);// this line never will be executed as the program wil be stuck inside the for loop

```

The tricky part in the loop suggested above is: `x=x+myWidth;` where the randomly choose width is added to the original x value, and become the next x. So the next rectangle is draw at the end of the last.

Lets say `x = 0`.  
Then, `myWidth` gets a value of 135 from random assingmet. (`float myWidth = (random(150));`)

the rect is, then, draw with this values `rect(0, y, 135, myHeight);`

After that `x=x+myWidth` so `x = 0 + 135` and `x` now has the value of 135.

The process is repeated:

`myWidth` now gets 78 from the random generator.

the rect is, then, draw with this values `rect(135, y, 78, myHeight);`

After that `x=x+myWidth` so `135 + 78` and `x` now has the value of 213.

The process is repeated until i is equal to 7 (here `i` is not being used inside the loop).

Same logic applies to `y` and `myHeight`.  
Is often useful try to read the code as the machine will when it’s hard to understand…

cheers