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

March 16, 2022

I’m drawing rectangles in a random sequence, but i want to draw lines on TOP of these rectangles, in the same random sequence, to create a pattern as a layer on top of the rectangles.
Why is the last part of my code where i try this is not visible, the lines are located after the rectangles so they should get drawn after as well and therefor on top?

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

>Solution :

You never set a stroke, so the lines were invisible.
You are updating the x and y values before you draw the line, so the line will be in the position of the next square. That means the lines will only remain visible in the locations where a square is not drawn.

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