let speed = 8;

​

//create a class of the triangle warning sign

class TriWarning {

  constructor(xPos, yPos, triHeight) {

    this.xPos = xPos;

    this.yPos = yPos;

    this.height = triHeight;

    this.side = triHeight / sqrt(3); // all the triagnles are equilateral

  }

​

  // this method draws the entire triangle warning signs and windows

  drawTriWarning() {

    fill("rgba(210,206,206,0.48)");

    rect(this.xPos - 50, this.yPos - 5, 220, 70);

    strokeWeight(2);

    line(this.xPos + 80, this.yPos + 5, this.xPos + 120, this.yPos + 5);

    line(this.xPos + 50, this.yPos + 25, this.xPos + 150, this.yPos + 25);

    line(this.xPos + 50, this.yPos + 40, this.xPos + 150, this.yPos + 40);

    line(this.xPos + 50, this.yPos + 55, this.xPos + 150, this.yPos + 55);

    noFill();

    fill("rgb(239,195,122)");

    noStroke();

    triangle(

      this.xPos,

      this.yPos,

      this.xPos - this.side,

      this.yPos + this.height,

      this.xPos + this.side,

      this.yPos + this.height

    );

    fill(0);

    textSize(40);

    text("!", this.xPos - 7, this.yPos + 55);

    stroke(0);

  }

}

​

function setup() {

  createCanvas(400, 400);

  background("rgba(126,152,206,0.93)");

  if (triArray.length === 0) {

    for (let i = 0; i < 10; i++) { // creates 10 triagnles and store them in an array

      triArray[i] = new TriWarning(random(35, 250), random(30, 340), 60);

      triArray[i].drawTriWarning();

    }

  }

  noLoop();

}

​

function draw() {

  for (let i = 0; i < 10; i++) {

    if (!(triArray[i].yPos > 335)) {

      background("rgba(158,179,224,0.93)");

      triArray[i].yPos += speed;

    }

  } // triangles in the array will 'fall down' to the bottom of the canvas

  for (let i = 0; i < 10; i++) {

    triArray[i].drawTriWarning();

  }

  print(triArray);

}

​

function mouseClicked() { // this will trigger the falling of the warning windows

  loop();

}

​