+编辑+
这是正确的视觉草图，我的问题是什么-我的坏-你的答案完全正确，我的第一个视觉草图，非常有帮助！

我很快就退出了这里的代码，但我还不能设法保持第一个给定的比率（第一个矩形），然后让他们缩小-就像我在上面的视觉涂鸦：

int rows = 20;
float rectHeight;
float rectStep;
void setup() {
  size(1080, 1080);
  noFill();
  stroke(255);
  rectHeight = float(height)/rows;
}
void draw() {
  background(0);
  for (int y=0; y < rows; y++) {
    rectStep = float(width)/(y+1);
    for(int x = 0; x <= y+1*2; x++){
      rect(x*rectStep, y*rectHeight, rectStep, rectHeight);
    }
  }
}

它们从第一行向下收缩的系数不同：2、1.5、1.3、1.2、1.1、1.1、1.1、1.0等等…
我不知道背后的数学是什么…有人有想法吗？
谢谢你的帮助！

递归时间！！！
请原谅我的热情，但我喜欢递归，我没有很多机会使用它（主要是因为它可以避免大多数时间，也因为使用它在错误的时间是直白痴）。
在我看来，您可以通过以下伪代码实现这一点：

Draw a rectangle
Draw 2 smaller rectangles underneath the last one
Use this logic on each of the smaller rectangles

现在，递归最重要的是需要一个退出条件。在这里，我假设您可以输入所需的“行”数，或者在矩形太小而不能被视为矩形时停止编写矩形。为什么不能两者兼而有之？让我们写两个：

void setup() {
  size(800, 600);
  background(0);
  stroke(255);
  noFill();

  // drawing a couple lines of squares
  DrawRectangles(new PVector(0,0), 200, width, 6); // for 6 lines of rectangles
  // if you try it with a stupid number, like 600 iterations, it'll stop anyway when the rectangles are so small that they can't be seen
}

void draw() {}

void DrawRectangles(PVector position, int squareHeight, int squareWidth, int iterations) {
  // if you can draw more rectangles it'll continue, else it stops
  // a recursive method MUST have a stop condition, or else it becomes an infinite loop!
  if (squareHeight > 0 && iterations > 0) {
    // draw a rectangle and call this method twice for the next line
    rect(position.x, position.y, squareWidth, squareHeight);
    DrawRectangles(new PVector(position.x, position.y + squareHeight), (int)(squareHeight/2), (int)(squareWidth/2), iterations-1);
    DrawRectangles(new PVector(position.x + squareWidth/2, position.y + squareHeight), (int)(squareHeight/2), (int)(squareWidth/2), iterations-1); 
  }
}

就是这个主意。有很多方法可以做你想做的事，所以其他的答案可能和这个一样好，但是。。。我喜欢这个。如果你在评论中对这段代码有疑问，我会留下来。
玩得高兴！

laancelot的解决方案非常优雅（+1）。
下面是使用嵌套for循环的注解变体：

void setup() {
  size(1024, 512);

  noFill();
  stroke(255);
  strokeWeight(3);

  background(0);
  // number of rows: this should fill the screen, more will be hard to see
  int rows = 6;  
  // the initial height of a box 
  float boxHeight = height / 2;
  // the initial y position of the box
  float y = boxHeight;
  // the initial number of boxes
  int hCount = 2;

  // for each row
  for(int row = 0; row < rows; row++){

    // compute the width per box
    float boxWidth = width / hCount;

    // for each box per row
    for(int i = 0; i < hCount; i++){
      // draw the box, offset on X
      rect(boxWidth * i, y, boxWidth, boxHeight);
    }
    // increment values for next row...
    // half the height
    boxHeight /= 2;
    // move boxes lower
    y += boxHeight;
    // draw twice as many boxes on the next row
    hCount *= 2;
  }

}

您可以运行以下演示：

function setup() {
  createCanvas(1024, 512);

  noFill();
  stroke(255);
  strokeWeight(3);

  background(0);
  // number of rows: this should fill the screen, more will be hard to see
  let rows = 6;  
  // the initial height of a box 
  let boxHeight = height / 2;
  // the initial y position of the box
  let y = boxHeight;
  // the initial number of boxes
  let hCount = 2;

  // for each row
  for(let row = 0; row < rows; row++){

    // compute the width per box
    let boxWidth = width / hCount;

    // for each box per row
    for(let i = 0; i < hCount; i++){
      // draw the box, offset on X
      rect(boxWidth * i, y, boxWidth, boxHeight);
    }
    // increment values for next row...
    // half the height
    boxHeight /= 2;
    // move boxes lower
    y += boxHeight;
    // draw twice as many boxes on the next row
    hCount *= 2;
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js"></script>

这似乎与分形有关，尤其是康托集。