week 4 loop

// Define variables

var clBlack; // color black

var clWhite; // color white

var stW; // strokeSize of each hexagon

var x; //horizontal position of each hexagon

var y; //vertical position of each hexagon

var radW; // radius of each hexagon

​

// Movement on Y

var deltaY;

​

function setup() {

  // create canvas 600 x 800

  createCanvas(600, 800);

​

  // assign values to variables declared above

  clBlack = "#000000";

  clWhite = "#ffffff";

​

  radW = 400; // radius for hexagons

​

  stW = 1;

​

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

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

  // Starting value of deltaY

  deltaY = -600;

}

​

function draw() {

  background(clWhite);

  radW = 400; // reset hexagon radius

  stW = 0.2;

  // Disable Color Fill

  noFill();

  // Draw first set of hexagons (stationary)

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

    strokeWeight(stW);

    drawHexagon(x, y, radW); // draw hexagon with a varying radius

    radW = radW - 10; // Decreased decrement for closer lines

    stW = stW + 0.1; // Adjust stroke size to match denser lines

  }

  radW = 400; // reset hexagon radius for moving hexagons

  stW = 0.2;

  // Update the movement of the second set of hexagons

  deltaY = deltaY + 1;

  if (deltaY > height) {

    deltaY = -600;

  }

  push();     // Lock style settings

  translate(0, deltaY);

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

    strokeWeight(stW);

    drawHexagon(x, y, radW); // draw hexagon with a varying radius

    radW = radW - 10; // Decreased decrement for closer lines

    stW = stW + 0.15;

  }

  pop();    // unlock style settings 

}

​

// Function to draw a hexagon at (x, y) with radius r

function drawHexagon(x, y, r) {

  beginShape();

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

    var angle = TWO_PI / 6 * i; // 60 degrees per vertex

    var vx = x + cos(angle) * r;

    var vy = y + sin(angle) * r;

    vertex(vx, vy);

  }

  endShape(CLOSE);

}

​

​

​