Silverback9

#야생으로

Creative Coding 독학 제190일 2024년10월03일(목)

오늘은 개천절입니다~^^*

하늘이 열린 날이네요~!!

하늘이 열리고 생명체가 탄생한 날이라고 생각해 볼까요~~^^*

그렇다면~~~

생명의 탄생~~

Cellular Automata~~

를 우리가 개천절 기념으로 직접 프로그램으로 만들어 보는 거예요~~^^* YEAH!!

개천절 주간을 기념하며,

Cellular Automata의 대표적인 프로그램 Game of Life!

Scientific American에도 수록된 Game of Life!

재밌지만 진지한 Game of Life!

의 모눈종이를 설계하는 시간을 가져볼게요~~^^*

오늘은 먼저 2차원 배열을 준비해 보면 어떨까요~~^^*?

2차원 배열은 열(column) * 행(row)의 구조를 가지고 있을텐데요.

시각적으로 행열을 다루는 일을 일상으로 하지 않으면, 단어로만으로 형태를 상상하기는 좀 많이 헷갈릴 것 같아요~^^*

먼저, 열(column)과 행(row)을 눈으로 익히는 시간을 조금 가져 봅시다~~^^*

Column은 세로 기둥, Row은 가로 노젓기~~

우리나라에서 주로 쓰는 “열”은 세로가로 상관없이 줄을 맞추어 형성된 대형을 의미하기 때문에, “Column = 열”이라고 생각하면, 경우에 따라서 헷갈릴 수 있을 것 같아요.

[Column = 세로줄] [Row = 가로줄]로 이해하면 덜 헷갈릴 것 같아요~~^^*

시각연상을 위해 [로컬]이라는 단어를 떠올려 볼까요? 로(Row)는 모음획 (ㅗ)이 가로방향으로 흐르고 컬(Column)은 모음획(ㅓ)이 세로방향으로 흐르는 것 같아요.

function make2DArray(cols, rows) {
   // 세로 기둥 갯수 column과 칸 갯수 row를 매개변수 parameter로 받아서
  
  let arr = new Array(cols);
  //(1) 세로 기둥 갯수 column의 길이를 가진 배열 arr을 생성하고~  
  
  for (let i = 0; i < arr.length; i++) {
    arr[i] = new Array(rows);
  //(2)  이 배열의 구성요소 arr[i](각 세로기둥)마다 칸 갯수 row의 길이의 배열을 만들어 담습니다.   
  }
  
  return arr;
}

예를 들어, 작업문 make2DArray(3,4 );

는 세로 기둥 arr[0], arr[1], arr[2]가 생성된 후,

arr[0]는 다시 하부구성요소인 arr[0][0], arr[0][1], arr[0][2], arr[0][3]을 가지게 됩니다.

arr[1]은 다시 하부구성요소인 arr[1][0], arr[1][1], arr[1][2], arr[1][3]을 가지게 됩니다.

arr[2]은 다시 하부구성요소인 arr[2][0], arr[2][1], arr[2][2], arr[2][3]을 가지게 됩니다.

arr[0][0] arr[1][0] arr[2][0]
arr[0][1] arr[1][1] arr[2][1]
arr[0][2] arr[1][2] arr[2][2]
arr[0][3] arr[1][3] arr[2][3]

정보구조로서는, 세로기둥 column 3개가 각각 4개의 row 구성요소를 거느리고 있네요~^^*

극장 좌석배치표를 배열로 만드는 코드를 사고실험해 본다면~

          Screen
    
A-1 B-1 C-1 D-1 E-1 F-1 G-1 
A-2 B-2 C-2 D-2 E-2 F-2 G-2
A-3 B-3 C-3 D-3 E-3 F-3 G-3
A-4 B-4 C-4 D-4 E-4 F-4 G-4
A-5 B-5 C-5 D-5 E-5 F-5 G-5
A-6 B-6 C-6 D-6 E-6 F-6 G-6
A-7 B-7 C-7 D-7 E-7 F-7 G-7
A-8 B-8 C-8 D-8 E-8 F-8 G-8
A-9 B-9 C-9 D-9 E-9 F-9 G-9

A~G: Column : 7
1~9: Row : 9
function make2DArray(column(7), row(9)) {
   // 세로 기둥 갯수 column(7)과 가로 칸 갯수 row(9)를 매개변수 parameter로 받아서
  
  let arr = new Array(colum(7));
  //(1) 세로 기둥 갯수 7의 길이를 가진 배열 arr을 생성하고~  
  
  for (let i = 0; i < arr.length; i++) {
    arr[i] = new Array(row(9));
  //(2)  이 배열의 구성요소 arr[i](각 세로기둥)마다 가로 칸 갯수 row(9)의 길이의 배열을 만들어 담습니다.   
  }
  
  return arr;
}
arr[0][0] arr[1][0] arr[2][0] arr[3][0] arr[4][0] arr[5][0] arr[6][0]
arr[0][1] arr[1][1] arr[2][1] arr[3][1] arr[4][1] arr[5][1] arr[6][1]
arr[0][2] arr[1][2] arr[2][2] arr[3][2] arr[4][2] arr[5][2] arr[6][2]
arr[0][3] arr[1][3] arr[2][3] arr[3][3] arr[4][3] arr[5][3] arr[6][3]
arr[0][4] arr[1][4] arr[2][4] arr[3][4] arr[4][4] arr[5][4] arr[6][4]
arr[0][5] arr[1][5] arr[2][5] arr[3][5] arr[4][5] arr[5][5] arr[6][5]
arr[0][6] arr[1][6] arr[2][6] arr[3][6] arr[4][6] arr[5][6] arr[6][6]
arr[0][7] arr[1][7] arr[2][7] arr[3][7] arr[4][7] arr[5][7] arr[6][7]
arr[0][8] arr[1][8] arr[2][8] arr[3][8] arr[4][8] arr[5][8] arr[6][8]


7개의 세로 기둥 column이 각각 9개의 row 구성요소를 거느리고 있는 정보구조가 형성될 것 같아요~^^*

“Column 갯수 만큼의 구성원을 가진 배열이 먼저 생성되고, 그 배열의 각 구성원들이 다시 Row 갯수 만큼의 내부구성원들을 가진 배열이 된다.”

행열을 일상적으로 다루지 않는 우리로서는 많이 헷갈릴 수 있는 부분인 것 같아요!

하늘이 활짝 열린 날!

활짝 열린 저 하늘 속으로, 꿈을 향해 날아 오르기 위해 날개를 가다듬는 날!

오늘 저와 함께 이차원 배열의 Column과 Row에 대해서 자료구조적으로 이해해 보는 시간을 가져 주셔서 감사합니다~~^^*

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

내일 우리 또 만나서, 격자무늬 판을 시각적으로 표현하는 코드 공부를 함께 할까요~^^*

네~~^^* 꿈은 이루어 집니다~~^^*

댓글 남기기