let speedY

let directionY;

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(135, 206, 235);

  fill(0);

  noStroke();

​

  // use a nested loop since we are drawing

  // visual elements along both axis (x and y)

  let numOfColumns = 1;

  let numOfRows = 1;

​

  push();

  // move the grid of visual elements slightly

  // up (-20) and to the left (-4)

  translate(-4, -20);

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

    for (let j = 0; j < numOfRows; j++) {

​

      // use i to distribute rects horizontally 

      // with a spacing of 33 pixels

      let x = i * 26.5;

​

      // use j to distribute rects vertically

      // use sin-function to add wavy allignment

      // TRY to change value of speed to 0.01

      //let speed = 0.1;

      //let wavyOffset = sin(i + frameCount * speed) * 2;

      //let y = j * 60 + wavyOffset;

​

      // gradually increase width of rects 

      // from left to right using i

      let w = 5;

​

      // gradually increase height of rects 

      // from left to right using i

      let h = 35 + i;

​

      // draw rectangle with rounded corners

      push();

      translate(x, y);

      fill(225,random(255))

      // TRY to uncomment the row below to make rects rotate

      // rotate(frameCount*0.01*j)

      rect(random(25), random(50), random(width), random(height), 70);

      pop();

  if (mouseX > width/2) {

    speed = -1;

  } else if (y < 0) {

    directionY = 1;

  }

y = y + speedY * directionY;

    }

  }

  pop();

​

}