使用 for 循环创建 alpha 值最多增加 255 的矩形网格

Question

我创建了一个矩形网格，随着您向下和向右移动，不透明度会增加。我已将 256 个 alpha 值平均分为 4 列（每列 64 个矩形）。

我试图通过对每一列使用 for 循环来减少代码。

我已经成功创建了矩形列，但是我设置的 fill() for 没有按照我的需要应用不透明度。

这是我对第 1 列的运行：

  for (var a = 0; a < 256; a++) {
    fill(155,0,0,a);
  }

  var y = 0;
  for (var x = 0; y <= 1890; x += 210) {
    for (var y = 0; y <= 1890; y += 30) {
      rect(x,y,200,20)
    }
  }

我试过组合 fill() 和 rect() 循环，但我遇到了同样的问题，即色标固定在 (155,0,0,255) 而不是从 0 开始并上升到 63 (仅针对此专栏）。

我总共有 4 fill 和 4 rect 行（例如，每列 1 个填充矩形组合）。

对于网格的完整代码和可视化表示，https://codepen.io/anon/pen/KvdJWB

Answer 1

第一个 for 循环运行并结束，甚至在嵌套 for 循环开始之前。您可以将您的程序视为等同于此：

  fill(155,0,0,0);
  fill(155,0,0,1);
  fill(155,0,0,2);
  fill(155,0,0,3);
  //...
  fill(155,0,0,254);
  fill(155,0,0,255);


  var y = 0;
  for (var x = 0; y <= 1890; x += 210) {
    for (var y = 0; y <= 1890; y += 30) {
      rect(x,y,200,20)
    }
  }

很明显，您的第一个 for 循环并没有真正发挥作用，只有最后一次调用 fill() 才真正重要。

如果您希望每个单元格、每一行或每一列都具有不同的颜色，那么您将不得不在嵌套的 for 循环中的某处调用 fill()。

使用 for 循环创建 alpha 值最多增加 255 的矩形网格

Creating a grid of rectangles that increase in alpha values up to 255 using for loops

javascript

processing

p5.js