使用 if 语句在随机矩形序列的顶部画线

Question

我正在以随机顺序绘制矩形，但我想以相同的随机顺序在这些矩形的顶部绘制线条，以在矩形顶部创建一个图案作为图层。为什么我尝试这样做的代码的最后一部分不可见，线条位于矩形之后，因此它们也应该在矩形之后绘制，因此在顶部？

<script src="https://cdn.jsdelivr.net/npm/processing-js@1.6.6/processing.min.js"></script>

<script type="application/processing">
int spacing = 10;
int x, y;
int spacing2 = 10;
int x2, y2;

void setup() {
  size(800, 800);
  noStroke();
  background(52, 122, 235);
}

void draw() {
  float j = random(2);
  if (j < 1) {
    if (j < 0.5) {
      fill(0, 0, 255);
    }
    if (j > 0.7) {
      fill(0, 0, 155);
    }
    rect(x, y, spacing, spacing);
  }

  x = x + spacing;
  if (x > width) {
    x = 0;
    y = y + spacing;
  }

  //WHY IS THE LINES NOT SHOWING UP?
  if (j > 1) {
    line(x, y, x + spacing, y + spacing); // "\"
  } else {
    line(x, y + spacing, x + spacing, y); // "/"
  }
}
</script>
<canvas></canvas>

Answer 1

您从未设置笔画，因此线条不可见。
您在绘制线之前更新 x 和 y 值，因此线将位于下一个方块的位置。这意味着线条只会在未绘制正方形的位置保持可见。

<script src="https://cdn.jsdelivr.net/npm/processing-js@1.6.6/processing.min.js"></script>

<script type="application/processing">
int spacing = 10;
int x, y;
int spacing2 = 10;
int x2, y2;

void setup() {
  size(800, 800);
  noStroke();
  background(52, 122, 235);
}

void draw() {
  float j = random(2);
  if (j < 1) {
    noStroke();
    if (j < 0.5) {
      fill(0, 0, 255);
    }
    if (j > 0.7) {
      fill(0, 0, 155);
    }
    rect(x, y, spacing, spacing);
  }
  
  x = x + spacing;
  if (x > width) {
    x = 0;
    y = y + spacing;
  }

  // This wasn't showing up because there was no stroke color specified and
  // you call noStroke() in setup.
  stroke(255, 0, 0);
  if (j > 1) {
    line(x, y, x + spacing, y + spacing); // "\"
  } else {
    line(x, y + spacing, x + spacing, y); // "/"
  }
}
</script>
<canvas></canvas>

使用 if 语句在随机矩形序列的顶部画线

Using if statements to draw lines on top of random sequence of rectangles

javascript

p5.js