Fok Balığı

//colors

var b_color;

var w_color;

​

//stroke size

var stW;

​

//size of squares

var wSquare;

var hSquare;  

​

//starting position for each square;

var startX;

var startY;

​

​

function setup() {

  createCanvas(600,600);

  b_color = '#000000';

  w_color = '#ffffff';

 stW = 1;

// calculate the size of each square

  wSquare = 120;

  hSquare = 120;

  // set staring position

  startX = 0;

  startY = 0;

  // set angle mode

  angleMode(DEGREES);

}

​

​

function draw() {

  background(w_color);

  //Grid 1

  fill(w_color);

  stroke(b_color);

  strokeWeight(stW);

  rect(startX, startY, wSquare, hSquare);

  fill(b_color);

  ellipse(60, 60, 120, 120);

  //Grid 2

  fill(w_color);

  rect(120, startY, 120, 120);

  //Grid 3

  fill(w_color);

  rect(240, startY, 120, 120);

  //Grid 4

  fill(w_color);

  rect(360, startY, 120, 120);

  //Grid 5

  fill(w_color);

  rect(480, startY, 120, 120);

  //Grid 6

  fill(b_color);

  rect(0, 120, wSquare, hSquare);

  fill(w_color);

  arc(0, 240 ,wSquare*2,hSquare*2, 270, 0);

​

  //Grid 7

  fill(w_color);

  rect(120,120, wSquare, hSquare);

  fill(b_color);

  arc(120,240,wSquare*2,hSquare*2, 270, 360);

  //Grid 8

  fill(w_color);

  rect(240, 120, 120, 120);

  //Grid 9

  fill(w_color);

  rect(360, 120, 120, 120);

  //Grid 10

  fill(w_color);

  rect(480, 120, 120, 120);

  //Grid 11

  fill(w_color);

  rect(startX, 240, 120, 120);

  //Grid 12

  fill(b_color);

  rect(120, 240, 120, 120); 

  //Grid 13

  fill(w_color);

  rect(240, 240, 120, 120);

  //Grid 14

  fill(w_color);

  rect(360, 240, 120, 120);

  //Grid 15 

  fill(w_color);

  rect(480, 240, 120, 120);

  //Grid 16

  fill(b_color);

  rect(startX, 360, wSquare, hSquare);

  fill(w_color);

  arc(startX, 360, wSquare*2, hSquare*2, 0, 90);

  //Grid 17

  fill(b_color);

  rect(120, 360, wSquare, hSquare);

  fill(w_color);

  ellipse(180, 420, 120, 120);

  //Grid 18

  fill(b_color);

  rect(240, 360, wSquare, hSquare);

  fill(w_color);

  arc(360, 360,wSquare*2,hSquare*2, 90, 180);

  //Grid 19

  fill(b_color);

  rect(360, 360, wSquare, hSquare);

  fill(w_color);

  arc(360, 360, wSquare*2, hSquare*2, 0, 90);

  //Grid 20

  fill(b_color);

  rect(480, 360, wSquare, hSquare);

  fill(w_color);

  arc(600, 360,wSquare*2,hSquare*2, 90, 180);

  //Grid 21

  fill(w_color);

  rect(startX, 480, 120, 120);

  //Grid 22

  fill(w_color);

  rect(120, 480, wSquare, hSquare);

  fill(b_color);

  arc(240,480,wSquare*2,hSquare*2, 90, 180);

  //Grid 23

  fill(w_color);

  rect(240,480, wSquare, hSquare);

  fill(b_color);

  arc(240,480, wSquare*2, hSquare*2, 0, 90);

  //Grid 24

  fill(b_color);

  rect(360, 480, wSquare, hSquare);

  fill(w_color);

  arc(480, 600, wSquare*2, hSquare*2, 180, 270);

  //Grid 25

  fill(w_color);

  rect(600, 480, 120, 120);

​

}