week 4

// Define variables

var clBlack; // color black

var clWhite; // color white

var stW; // stroke size of each rectangle

var x; // horizontal position of each rectangle

var y; // vertical position of each rectangle

var rectW; // width of each rectangle

var rectH; // height of each rectangle

​

// Movement on Y

var deltaY;

​

function setup() {

  // create canvas 600 x 600

  createCanvas(600, 600);

​

  // assign values to variables declared above

  clBlack = "#000000";

  clSilver = "#c4c4c4";

​

  rectW = 800;

  rectH = 800;

​

  stW = 1;

​

  x = width / 2;

  y = height / 2; 

​

  // Starting value of deltaY

  deltaY = 600;

}

​

function draw() {

  background(clSilver);

  rectW = 800;

  rectH = 800;

  stW = 0.2;

​

  // Disable color fill

  noFill();

​

  // Repeat the following code 44 times

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

    strokeWeight(stW);

    rectMode(CENTER); 

    rect(x, y, rectW, rectH); 

​

    rectW = rectW - 20; 

    rectH = rectH - 20; 

    stW = stW + 0.2; 

  }

​

  // Reset rectangle for second group

  rectW = 800;

  rectH = 800;

  stW = 0.2;

​

  // Y movement

  deltaY = deltaY + 1;

​

  if (deltaY > height) {

    deltaY = -600;

  }

​

  // Draw  moving rectangles

  push(); // Lock style settings

  translate(0, deltaY); 

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

    strokeWeight(stW);

    rectMode(CENTER); 

    rect(x, y, rectW, rectH); 

      rectW = rectW - 20; 

    rectH = rectH - 20; 

    stW = stW + 0.3; 

​

  }

  pop(); // Unlock style settings 

}