使用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

1. 您从未设置笔划，因此线条是不可见的
2. 您正在更新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>