Line and Shape

The triangle pattern created in the previous exercise was modified to generate a square pattern.

Applying Randomness

If the random value that is produced is equal to 0, two triangles forming a square will be drawn on the canvas. The second triangle has a darker colour because it has the alpha value of 175. If the random value is equal to 1, the shape that will be drawn on the canvas is a "falling" diagonal line.

render() {
  push();
  translate(this.x, this.y);

  col = color(this.i, 0, numOfShapes - this.j);
  col2 = color(this.i, 0, numOfShapes - this.j, 175);

  strokeWeight(1);
  stroke(col);
  randomNum = round(random(0, 1));
  if (randomNum == 0) {
    fill(col);
    beginShape(TRIANGLES);
    vertex(0, 0);
    vertex(0, this.s);
    vertex(this.s, 0);
    endShape();

    fill(col2);
    beginShape(TRIANGLES);
    vertex(0, this.s);
    vertex(this.s, 0);
    vertex(this.s, this.s);
    endShape();
  } else {
    line(0, 0, this.s, this.s);
  }
  
  pop();
}

Similar to the previous exercise, randomSeed() is included in the draw() function so that the same sequence of random values will always be produced by the random() function.

function draw() {
  background(0);
  randomSeed(23);
  shapes.forEach(shape => {
    shape.render();
  });
}