어제 새까만 하늘이 새하얀 모래 알갱이 하나를 톡! 뱉을 준비를 하고 있었는데요.
이제 이 모래 알갱이가 내려 오는 코드를 오늘 만들어 보려고 합니다~~!! Yeah~!!
음…알갱이가 내려온다는 것은….
알갱이가 있던 자리는 까맣게 되고
알갱이 바로 아래 자리가 하얗게 되는 모습이
반복되는 것 같아요.
<우리의 알갱이> grid[ i ][ j ]의 바로 아래 알갱이는 grid[ i ][ j + 1 ]일 것 같은데요.
알갱이가 내려올 때는, <우리의 알갱이> 옆의 알갱이 grid[ i + 1 ][ j ]가 아니라 <우리의 알갱이> 아래의 알갱이 grid[ i ] [ j + 1 ]가 중요해 지네요.
참…근데요…!
행열을 다룰 때, 세로줄 우선으로 다룰 수도 있고 가로줄 우선으로 다룰 수도 있을 것 같아요.
(1) 하나의 세로줄(column)에 소속된 칸들(rows)을 주욱 다룬 뒤 다음 세로줄(column)로 넘어가는 경우: C, C++, Pascal, etc.
(2) 하나의 가로줄(row)에 소속된 칸들(columns)을 주욱 다룬 뒤 다음 가로줄(row)로 넘어가는 경우: FORTRAN, MATLAB, etc.
(3) 세로줄(column)과 가로줄(row) 둘 중 어느 하나에 우선순위를 두지 않는 경우: Java, C#, Python, etc.
음…우리가 사용하는 p5.js는 Java 계열이니까, 우선순위를 프로그래밍 언어가 따로 정하지는 않는 것 같네요.
행열에 대한 우선순위에 대해 잠시 살펴 봤네요~^^* 다양한 프로그래밍 언어들의 일처리 방식들이 다채롭고 신기하기도 하구요~^^*
자, 그럼 이제, <우리의 알갱이> grid[ i ][ j ]와 바로 아래 알갱이 grid[ i ][ j + 1 ]에 대해 탐구해 보도록 할게요~^^*
하나. <우리의 알갱이>가 내려온다는 것은 다음 단계에서 위치가 바뀐다는 의미가 될 수 있기 때문에, 우리는 <지금 단계의 모눈종이>와 <다음 단계의 모눈종이> 두 장이 필요할 것 같아요.
둘. 지금 단계의 <우리의 알갱이>의 바로 밑 위치가 다음 단계의 <우리의 알갱이>의 위치가 된다는 것은
다음 단계 모눈종이의 grid[ i ] [ j ]는 이미 검게 되어 있고,
다음 단계 모눈종이의 grid[ i ][ j + 1 ]도 검은 상태인데,
지금 단계의 <우리의 알갱이>가 한 칸 내려오다 보니,
다음 단계 모눈종이의 grid[ i ][ 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].lemgth; j++) {
arr[i][j] = 0;
}
}
return arr;
}이제, <우리의 알갱이>가 내려가는 모습을 코드로 표현해 볼게요!
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;
//바로 밑 알갱이를 하얗게 변화시켜요~^^*
}
}
}
}
grid = nextGrid;
//다음 단계 모눈종이 상태를 지금 단계 모눈 종이에 저장해요.
//이제 이 과정을 반복하면 알갱이가 내려갈 것 같은데요! 자, 그럼 이제 우리 전체 코드를 같이 살펴 볼까요~~^^*
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합니다.
}
let grid;
let cols;
let rows;
let resolution = 10;
function setup() {
createCanvas(400, 400);
cols = width / resolution;
rows = height / resolution;
grid = make2DArray(cols, rows);
//지금 단계 까만 모눈 종이 준비~~^^*
grid[20][10] = 1;
//grid[][]의 x축 배열 21번째 y축 배열 11번째 구성요소에 1을 저장해 봅시다~^^*.
//이 부분만 하예져요~~^^*
}
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; //바로 아래 칸을 하얗게~^^*
}
}
}
}
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);
}
}
//모눈종이 폭 1/2 높이 1/4 근처에 흰색 칸이 한 개 그려졌나요? ^^*
//그리고 그 아래칸들이 차례로 하양게 까망게 변화되나요?^^*
//하얀 알갱이가 까만 하늘에서 내려오는 것처럼 보이나요?^^*
}오늘 저와 함께 알갱이를 떨어뜨려 주셔서 감사합니다~~^^*
그런데~~떨어지는 것은 반가운데~~, 영영 사라져 버려서 아쉽다구요?
그럼 우리 내일은 이 알갱이가 바닥에 닿아 가만히 있도록 만들어 볼까요?
알갱이들이 벚꽃잎들 쌓이듯 차곡차곡 쌓이는 모습을 우리가 만들어 볼 수도 있을 것 같아요. 네! 우리, 못다핀 꽃 한송이를 피워내는 정성과 사랑과 의지로 코드공부를 계속 함께 해 나가보는 거예요!
알갱이가 사라졌다고 소중한 세월을 눈물로 보내지 않고! 알갱이를 찾아서! 나도야 간다! 너도야 간다! 우리도야 간다! YEAH~~!!!
오늘 점심도 맛있게 드시고요! 멋진 하루 보내시고요!
내일 우리 또 만나요~~!!!
네~~!!! 꿈은 이루어 집니다~~!!!
Silverback9 
댓글 남기기