# Need help: Animating grid with gradient rectangles

**URL:** <https://discourse.processing.org/t/need-help-animating-grid-with-gradient-rectangles/30376>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [May 30, 2021, 6:37pm UTC](https://discourse.processing.org/t/need-help-animating-grid-with-gradient-rectangles/30376 "2021-05-30T18:37:56Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![abk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/abk/32/12868_2.png) [@abk](https://discourse.processing.org/u/abk)\
**Post date:** [May 30, 2021, 6:37pm UTC](https://discourse.processing.org/t/need-help-animating-grid-with-gradient-rectangles/30376/1 "2021-05-30T18:37:57Z")

</div>

Hi

I’m trying to achieve this kind of noise based movement on my sketch: [https://www.instagram.com/p/CMxHVO\_hmUa/](https://www.instagram.com/p/CMxHVO_hmUa/)

I’ve built my grid by creating for loops which works fine if I wanted it to be static, but if I should animate each rectangle within a grid like this (see below) I think there must be another way to achieve this - I just don’t know where to start? Any help would be greatly appreciated!

The grid:

 ![Screenshot 2021-05-30 at 20.36.36](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3d699fb79eaae195276d1376e8ca7e9cd21f7fe5.jpeg)

My code:

```auto
let colNb = 8;
let rowNb = 6;

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(0);

  for (let i = 0; i < rowNb; i++) {
    drawRow(i);
  }
}

function drawRow(lvl) {
    let patternNb = pow(2, lvl);
    let w = width / patternNb;
    let h = height / patternNb; 
  
    for (let i = 0; i < patternNb; i++) {
      drawGradient(w, h, i);
    }
  }

function drawGradient(w, h, idx) {
    let colWidth = w / colNb;
    let gradStep = 255 / colNb + 8;

    for (let i = 0; i < colNb; i++) {
      fill(255 - i * gradStep);
      noStroke();
      rect(idx * w + i * colWidth, height - h, colWidth, h);
    }
  }

function windowResized() {
  resizeCanvas(windowWidth,windowHeight);
}

```

---

<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:** [May 30, 2021, 9:30pm UTC](https://discourse.processing.org/t/need-help-animating-grid-with-gradient-rectangles/30376/2 "2021-05-30T21:30:13Z")

</div>

Hi,

This topic reminds me something 😉

Just for reference this is the previous thread :

> [@Need help: Grid with increasing number of columns + incremental greyscale gradient](https://discourse.processing.org/t/need-help-grid-with-increasing-number-of-columns-incremental-greyscale-gradient/29438):
>
> Hi I’m trying to do something like this in p5: I’m a total beginner, so I think this should be pretty basic stuff for most slight_smile So far I’ve got this snippet of code: function setup() { createCanvas(windowWidth, windowHeight); } function draw() { background(0); let amountX = windowWidth / 8; let amountY = windowHeight / 4; let spaceX = width / amountX; let spaceY = height / amountY; for (let y = 0; y \< amountY; …

---

<div class="post-metadata">

**Author:** ![abk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/abk/32/12868_2.png) [@abk](https://discourse.processing.org/u/abk)\
**Post date:** [May 31, 2021, 6:43am UTC](https://discourse.processing.org/t/need-help-animating-grid-with-gradient-rectangles/30376/3 "2021-05-31T06:43:35Z")

</div>

Haha, yeah… Couldn’t really get it to work the way I wanted 😕 So I just wanted to see if there were any other options to achieve this way of animating the grid.

I’m fairly new here so I didn’t know if it was best to just continue in the other thread or start a new one?

---

<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:** [May 31, 2021, 8:23am UTC](https://discourse.processing.org/t/need-help-animating-grid-with-gradient-rectangles/30376/4 "2021-05-31T08:23:05Z")

</div>

yes no problem 🙂

I think you should use the recursive approach in order to animate this. Last time I tried to do an animation with the code I wrote and it worked well (I can’t find it anymore 😛)

Basically if you change the width of one pattern, then the child patterns need to split that width in half and etc… with the recursive approach, you pass the width to another function call so it’s “inheriting” that value.

On the other side, with an iterating approach you need to determine the depth of the pattern and then position it accordingly which can be cumbersome 😉

---

<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:** [May 31, 2021, 12:04pm UTC](https://discourse.processing.org/t/need-help-animating-grid-with-gradient-rectangles/30376/5 "2021-05-31T12:04:42Z")

</div>

similar [Need clarification on how this piece of found code is working (recursion) - #4 by Chrisir](https://discourse.processing.org/t/need-clarification-on-how-this-piece-of-found-code-is-working-recursion/29969/4)

---

<div class="post-metadata">

**Author:** ![abk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/abk/32/12868_2.png) [@abk](https://discourse.processing.org/u/abk)\
**Post date:** [May 31, 2021, 8:41pm UTC](https://discourse.processing.org/t/need-help-animating-grid-with-gradient-rectangles/30376/6 "2021-05-31T20:41:14Z")

</div>

So I’ve tried to wrap my head around this 🤔:

```auto
function setup() {
  createCanvas(800, 800);
}

function draw() {
  background(0);
  
  let move = noise(frameCount * 0.004) * 25;
  
  function gradient(x, y, w, h, nBands, depth) {
  // If we are at the end, stop
  if (depth === 0) return;
  
  const bandWidth = w / nBands;
  
  // Draw rectangles with gradient
  for (let i = 0; i < nBands; i++) {
    
    // Compute x position and color
    const rectX = x + i * bandWidth;
    const col = color(map(i, 0, nBands - 1, 255, 0));
    
    // Display the rectangle
    fill(col);
    noStroke();
    rect(rectX, y, bandWidth, h);
  }
  
  // Recursive call to next gradients
  const nextHeight = h * 0.7;
  gradient(x, y + h, w / 2, nextHeight, nBands, depth - 1);
  gradient(x + w / 2, y + h, w / 2, nextHeight, nBands, depth - 1);
  }
  
  // Recursively draw gradients with a depth of 7
  gradient(0, 0, width, height / 3 + move * 2, 8 + move/2, 7);
}

```

But if I wanted to animate the height of each band separately how would I go about this?

---

<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:** [June 1, 2021, 7:24am UTC](https://discourse.processing.org/t/need-help-animating-grid-with-gradient-rectangles/30376/7 "2021-06-01T07:24:52Z")

</div>

That’s tricky. I don’t know.

Somehow let each height of each rectangle change with a sin() function (see website | tutorials | trigonometry). The angle changes over time. Angle must be different for each rect.