# How to animate the size of the rectangles

**URL:** <https://discourse.processing.org/t/how-to-animate-the-size-of-the-rectangles/36602>\
**Category:** Coding Questions\
**Created:** [April 26, 2022, 5:15am UTC](https://discourse.processing.org/t/how-to-animate-the-size-of-the-rectangles/36602 "2022-04-26T05:15:57Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alllukaht](https://avatars.discourse-cdn.com/v4/letter/a/57b2e6/32.png) [@Alllukaht](https://discourse.processing.org/u/Alllukaht)\
**Post date:** [April 26, 2022, 5:15am UTC](https://discourse.processing.org/t/how-to-animate-the-size-of-the-rectangles/36602/1 "2022-04-26T05:15:57Z")

</div>

\<  
void setup() {  
size(800, 620);  
}

void draw() {  
background(#000000);  
int lw = 40;

fill(#fee445);  
noStroke();

for (int i = 20; i \< width; i += 60) {  
for (int j = 20; j \< height; j += 60) {  
if (dist(25, 25, mouseX, mouseY) \< 40) {  
fill(#ffffff);  
}  
rect(i, j, lw, lw);

```
}

```

}  
}  
/\>  
I have these code for the rectangles.  
Please help me to animate the rectangles, in changing size. Or may be moving from their origin.

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [April 26, 2022, 6:19am UTC](https://discourse.processing.org/t/how-to-animate-the-size-of-the-rectangles/36602/2 "2022-04-26T06:19:38Z")

</div>

Hi and welcome

Moving it

```auto
int x = 0;

void setup() {
  size(640, 320);
}

void draw() {
  background(0, 255, 0);

  fill(0, 0, 255);
  rect(x, 120, 50, 50);

  x = x + 1;
}

```

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [April 26, 2022, 6:21am UTC](https://discourse.processing.org/t/how-to-animate-the-size-of-the-rectangles/36602/3 "2022-04-26T06:21:43Z")

</div>

> [@Alllukaht](#):
>
> for (int i = 20; i \< width; i += 60) {  
> for (int j = 20; j \< height; j += 60) {

Why you are using this loop??

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [April 26, 2022, 6:30am UTC](https://discourse.processing.org/t/how-to-animate-the-size-of-the-rectangles/36602/4 "2022-04-26T06:30:31Z")

</div>

Idea to change size use if or whatever you want to animates it

```auto
int x = 0;

void setup() {
  size(640, 320);
}

void draw() {
  background(0, 255, 0);
  fill(0, 0, 255);
  rect(120, 120, x, x);
  x = x + 1;
}

```

> **[Animation](https://happycoding.io/tutorials/processing/animation)**
>
> Learn how to create animations in Processing.

---

<div class="post-metadata">

**Author:** ![Alllukaht](https://avatars.discourse-cdn.com/v4/letter/a/57b2e6/32.png) [@Alllukaht](https://discourse.processing.org/u/Alllukaht)\
**Post date:** [April 26, 2022, 11:33am UTC](https://discourse.processing.org/t/how-to-animate-the-size-of-the-rectangles/36602/5 "2022-04-26T11:33:27Z")

</div>

this for loop is to create many rectangles. Actually I want to apply the effect to all the rectangles on the canvas. So please can you help with it.

---

<div class="post-metadata">

**Author:** ![Alllukaht](https://avatars.discourse-cdn.com/v4/letter/a/57b2e6/32.png) [@Alllukaht](https://discourse.processing.org/u/Alllukaht)\
**Post date:** [April 26, 2022, 11:36am UTC](https://discourse.processing.org/t/how-to-animate-the-size-of-the-rectangles/36602/6 "2022-04-26T11:36:27Z")

</div>

I appreciate your help but I want I need the effect to all the rectangles on the canvas.

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [April 26, 2022, 6:56pm UTC](https://discourse.processing.org/t/how-to-animate-the-size-of-the-rectangles/36602/7 "2022-04-26T18:56:22Z")

</div>

Hi

Watch this video and search the site many useful learning you can find

[https://funprogramming.org/35-A-grid-of-rotating-objects-creates-a-wave-of-rectangles.html](https://funprogramming.org/35-A-grid-of-rotating-objects-creates-a-wave-of-rectangles.html)