Week 4- HW Loop

// Define colors

​

var clBlack;

var clWhite;

​

// Define stroke Weight

​

var stw;

​

​

// define a variable for motion

​

var deltaY;

​

function setup() {

  createCanvas(600, 600);

  //create values to the defined variables at top

​

  clBlack = '#000000';

  clWhite = '#ffffff';

  // Stroke Weight

​

  stw = 1;

  // give a value to the deltaY

​

  deltaY = -400;

}

​

function draw() {

  background(clWhite);

​

  // call rectanglePattern function 

 // make 3 rectangles which creates the motion of going down

​

  rectanglePattern(150, 150);

  rectanglePattern(300, 300);

  rectanglePattern(450, 450);

​

  push();

  translate(0, deltaY);

  rectanglePattern(150, 150);

  rectanglePattern(300, 300);

  rectanglePattern(450, 450);

  pop();

  // increase deltaY with 1

​

  deltaY = deltaY + 0.5;

  if ( deltaY > 600) {

    deltaY = -620;

  }

}

​

​

// Variable to change width in each iteration of for loop

​

function rectanglePattern(xpos, ypos) {

  var widthRect = 400; 

  var heightRect = 400; 

  // reset the stroke weight

​

  stw = 1;

  // Repeat the code 7 times

​

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

​

    // disable filling objects

​

    noFill();

    // set stroke size

​

    strokeWeight(stw);

    // Increase the strokeWeight on each iteration in for loop

​

    stw = stw + 0.4;

    rectMode(CENTER);

    rect(xpos, ypos, widthRect, heightRect);

    widthRect = widthRect - 20;

    heightRect = heightRect - 20;

  }

}

​