# Why my draw() don't drawing continuously?

**URL:** <https://discourse.processing.org/t/why-my-draw-dont-drawing-continuously/39078>\
**Category:** Beginners\
**Tags:** homework\
**Created:** [October 4, 2022, 2:30pm UTC](https://discourse.processing.org/t/why-my-draw-dont-drawing-continuously/39078 "2022-10-04T14:30:03Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![C2014](https://avatars.discourse-cdn.com/v4/letter/c/f1d935/32.png) [@C2014](https://discourse.processing.org/u/C2014)\
**Post date:** [October 4, 2022, 2:30pm UTC](https://discourse.processing.org/t/why-my-draw-dont-drawing-continuously/39078/1 "2022-10-04T14:30:04Z")

</div>

```auto
void setup () { size (842,480);frameRate(20);}
float x = random (842);
float y = random (480);
float r = random (256);
float g = random (256);
float b = random (256);
  void draw () {loop ();fill (r,g,b);rect (x,y,x,y);}

```

Can someone explain me pls why ? :3

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [October 4, 2022, 2:38pm UTC](https://discourse.processing.org/t/why-my-draw-dont-drawing-continuously/39078/2 "2022-10-04T14:38:13Z")

</div>

Hi @C2014,

Welcome to the forum! 😉

As stated in the post, please format your code with the `</>` button. (also press Ctrl+T to format your code in the Processing editor)

In fact the `draw()` function is being executed multiple time per second (in this case roughly 20).

The issue is that the `x`, `y`, `r`… variables are declared outside of the `setup()` and `draw()` so their random value is only assigned once.

Which means that it’s drawing your rectangle repeatedly with the same parameters.

Try to think of a way to move those lines so that at each `draw()` call, a new random value is used 😇

---

<div class="post-metadata">

**Author:** ![C2014](https://avatars.discourse-cdn.com/v4/letter/c/f1d935/32.png) [@C2014](https://discourse.processing.org/u/C2014)\
**Post date:** [October 4, 2022, 2:43pm UTC](https://discourse.processing.org/t/why-my-draw-dont-drawing-continuously/39078/3 "2022-10-04T14:43:27Z")

</div>

thank you for the answer, Can you please give me a hint, how i can modify the code to be sure that the created rectanlges may never leave the bounds of the window?

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [October 4, 2022, 2:48pm UTC](https://discourse.processing.org/t/why-my-draw-dont-drawing-continuously/39078/4 "2022-10-04T14:48:28Z")

</div>

No problem!

Try to think about how you would create a rectangle starting from the top left corner that wouldn’t overflow the canvas size.

What maximum size should it have? In width, height?

The process can be the following:

1. Pick a random point on the canvas
2. Compute random dimensions (width and height) for the rectangle based on the window size
3. Display that rectangle

---

<div class="post-metadata">

**Author:** ![C2014](https://avatars.discourse-cdn.com/v4/letter/c/f1d935/32.png) [@C2014](https://discourse.processing.org/u/C2014)\
**Post date:** [October 4, 2022, 2:54pm UTC](https://discourse.processing.org/t/why-my-draw-dont-drawing-continuously/39078/5 "2022-10-04T14:54:15Z")

</div>

But if the starting point of rect is for example in the middle of the screen, then, despite the restrictions in X or Y, it will still go beyond the window

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [October 4, 2022, 2:58pm UTC](https://discourse.processing.org/t/why-my-draw-dont-drawing-continuously/39078/6 "2022-10-04T14:58:51Z")

</div>

> [@C2014](#):
>
> despite the restrictions in X or Y, it will still go beyond the window

No, think about it. If the corner is in the middle of the screen, it can still be inside in the window.

```processing
void setup() {
  size(200, 200);
}

void draw() {
  rect(width / 2, height / 2, 90, 80);
  noLoop();
}

```

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/a/aa14c2c5082820a5db71ed2f68cd16a5cebd85b0.png)

Then what would be it’s maximum `width` and `height` from that point?

---

<div class="post-metadata">

**Author:** ![C2014](https://avatars.discourse-cdn.com/v4/letter/c/f1d935/32.png) [@C2014](https://discourse.processing.org/u/C2014)\
**Post date:** [October 4, 2022, 3:06pm UTC](https://discourse.processing.org/t/why-my-draw-dont-drawing-continuously/39078/7 "2022-10-04T15:06:27Z")

</div>

Sorry, I’m not really catching up with your idea, Imagine that the rectangle will be near the maximum width and due to random () scale, it will still go beyond

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [October 4, 2022, 3:22pm UTC](https://discourse.processing.org/t/why-my-draw-dont-drawing-continuously/39078/8 "2022-10-04T15:22:49Z")

</div>

> [@C2014](#):
>
> Imagine that the rectangle will be near the maximum width and due to random () scale, it will still go beyond

That’s why you need to constraint the random value to be in a certain range `[0, maximumWidth]` (same for height).

You can do that with [`random(low, high)`](https://processing.org/reference/random_.html).

You need to compute that `maximumWidth` value geometrically, make a drawing to see what it looks like 😉

---

<div class="post-metadata">

**Author:** ![C2014](https://avatars.discourse-cdn.com/v4/letter/c/f1d935/32.png) [@C2014](https://discourse.processing.org/u/C2014)\
**Post date:** [October 4, 2022, 3:30pm UTC](https://discourse.processing.org/t/why-my-draw-dont-drawing-continuously/39078/9 "2022-10-04T15:30:49Z")

</div>

Okay, thank you very much, apparently it’s too complicated for me, or I just don’t understand your idea completely

---

<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:** [October 4, 2022, 3:40pm UTC](https://discourse.processing.org/t/why-my-draw-dont-drawing-continuously/39078/10 "2022-10-04T15:40:09Z")

</div>

> [@C2014](#):
>
> Sorry, I’m not really catching up with your idea, Imagine that the rectangle will be near the maximum width and due to random () scale, it will still go beyond

What would you like to do in this case? You can.  
Avoid creating this rect?  
Adapt the size to never go beyond canvas?  
Draw it mirrored?  
You can.  
🙂

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [October 4, 2022, 3:46pm UTC](https://discourse.processing.org/t/why-my-draw-dont-drawing-continuously/39078/11 "2022-10-04T15:46:25Z")

</div>

All right here is a visual representation of what you are trying to achieve:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/6/e6519d200c467b628aa402f4c4b747155df31aa0.png)

- `(cx, cy)` are the top left coordinates of the rectangle
- The canvas has `width` and `height` dimensions

Then ideally if you randomly picked this point on the canvas, then what is the maximum size of the rectangle so that it doesn’t overflow the canvas?

You want to compute its `max width` (maximum width) and `max height` (maximum height) so that the `random` value will not be **greater** than that.

A pseudo code:

```auto
// Pick a random point on the canvas
float cx = random(width);
float cy = random(height);

float maxWidth = ???;
float maxHeight = ???;

float rectWidth = random(0, maxWidth);
float rectHeight = random(0, maxHeight);

// And here you have it!!

```

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [October 4, 2022, 3:48pm UTC](https://discourse.processing.org/t/why-my-draw-dont-drawing-continuously/39078/12 "2022-10-04T15:48:59Z")

</div>

One other approach is to use a conditional **if/else statement**.  
In pseudo: If rect x position & y position is greater than width & height then reset x position & y position to within width and height dimensions.

EDIT: But as @josephh has outlined, you will need to add width & height for the rectangles into your conditions.

🤓

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [October 4, 2022, 3:54pm UTC](https://discourse.processing.org/t/why-my-draw-dont-drawing-continuously/39078/13 "2022-10-04T15:54:34Z")

</div>

Yes this is one possible solution of course! 😉

Another one is:

- Compute random width and height
- If it overflows the canvas
- Generate it again
- Do that until the rectangle does not overflow the canvas

This solution might be inexpensive because of additional loop iterations (if it did overflow). But it’s straightforward to implement and doesn’t require any “math”.

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [October 4, 2022, 3:58pm UTC](https://discourse.processing.org/t/why-my-draw-dont-drawing-continuously/39078/14 "2022-10-04T15:58:44Z")

</div>

Touche @josephh!!  
(I have to write more characters for this to post. So there).  
🤓

---

<div class="post-metadata">

**Author:** ![C2014](https://avatars.discourse-cdn.com/v4/letter/c/f1d935/32.png) [@C2014](https://discourse.processing.org/u/C2014)\
**Post date:** [October 4, 2022, 4:05pm UTC](https://discourse.processing.org/t/why-my-draw-dont-drawing-continuously/39078/15 "2022-10-04T16:05:39Z")

</div>

I can just reduce the scale to width/2 and height/2, to minimize the change of overgrowth

> [@josephh](#):
>
> ```auto
> // Pick a random point on the canvas
> float cx = random(width);
> float cy = random(height);
> 
> float maxWidth = ???;
> float maxHeight = ???;
> 
> float rectWidth = random(0, maxWidth);
> float rectHeight = random(0, maxHeight);
> 
> ```

---

<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:** [October 4, 2022, 4:21pm UTC](https://discourse.processing.org/t/why-my-draw-dont-drawing-continuously/39078/16 "2022-10-04T16:21:17Z")

</div>

reduce the chance != avoid

What’s the solution to the ??? marks above?  
How can you say: my max is the distance from c point to canvas right/bottom corner?  
It’s an easy calculation 😉