Line and Shape

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

Applying Randomness

If the random value that is produced is equal to 0, a triangle will be drawn on the canvas. 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);
  randomNum = round(random(0, 1));
  if (randomNum == 0) {
    noStroke();
    fill(col);
    beginShape(TRIANGLES);
    vertex(0, 0);
    vertex(0, this.s);
    vertex(this.s, 0);
    endShape();
  } else {
    strokeWeight(1);
    stroke(col);
    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();
  });
}