function setup() {

  createCanvas(400, 400);

  background(20)

  noFill();

  strokeWeight(5);

  stroke(255);

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

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

    // console.log(i);

      push();//PUSH translate the thing within the push

​

        translate(i*gridSize,j*gridSize)

        let r = random(1);

        // rotate(PI)

        if (r > 0.5) {

          arc(0,0,gridSize,gridSize,0,HALF_PI,OPEN);

          arc(0,gridSize,gridSize,gridSize,PI,PI+HALF_PI,OPEN); // end angle should be larger

        } else {

          arc(gridSize,0,gridSize,gridSize,HALF_PI,PI,OPEN);

          arc(0,gridSize,gridSize,gridSize,PI+HALF_PI,TWO_PI,OPEN); // end angle should be larger

        }

​

      pop(); // get back to the original setting(including position)

    }

  }

  // arc(startx,starty,width,height,startangle,endangle)

​

}

​

function draw() {

​

​

}

​

​

// let gridSize = 20;

​

// function setup() {

//   createCanvas(windowWidth, windowHeight);

//   background(0);

//   for (let y = 0; y < height; y += gridSize) {

//     for (let x = 0; x < width; x += gridSize) {

//       push();

//       translate(x,y);

//       let randomNum = random(1);

//       if(randomNum>0.5){

//         drawPattern1();

//       }else{

//         drawPattern2();

//       }

//       pop();

//     }

//   }

// }

​

// function draw() {

// }

​

​

​

// function drawPattern1(){

//   noFill();

//   stroke(255);

//   strokeWeight(3);

//   arc(0,0,gridSize,gridSize, 0 , HALF_PI, OPEN);

//   arc(gridSize,gridSize,gridSize,gridSize, PI,PI+HALF_PI, OPEN);

// }

​

// function drawPattern2(){

//   noFill();

//   stroke(255);

//   strokeWeight(3);

//   arc(gridSize,0,gridSize,gridSize,HALF_PI,PI,OPEN);

//   arc(0,gridSize,gridSize,gridSize,PI+HALF_PI,TWO_PI,OPEN);

// }