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

[josephh]

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?

Hi, Welcome to the forum! If you check the definition of recursion on Wikipedia : In 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 by using functions 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

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

Have fun!