week3.2

//colors

  var clBlack;

  var clWhite;

​

//stroke size

  var stW;

​

//size of squares

  var w;

  var h;

​

// starting position of each square

var startX;

var startY;

​

function setup() {

    createCanvas(660, 660);

    background(100);

​

//Calculate the size of each square

    w = 660 / 5;

    h = w;

​

//Assign color values

    clBlack = '#000000';

    clWhite = '#ffffff';

​

//Stroke Weight

    stW = 1;

​

//Set angle mode to degrees

    angleMode(DEGREES);

  }

​

function draw() {

  background(240, 240, 240);

​

  //Grid 1

    fill(clWhite);

    rect(0, 0, w, h);

​

  //Grid 2

    fill(clWhite)

    rect(w, 0, w, h)

​

  //Grid 3

    fill(clWhite)

    rect(w * 2, 0, w, h)

​

  // arc(x, y, w, h, start, stop)

    fill(clBlack)

    arc(w * 3, h, w * 2, h * 2, 180, 270)

​

  //Grid 4

    fill(clWhite)

    rect(w * 3, 0, w, h)

​

  //Grid 5

    fill(clWhite)

    rect(w * 4, 0, w, h)

​

  //Grid 6

    fill(clWhite);

    rect(0, h, w, h);

​

  //Grid 7

    fill(clBlack)

    rect(w, h, w, h)

​

  //Arc(x, y, w, h, start, stop)

    fill(clWhite)

    arc(w, h, w * 2, h * 2, 360, 90)

​

  //Grid 8

    fill(clWhite)

    rect(w * 2, h, w, h)

​

  //Triangle

    fill(clBlack)

    triangle(w * 2, h, w * 2, h * 2, w * 3, h)

​

  //Grid 9

    fill(clWhite)

    rect(w * 3, h, w, h)

​

  //Grid 10

    fill(clWhite)

    rect(w * 4, h, w, h)

​

  //Grid 11

    fill(clWhite)

    rect(0, h * 2, w, h)

​

  //Arc(x, y, w, h, start, stop)

    fill(clBlack)

    arc(w, h * 3, w * 2, h * 2, 180, 270)

​

  //Grid 12

    fill(clBlack)

    rect(w, h * 2, w, h)

​

  //Circle

    fill(clWhite)

    circle(w * 2 - 66, h * 3 - 66, 132)

​

  //Grid 13

    fill(clWhite)

    rect(w * 2, h * 2, w, h)

​

  //Grid 14

    fill(clWhite)

    rect(w * 3, h * 2, w, h)

​

  //Grid 15

    fill(clWhite)

    rect(w * 4, h * 2, w, h)

​

  //Grid 16

    fill(clWhite)

    rect(0, h * 3, w, h)

​

  //Arc(x, y, w, h, start, stop)

    fill(clBlack)

    arc(w, h * 3, w * 2, h * 2, 90, 180)

​

  //Grid 17

    fill(clBlack)

    rect(w, h * 3, w, h)

​

  //Grid 18

    fill(clBlack)

    rect(w * 2, h * 3, w, h)

​

  //Grid 19

    fill(clWhite)

    rect(w * 3, h * 3, w, h)

​

  //Arc(x, y, w, h, start, stop)

    fill(clBlack)

    arc(w * 3, h * 4, w * 2, h * 2, 270, 180)

​

  //Grid 20

    fill(clWhite)

    rect(w * 4, h * 3, w, h)

​

  //Circle

    fill(clBlack)

    circle(w * 5 - 66, h * 4 - 66, 132)

​

  //Grid 21

    fill(clBlack)

    rect(0, h * 4, w, h)

​

  //Arc(x, y, w, h, start, stop)  

    fill(clWhite)

    arc(0, h * 4, w * 2, h * 2, 0, 90)

​

  //Grid 22

    fill(clWhite)

    rect(w, h * 4, w, h, )

​

  //Arc(x, y, w, h, start, stop)

    fill(clBlack)

    arc(w, h * 4, w * 2, h * 2, 0, 90)

​

  //Grid 23

    fill(clWhite)

    rect(w * 2, h * 4, w, h)

​

  //Arc(x, y, w, h, start, stop)

    fill(clBlack)

    arc(w * 3, h * 4, w * 2, h * 2, 90, 180)

​

  //Grid 24

    fill(clWhite)

    rect(w * 3, h * 4, w, h)

​

  //Arc(x, y, w, h, start, stop)

    fill(clBlack)

    arc(w * 3, h * 4, w * 2, h * 2, 0, 90)

​

  //Grid 25

    fill(clWhite)

    rect(w * 4, h * 4, w, h)

  }

​

​

​

​