[p5js] 바둑판 그리기 JavaScript

//task: Create 9x9 grid of circles with patterns 

function setup() {
  createCanvas(400, 400); 
background(235); // 옅은 회색으로 설정해주고
for(var i = 0; i < 9; i++) // set a for loop with the variable i 
ellipse(i*40+20, 20, 40, 40); // store the variable && 곱하기 더하기를 통해서 그림 이쁘게 조정하기
}


function setup() {
  createCanvas(400, 400);
background(235);
  for(var j = 0; j < 9; j++) // set another for loop with the variable j
for(var i = 0; i < 9; i++)
ellipse(i*40+20, j*40+20, 40, 40); // variable j를 height 에 심어줘서, 이 모든 걸 y축으로 한 번 더 실행하기
}

//여기까지 하면 9x9 grid completion 
function setup() {
  createCanvas(400, 400);
background(235);
  
  for(var j = 0; j < 9; j++) { curly bracket 설치하는 것 잊지 말기
  for(var i = 0; i < 9; i++) {
  fill(255); // white color
  if(i%3 == 0){  // 만약 variable i가 3으로 나눴을 때 residue 가 0에 가깝다면
  fill(0); // 검정으로 칠해라
  }
ellipse(i*40+20, j*40+20, 40, 40);
  }
  } 닫는 것도 잊지 말자
}


function setup() {
createCanvas(400, 400);
background(235);
  
for(var j = 0; j < 9; j++) {
  for(var i = 0; i < 9; i++) {
    fill(255); 
  if((i+j)%3 == 0){  // set variable j 더해주면 modulo 의 성질상 3의 나머지수는 계속 3의 간격을 유지하되, 한자리 씩 당겨지거나, 밀리게 됨 
   fill(0);
  }
ellipse(i*40+20, j*40+20, 40, 40);
  }
  }
}