week4 hm

// Define variables

var clPurple; // color purple

var clBlue; // color blue

var stW; // stroke size of each square

var x; // horizontal position of each square

var y; // vertical position of each square

var rad; // size of each square

​

// Movement on X axis

var deltaX;

​

function setup() {

  // Create canvas 600 x 800

  createCanvas(600, 800);

​

  // Assign values to variables declared above

  clPurple = "#800080"; // Purple color

  clBlue = "#0000FF"; // Blue color

​

  rad = 400; // Initial size of the squares

​

  stW = 1;

​

  x = width / 2; // Center horizontally

  y = height / 2; // Center vertically

​

  // Starting value for X movement (left off-screen)

  deltaX = -600; // Starting X position off-screen

}

​

function draw() {

  background(255); // White background

  rad = 800; // Reset square size

  stW = 0.2; // Reset stroke weight

​

  noFill(); // Disable fill color

​

  // Draw the first static group of squares

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

    strokeWeight(stW);

    stroke(clPurple); // Set stroke color to purple

    drawSquare(x, y, rad);

    rad = rad - 20;

    stW = stW + 0.2; // Increment stroke weight

  }

​

  // Reset size and stroke for the second group of squares

  rad = 800;

  stW = 0.2;

​

  // Movement of the second group (only along X axis)

  deltaX = deltaX + 2; // Move to the right

​

  // Reset deltaX when it moves off-screen to restart from the left

  if (deltaX > width + 200) {

    deltaX = -600;

  }

​

  // Draw the second moving group of squares

  push(); // Save the current transformation

  translate(deltaX, 0); // Apply X movement to the second group 

​

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

    strokeWeight(stW);

    stroke(clBlue); // Set stroke color to blue

    drawSquare(x, y, rad);

    rad = rad - 20;

    stW = stW + 0.3; // Increment stroke weight

  }

​

  pop(); // Restore the previous transformation

}

​

// Function to draw a square at (x, y) with size rad

function drawSquare(x, y, rad) {

  var halfRad = rad / 2;

  rectMode(CENTER); // Draw square from the center

  rect(x, y, rad, rad); // Draw square

}

​