Week 4 Assignment

// Define colors

var clBlack;

var clWhite;

​

// Define stroke Weight

var stw;

​

// Define a variable for cyclic motion

var squareY;

​

function setup() {

  createCanvas(600, 600);

​

  // Assign values to the defined variables at top

  clBlack = '#000000';

  clWhite = '#ffffff';

​

  // Stroke Weight

  stw = 1;

​

  //  Assign a value to the squareY

  squareY = -300;

​

  // set angle mode

  angleMode(DEGREES);

}

​

function draw() {

  background(clWhite);

​

  // increase squareY with 0.7

  squareY = squareY + 0.7;

​

  // Reset the position of square when it goes off the canvas

  if (squareY > height + 600) {

    squareY = -600;

  }

  // Draw repeating shapes with different stroke weights

  for (var i = 0; i < 900; i = i + 30) {

    noFill();

    stroke(clBlack);

    // Decrease the stroke weight on each iteration in for loop

    stw = 6 + (450 - i) / 75;

    strokeWeight(stw);

    // Draw an ellipse

    ellipse(300, 300, i, i);

​

    push(); // Save the current state

    translate(300, squareY); // Move squareY vertically

    rotate(frameCount / 2); // Rotate the Square

    square(-300 + (i / 2), -300 + (i / 2), 600 - i); // Draw a square

    pop(); // Restore the previous state

  }

}