week_4_Vera_Molnar

//var utils = new p5.Utils();

function setup() {

  let canvasWidth = 750;

  let canvasHeight = 900;

  createCanvas(canvasWidth, canvasHeight);

  background('#f7ebda');

  //utils.enableRuler();

  //square appearence

  noStroke();

  fill(40, 40, 40, 230);

  let squareSize = 120;

  //first square starting point x coordinate

  let x1= 60;

  //first square starting point y coordinate

  let y1= 160;

  //order of the squares: left to right, up to down (row by row)

  //first row

  square(x1, y1, squareSize);

  square(x1+squareSize+8, y1-15, squareSize);

  square(x1+squareSize*2+11, y1-20, squareSize);

  square(x1+squareSize*3+18, y1-27, squareSize);

  square(x1+squareSize*4+23, y1-18, squareSize);

  //second row

  square(x1,y1+squareSize+1, squareSize);

  square(x1+squareSize+2,y1+squareSize-14, squareSize);

  square(x1+squareSize*2+15,y1+squareSize-14, squareSize);

  square(x1+squareSize*3+17,y1+squareSize-23, squareSize);

  square(x1+squareSize*4+25,y1+squareSize-15, squareSize);

  //third row

  square(x1+3,y1+squareSize*2-3, squareSize);

  square(x1+squareSize+8,y1+squareSize*2-3, squareSize);

  square(x1+squareSize*2+15,y1+squareSize*2-21, squareSize);

  square(x1+squareSize*3+17,y1+squareSize*2-19, squareSize);

  square(x1+squareSize*4+26,y1+squareSize*2-18, squareSize);

  //fourth row

  square(x1-1,y1+squareSize*3-2, squareSize);

  square(x1+squareSize+3,y1+squareSize*3-6, squareSize);

  square(x1+squareSize*2+12,y1+squareSize*3-29, squareSize);

  square(x1+squareSize*3+17,y1+squareSize*3-6, squareSize);

  square(x1+squareSize*4+24,y1+squareSize*3-16, squareSize);

  //fifth row

  square(x1-2,y1+squareSize*4-11, squareSize);

  square(x1+squareSize+9,y1+squareSize*4+1, squareSize);

  square(x1+squareSize*2+12,y1+squareSize*4-26, squareSize);

  square(x1+squareSize*3+18,y1+squareSize*4+6, squareSize);

  square(x1+squareSize*4+24,y1+squareSize*4-22, squareSize);

}

​

​

function draw() {

}