Silverback9

오늘은 마른 모래 언덕 만들기 프로그램의 멈춤현상을 개선해 보겠습니다! 화이팅!!!

할 수 있다! 할 수 있다! 할 수 있다!

먼저, 컴퓨터가, 화면 위치좌표가 아닌 데이터로 grid[][] 배열 구성원을 다루어야 하는 상황을 정리해 보겠습니다!

마우스가 화면 밖으로 드래그 될 때: grid[][]배열 구성원 찾기 어려움

   i. 마우스 x축 좌표가 왼쪽 경계선을 넘어갈 때 

   ii. 마우스 x축 좌표가 오른쪽 경계선을 넘어갈 때 

   iii. 마우스 y축 좌표가 위쪽 경계선을 넘어갈 때

   iV. 마우스 y축 좌표가 아래쪽 경계선을 넘어갈 때

음…해결방법은….?

아! 네! 그래요! 좋은 생각인데요!!

마우스가 화면 안에서 드래그 될 때만!

grid[][] 배열 구성원을 찾는 거예요! YEAH~~!!!

함수 mouseDragged()를 개선해 봅니다~~!! YEAH~~!!

function mouseDragged() {
  let col = floor(mouseX / resolution);
  let row = floor(mouseY / resolution);
  if(col >= 0 && col <= cols-1 && row >= 0 && row <= rows-1) {
  grid[col][row] = 1; 
  }

어떠셔요? 마우스가 화면 밖으로 벗어나도 괜찮은가요? 음…마우스가 왼쪽 가장자리 오른쪽 가장자리 한 칸 안 쪽에 있을 때는 괜찮은데…왼쪽 오른쪽 가장자리 칸에 가면 멈추는 것 같은데요? 그리고 한 칸 안쪽에 있더라도 같은 자리에서 계속 모래를 만들어 내면 멈추는 것 같은데요?

이것은 바로!!!

<우리의 알갱이> 한 칸 아래의 !!!

belowL과 below와 belowR을 위한!!!

grid[][] 구성요소들을 찾기 어려워서인 것 같아요!!!

below는 <우리의 알갱이>와 x좌표가 같아서 괜찮은데…

belowL은 <우리의 알갱이>보다 x좌표가 1 작고

belowR은 <우리의 알갱이>보다 x좌표가 1 크기 때문에,

mouse가 화면 왼쪽 오른쪽 가장자리에 있으면, belowL 또는 belowR의 위치좌표는 화면 밖으로 나가버려서 grid[][]의 구성요소를 찾기가 어려운 것 같아요.

한 곳에서 계속 <우리의 알갱이>를 생성하면, 그곳이 화면 가장자리 안쪽에 있다고 하더라도, 그 자리 밑 주위가 점점 넓게 하얗게 되다보니, 그 옆 칸, 또 그 옆 칸…계속 찾다보면 어느 순간 belowL이나 belowR을 화면 밖 위치좌표에서 찾게 되어, grid[][]의 구성요소를 찾기가 어려워 지는 것 같아요.

그러면 우리…belowL과 belowR에 관한 부분도 개선해 보기로 할까요?

let belowR;
let belowL;
        
if(i+1 <= cols-1) {
   //오른쪽 가장자리 한 칸 안쪽까지만 있을 때 
   let belowR = grid[i+1][j+1]; //바로 아래 칸의 오른쪽 칸도 찾아서~
}
        
if(i-1 >= 0 ) {
   //왼쪽 가장자리 한 칸 안쪽까지만 있을 때 
   let belowL = grid[i-1][j+1];  //바로 아래 칸의 왼쪽 칸도 찾아서~
 }  

자, 그럼 이제 우리 전체 코드를 살펴 보러 가볼까요~~~^^* 예~~~갑시다~~~!!!

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 mouseDragged() {
  let col = floor(mouseX / resolution);
  let row = floor(mouseY / resolution);
  
  if(col >= 0 && col <= cols-1 && row >= 0 && row <= rows-1) {
  grid[col][row] = 1; 
  }
  
  
  //마우스가 클릭되면 자동적으로 작동되는 함수입니다~~^^*
  //메인 함수에서 따로 호출할 필요가 없어요~~^^*
  //mouseX, mouseY가 위치하는 화면 위치 좌표를 resolution으로 나눈 후 그 몫의 정수 부분만 취하면, 해당 위치에 자리한 grid배열의 구성요소를 알 수 있을 것 같아요~^^*
  //마우스의 위치가 화면 안에 있을 때만 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]; //바로 아래 칸을 찾아서~
        
        let belowR;
        let belowL;
        
        if(i+1 <= cols-1) {
          //오른쪽 가장자리 한 칸 안쪽까지만 있을 때 
        let belowR = grid[i+1][j+1]; //바로 아래 칸의 오른쪽 칸도 찾아서~
        }
        
        if(i-1 >= 0 ) {
          //왼쪽 가장자리 한 칸 안쪽까지만 있을 때 
        let belowL = grid[i-1][j+1];  //바로 아래 칸의 왼쪽 칸도 찾아서~
        }  
         
        
        if (below === 0) { //바로 아래 칸이 까맣다면~~^^*
          nextGrid[i][j + 1] = 1; //바로 아래 칸을 하얗게~^^*
        }
        else if (belowR === 0) {
        //바로 아래 칸은 희지만 그 오른쪽 칸이 까맣다면~~^^*
          nextGrid[i+1][j+1] = 1; //알갱이의 바로 아래 오른쪽 칸을 하얗게~^^*
        }
        else if (belowL === 0) {
        //바로 아래 칸도 희고, 그 오른쪽 칸도 희지만, 그 왼쪽 칸은 까맣다면~~^^*
         nextGrid[i-1][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); 
       
    }
  }
  //마우스 클릭 한 곳의 알갱이가 하얗게 변하나요? ^^*
  //그리고 그 아래칸들이 차례로 하얗게 까맣게 변화되나요?^^*
  //하얀 알갱이가 까만 하늘에서 내려오는 것처럼 보이나요?^^*
  //하얀 알갱이가 바닥에 가만히 머무르나요?^^*
  //하얀 알갱이가 마른 모래 언덕처럼 부드럽게 쌓이나요? 
  //마우스가 왼쪽 가장자리 오른쪽 가장자리 가더라도 프로그램이 계속 되나요?
  //마우스로 한 곳을 천천히 오래 드래그해도 프로그램이 계속 되나요? 
}

마우스 움직임과 상관없이 프로그램이 안정적으로 잘 작동되나요~~^^*

위험상황을 점검하고, 사전에 예방하기 위해 장치들을 준비했더니, 안정성이 확보가 되었어요~~~^^*

오늘 저와 함께 안전점검과 구조보강을 해 주셔서 감사합니다~~^^*

이제 우리 모래 알갱이들이 좀더 자연스럽게 쌓일 수 있도록 만들어 보면 어떨까요?

내일 우리 또 만나서 코드를 개선하여, 오늘 확보한 안정성에 자연스러움을 더해 볼까요~~^^*

오늘도 멋진 아침! 멋진 하루! 보내시고요~~!!

우리 내일 또 만나요~~~^^*

네~~!!! 꿈은 이루어 집니다~~!!!