week 4 loop

// Define variables

var clBlack; // color black

var clWhite; // color white

var stW; // strokeSize of each triangle

var x; // horizontal position of each triangle

var y; // vertical position of each triangle

var rad; // side length of each triangle

​

// Movement on Y

var deltaY;

​

function setup() {

  // create canvas 600 x 800

  createCanvas(600, 800);

​

  // assign values to variables declared above

  clBlack = "#000000"; // Fixed typo

  clWhite = "#ffffff";

​

  rad = 400; // Initial side length

​

  stW = 1; // Initial stroke weight

​

  x = width / 2; // equals 600 / 2 = 300

  y = height / 2; // equals 800 / 2 = 400

  // Starting value of deltaY

  deltaY = -600;

}

​

function draw() {

  background(clWhite);

  // Reset side length and stroke weight for the first set of triangles

  rad = 800;

  stW = 0.2;

​

  // Disable Color Fill

  noFill();

  // Draw the first group of triangles

  for (var i = 0; i < 40; i++) {

    strokeWeight(stW);

    drawTriangle(x, y, rad);

    rad -= 20; // Decrease side length

    stW += 0.2; // Increase stroke weight

  }

  // Update deltaY for vertical movement

  deltaY += 1;

  if (deltaY > height) {

    deltaY = -600; // Reset position

  }

  push(); // Lock style settings

  translate(0, deltaY); // Move down

​

  // Reset side length and stroke weight for the second set of triangles

  rad = 800;

  stW = 0.2;

​

  // Draw the second group of triangles

  for (var i = 0; i < 40; i++) {

    strokeWeight(stW);

    drawTriangle(x, y, rad);

    rad -= 20; // Decrease side length

    stW += 0.3; // Increase stroke weight

  }

​

  pop(); // Unlock style settings

}

​

// Function to draw a triangle

function drawTriangle(x, y, side) {

  // Calculate the triangle's vertices

  var h = (sqrt(3) / 2) * side; // Height of the triangle

  triangle(

    x - side / 2, y + h / 2, // Bottom left vertex

    x + side / 2, y + h / 2, // Bottom right vertex

    x, y - h / 2 // Top vertex

  );

}