let size = 100;

​

let lineY = 0;

let lineSpd = 2;

let lineDirection = 2;

​

let stars = []; //global variable (array)

let numStars = 200; //variable to control number of stars

​

function setup() {

  createCanvas(500, 500);

  angleMode(DEGREES);

​

  strokeWeight(3);

  frameRate(20);

​

  //  for random colors

  R = random(160);

  G = random(160);

  B = random(160);

​

  background(R + 40, G + 40, B + 40);

}

​

function draw() {

  // call Draw line function for the line on the left side

  drawLine();

​

  for (x = width; x > -size * 4; x = -x - size) {

    for (

      y = height;

      y > -size * 4;

      y = y - size

    ) //   when I add the + the code was cracking so I decided to add the - sign instead and it worked! Here y starts at the height of the canvas and with each iteration it decreases the size. the same happens to the x vlaue (width)

    {

      fill(random(R, R + 190), random(G, G + 190), random(B, B + 190));

      // the lines sets the colors for the rectangles in random values up to 190

      push();

      //       the push and pull help in temporaroly changing the transformation state with out effecting the rest of the piece.

​

      if (mouseIsPressed) {

        translate(x, y);

        rotate(random(0, 45));

        rect(0, 0, size * random(1, 4), size * random(1, 4));

      }

      //       here the x and y values are randomly moved from their origional position

      pop();

    }

  }

  //stars, I really like the effect of this code thats why I  reused it from the previous assignment.

​

  for (let i = 0; i < numStars; i++) {

    noStroke();

    stars[i] = createVector(random(width), random(height), random(1, 0.01)); // as if they are tiny dots

  }

  fill(random(R, R + 190), random(G, G + 190), random(B, B + 190));

  for (let i = 0; i < numStars; i++) {

    ellipse(stars[i].x, stars[i].y, stars[i].z, stars[i].z);

  }

}

​

function drawLine() {

  stroke(255); // White line

  lineY += lineSpd * lineDirection;

​

  // Change direction when the line reaches the top or bottom of the canvas

  if (lineY < 0 || lineY > height) {

    lineDirection *= -1;

  }

​

  line(50, lineY, 50, lineY + 50);

}

​

function keyTyped() {

  if (key === "s") {

    save("myCanvas.jpg");

  }

}

// this function is for saving the sketch as an image.

​