java - 在处理中制作随机矩形

Question

我想在处理中制作随机矩形。到目前为止，我使用 for 循环来制作窗口大小的矩形，但我不知道如何随机制作 10 个矩形。这是我为您提供的示例代码:

void setup()
{
  size(400, 400);
}

void draw()
{
  background(0); // Black Background

  stroke(255); // White lines

  for (int j = 0; j <= height; j += 40)
  {
    for (int i = 0; i < width; i += 40)
    {
      fill(0); 
      rect(i, j, 40, 40);
    }
  }
}

它显示 100 个黑色矩形，但我只想看到 10 个黑色矩形。例如:第一行将获得随机 1 个矩形，第二行将获得 2 ，第三行将获得 1 ，一直到 10。

Answer 1

有多种方法可以解决这个有趣的作业/练习。

第一件事是在每列绘制正确数量的框:

void setup()
{
  size(400, 400);

  background(0); // Black Background
  fill(0);
  stroke(255); // White lines

  int boxSize = 40;
  int maxBoxes = 1;

  for (int j = 0; j <= height; j += boxSize)
  {
    // box count per row
    int boxCount = 0;

    for (int i = 0; i < width; i += boxSize)
    {
      // only draw the max number of boxes
      if(boxCount < maxBoxes){

        rect(i, j, 40, 40);
        // increment per row box count
        boxCount++;
      }
    }
    // increment max boxes per box
    maxBoxes++;
  }
}

其次，每列绘制框的位置需要随机化，但最好不要重叠。一种选择是将完整的解决方案空间分割为多个部分:每个部分都有自己的位置范围，因此不会与下一个部分重叠。

void setup()
{
  size(400, 400);

  background(0); // Black Background
  fill(0);
  stroke(255); // White lines

  int boxSize = 40;
  int maxBoxes = 1;
  int totalBoxes = width / boxSize;

  for (int j = 0; j <= height; j += boxSize)
  {
    // box count per row
    int boxCount = 0;
    // a list of box indices of where to draw a box (as opposed
    int[] randomXIndices = new int[maxBoxes];
    // how many index ranges to span per row
    int indexRangePerBox = totalBoxes / maxBoxes;
    // for each random index 
    for(int k = 0 ; k < maxBoxes; k++)
    {
      // pre-calculate which random index to select
      // using separate ranges per box to avoid overlaps
      randomXIndices[k] = (int)random(indexRangePerBox * k, indexRangePerBox * (k + 1));
    }

    for (int i = 0; i < width; i += boxSize)
    {
      // only draw the max number of boxes
      if(boxCount < maxBoxes)
      {

        int randomX = randomXIndices[boxCount] * boxSize;

        rect(randomX, j, 40, 40);
        // increment per row box count
        boxCount++;
      }

    }
    // increment max boxes per box
    maxBoxes++;
  }
}

void draw(){
}

void mousePressed(){
  setup();
}

点击重置。请注意，底部的行几乎总是看起来相同:

1. 随机选择位置的回旋余地较小
2. random() 是一个粗略的伪随机数生成器，但还有更好的生成器，例如 randomGaussian() , noise()等等
3. 总体而言，还有其他策略可以探索选择随机位置并避免重叠

现场演示如下:

function setup()
{
  createCanvas(400, 400);
  reset();
  // reset once per second
  setInterval(reset, 1000);
}

function reset(){
  background(0); // Black Background
  fill(0);
  stroke(255); // White lines
  
  var boxSize = 40;
  var maxBoxes = 1;
  var totalBoxes = width / boxSize;
  
  for (var j = 0; j <= height; j += boxSize)
  {
    // box count per row
    var boxCount = 0;
    // a list of box indices of where to draw a box (as opposed
    var randomXIndices = new Array(maxBoxes);
    // how many index ranges to span per row
    var indexRangePerBox = totalBoxes / maxBoxes;
    // for each random index 
    for(var k = 0 ; k < maxBoxes; k++)
    {
      // pre-calculate which random index to select
      // using separate ranges per box to avoid overlaps
      randomXIndices[k] = floor(random(indexRangePerBox * k, indexRangePerBox * (k + 1)));
    }
    
    for (var i = 0; i < width; i += boxSize)
    {
      // only draw the max number of boxes
      if(boxCount < maxBoxes)
      {
        
        var randomX = randomXIndices[boxCount] * boxSize;
        
        rect(randomX, j, 40, 40);
        // increment per row box count
        boxCount++;
      }
      
    }
    // increment max boxes per box
    maxBoxes++;
  }
}

function draw(){
}

function mousePressed(){
  reset();
}

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