# Need help: Grid with increasing number of columns + incremental greyscale gradient

**URL:** <https://discourse.processing.org/t/need-help-grid-with-increasing-number-of-columns-incremental-greyscale-gradient/29438>\
**Category:** Coding Questions\
**Created:** [April 17, 2021, 7:42am UTC](https://discourse.processing.org/t/need-help-grid-with-increasing-number-of-columns-incremental-greyscale-gradient/29438 "2021-04-17T07:42:17Z")\
**Posts on this page:** 1\
**Showing post:** 8

<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:** [April 17, 2021, 6:13pm UTC](https://discourse.processing.org/t/need-help-grid-with-increasing-number-of-columns-incremental-greyscale-gradient/29438/8 "2021-04-17T18:13:49Z")

</div>

Hi @abk ,

The result you want to get is very well suited for what we call recursion in programming.

You can see that in the image, there’s a pattern (a gradient with rectangles fading from white to black) that is repeated at different scales.

In fact starting from the top to bottom, there’s a main gradient that is divided into two gradients (the same but different position and size) and then those two gradients are divided into two other gradients (which makes 4) then 8 then …

So it’s a process that calls itself : draw a gradient then draw two gradients at the bottom of it with half of it’s size. → repeat this operation n number of times.

You can refer to a previous post I made on the subject :

> [@Is my fractal optimized? Could it animate?](https://discourse.processing.org/t/is-my-fractal-optimized-could-it-animate/28845/2):
>
> Hi, Welcome to the forum! wink If you check the definition of [recursion](https://en.wikipedia.org/wiki/Recursion_(computer_science)) on Wikipedia : In [computer science](https://en.wikipedia.org/wiki/Computer_science), recursion is a method of solving a problem where the solution depends on solutions to smaller instances of the same problem. Recursion solves such [recursive problems](https://en.wikipedia.org/wiki/Recursion) by using [functions](https://en.wikipedia.org/wiki/Function_(computer_science)) that call themselves from within their own code. So your code doesn’t exactly use what we usually describe as recursion. You are manually running a for loop multiple times with different depth bu…

Here is my code in p5js with recursion 😉

```auto
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);
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(0);
  
  // Recursively draw gradients with a depth of 7
  gradient(0, 0, width, height / 3, 8, 7);
  
  noLoop();
}

```

It’s actually very simple to setup and you don’t need to worry about computing the next positions as it inherently do that for you by passing arguments to the next function call 😋

 ![recursive-gradient](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a5d784911ee80a72b28540fd3ef2e023405c7e10.jpeg)

Have fun!

---

_[View the full topic](https://discourse.processing.org/t/need-help-grid-with-increasing-number-of-columns-incremental-greyscale-gradient/29438)._