Creative Coding 독학 제199일 2024년10월12일(토)

2024년 10월 12일

오늘은 바닥에 알갱이가 가만히 있는 것을 표현하는 코드를 만들어 보겠습니다~^^* YEAH~^^*

음….알갱이가 바닥에 닿았을 때, 알갱이의 바로 아래 칸이 존재하지 않는 것 같아요.

그러면!

알갱이의 바로 아래 칸이 존재하지 않을 때, 즉 알갱이가 바닥에 닿았을 때, 알갱이의 색을 흰색으로 유지하는 거예요.

알갱이의 바로 아래 칸이 존재하지 않는다는 것은,

<알갱이의 바로 아래 칸이 존재하고 그 색이 검을 때>라는 조건 외의 조건들 중 하나일 것 같아요.

바로,

<알갱이의 바로 아래 칸이 존재하지 않거나, 알갱이의 바로 아래 칸이 존재하는 데 그 색이 흰색일 때>에 해당할 것 같아요.

어제 만든 코드를 이 알고리즘을 바탕으로 개선해 보겠습니다~^^*

  let nextGrid = make2DArray(cols, rows);
  //다음 단계 까만 모눈 종이 준비~~^^*

  for (let i = 0; i < cols; i++){
    for (let j = 0; j < rows; j++) {
      let state = grid[i][j]; //지금 단계 상태 저장~
      if (state === 1) { //이 칸이 하얗다면~~^^*
       let below = grid[i][j+1]; //바로 아래 칸을 찾아서~
       if ( below === 0) { //바로 아래 칸이 까맣다면~~^^*
         nextGrid[i][j + 1] = 1; //바로 아래 칸을 하얗게~^^*
       } else {
         //그렇지 않을 때, 즉, 
         //바로 아래 칸이 희거나, 바로 아래 칸이 존재하지 않을 때
         nextGrid[i][j] = 1; //알갱이의 현재 자리를 하얗게~^^*
      }
    }
  }
  
  grid = nextGrid; //다음 단계 모눈 종이 상태를 지금 단계 모눈 종이에 저장~

<우리의 알갱이>가 바닥에 얌전히 잘 머무르고 있나요~~?^^*

근데요~~~~^^*

어머, 근데요~~~~^^*

<else: 그렇지 않다면>에 해당하는 조건은 두 가지인데요~~^^*

(1) 바로 아래 칸이 존재하지 않을 때

(2) 바로 아래 칸이 흰 색일 때

<바로 아래 칸이 흰 색일 때> <우리의 알갱이>의 현재 위치가 흰색이 된다는 것은????

알갱이가 차곡차곡 쌓일 수도 있다는 뜻????

와우!!! 그럼 우리 오늘 공부하는 김에, 모래 성을 쌓아 볼까요?!!!

모래에 물을 적시면 모래 위에 모래가 쌓일 것 같은데요!!!!

우리 마우스로 젖은 모래를 뿌려 봅시다!!!!

마우스를 화면에 클릭하면 <우리의 알갱이>가 생성되도록 해 볼까요~~^^*

function mousePressed() {
  let col = floor(mouseX / resolution);
  let row = floor(mouseY / resolution);
  grid[col][row] = 1; 
}
//mouseX, mouseY가 위치하는 화면 위치 좌표를 resoultion으로 나눈 후 그 몫의 정수 부분만 취하면, 해당 위치에 자리한 grid배열의 구성요소를 알 수 있을 것 같아요~^^*
//그리고, 그 구성요소에 1의 값을 저장하면~~
//색칠하는 for 구문 안에서 흰 색으로 표현되겠지요~^^*

이제 우리 전체 코드를 함께 볼까요~~^^*

function make2DArray(cols, rows) {
  let arr = new Array(cols);
  for (let i = 0; i < arr.length; i++) {
    arr[i] = new Array(rows);
    for (let j = 0; j < arr[i].length; j++) {
      arr[i][j] = 0;
    }
  }
  return arr;
  //새까맣게 채워진 모눈 종이를 return합니다. 
}

function mousePressed() {
  let col = floor(mouseX / resolution);
  let row = floor(mouseY / resolution);
  grid[col][row] = 1; 
  
  //마우스가 클릭되면 자동적으로 작동되는 함수입니다~~^^*
  //메인 함수에서 따로 호출할 필요가 없어요~~^^*
  //mouseX, mouseY가 위치하는 화면 위치 좌표를 resoultion으로 나눈 후 그 몫의 정수 부분만 취하면, 해당 위치에 자리한 grid배열의 구성요소를 알 수 있을 것 같아요~^^*
  //그리고, 그 구성요소에 1의 값을 저장하면~~
  //메인 함수의 색칠하는 for 구문 안에서 흰 색으로 표현되겠지요~^^* 
} 


let grid;
let cols;
let rows;
let resolution = 10;

function setup() {
  createCanvas(400, 400);
  cols = width / resolution;
  rows = height / resolution;

  grid = make2DArray(cols, rows);
  //지금 단계 까만 모눈 종이 준비~~^^*
  
}

function draw() {
  background(0);
   
  let nextGrid = make2DArray(cols, rows);
  //다음 단계 까만 모눈 종이 준비~~^^*

  for (let i = 0; i < cols; i++){
    for (let j = 0; j < rows; j++) {
      let state = grid[i][j]; //지금 단계 상태 저장~
      if (state === 1) { //이 칸이 하얗다면~~^^*
        let below = grid[i][j+1]; //바로 아래 칸을 찾아서~
        if ( below === 0) { //바로 아래 칸이 까맣다면~~^^*
          nextGrid[i][j + 1] = 1; //바로 아래 칸을 하얗게~^^*
        }
        else {
        //그렇지 않을 때, 즉, 
        //바로 아래 칸이 희거나, 바로 아래 칸이 존재하지 않을 때
        nextGrid[i][j] = 1; //알갱이의 현재 자리를 하얗게~^^*
        }
      } 
    }
  }
  
  grid = nextGrid; //다음 단계 모눈 종이 상태를 지금 단계 모눈 종이에 저장~

  for (let i = 0; i < cols; i++) {
    for (let j = 0; j < rows; j++) {
      
      let x = i * resolution;
      let y = j * resolution;
      
      fill(grid[i][j] * 255); 
      //grid[i][j]값이 1이면 1*255 = 255 즉, 흰색으로 채웁니다.
      //grid[i][j]값이 0이면 0*255 = 0 즉, 검은색으로 채웁니다.
      stroke(255);
      square(x, y, resolution); 
       
    }
  }
  //마우스 클릭 한 곳의 알갱이가 하양게 변하나요? ^^*
  //그리고 그 아래칸들이 차례로 하양게 까맣게 변화되나요?^^*
  //하얀 알갱이가 까만 하늘에서 내려오는 것처럼 보이나요?^^*
  //하얀 알갱이가 바닥에 가만히 머무르나요?^^*
}

물에 적신 모래를 한 알갱이 한 알갱이를 공중에 톡톡 뿌려 볼까요? 모래성을 정성껏 클릭클릭 쌓아 보셔요~~^^* 넓게~~ 높게~~^^*