Week 5 Hw

// Variables 

​

var sz; // Size of each square

var stCl; // Stroke color

var gap; // the gap between tiles

​

function setup() {

  createCanvas(600, 600);

  // Size of each square in the canvas

  sz = 100;

  // Stroke color

  stCl = '#FFFFFF'; // wgite lines on black background

  // Gap between shapes

  gap = 5; // as an between squares 

  // Disable looping

  noLoop(); //no permenant loop

}

​

function draw() {

  background(0); // Set a dark background

  // Translate to center

  translate(width / 2, height / 2);

  // Draw grid of shapes

  for (var j = -2; j <= 2; j++) {

    for (var k = -2; k <= 2; k++) {

      push();

      translate(j * sz * 1.5, k * sz * 1.5);

      drawShapes();

      pop();

    }

  }

}

​

function drawShapes() {

  // Set stroke color and center the shapes

  stroke(stCl);

  noFill();

  rectMode(CENTER);

  // Draw multiple layers of shapes with decreasing size

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

    // Random size factor

    var sizeFactor = random(0.8, 1.2);

    // Random rotation

    rotate(random(-PI / 6, PI / 6));

    // some research finals

​

    // Draw triangle layer

//triangle(x1, y1, x2, y2, x3, y3)

    triangle(

      0, -sz * sizeFactor + i * gap,

      sz * sizeFactor - i * gap, sz * sizeFactor - i * gap,

      -sz * sizeFactor + i * gap, sz * sizeFactor - i * gap

    ); 

///0, -sz * sizeFactor + i * gap: This is the first point of the triangle, positioned at the top center.

//sz * sizeFactor - i * gap, sz * sizeFactor - i * gap: This is the second point, positioned at the bottom right.

//-sz * sizeFactor + i * gap, sz * sizeFactor - i * gap: This is the third point, positioned at the bottom left.

    //Each triangle is drawn with a slightly smaller size (determined by i * gap

    //arc(x, y, w, h, start, stop)

    // Draw concentric arc layer

    arc(0, 0, sz * sizeFactor - i * gap, sz * sizeFactor - i * gap, 0, PI);

//0, 0: This places the arc at the center of the current cell.

//sz * sizeFactor - i * gap, sz * sizeFactor - i * gap: This sets the width and height of the arc, decreasing slightly with each loop.

//0, PI: These angles make the arc cover half of the circle (from 0 to π radians), creating a "smiling" arc shape.

    // Draw rectangle layer

    rect(0, 0, sz * sizeFactor - i * gap, sz * sizeFactor - i * gap);

//sz * sizeFactor - i * gap, sz * sizeFactor - i * gap: The width and height of the rectangle decrease in each loop, creating a set of concentric rectangles.

​

  }

}