▶함께배우는 프로세싱 :: 위치데이터로 원그리기 ①

▶함께배우는 프로세싱 :: 위치데이터로 원그리기 ①

---

이번 포스팅에서는 VisualizingData - chapter 3: mapping부분에 대해서 정리해보았습니다.

- table class

- location파일의 의미

red dot예제의 결과모습입니다.미국 각 주의 위치에 원이 그려져있는 모습입니다. 여기서는 '어떻게 각 주의 위치에 그렸는지'가 중요합니다. 프로세싱에서 원을그리기가 아무리 쉽다고 하지만, 일일이 모든 좌표를 입력하기에는 무리가 있습니다.

ellipse(470, 300, 9, 9);

ellipse(302, 200, 9, 9);

ellipse(410, 202, 9, 9)

...

...

...

이건 무리!

저자는 tsv형식의 'locaion'이라는 파일에서 정보를 불러왔습니다. 

예제폴더내의 'data'폴더를 열어보면 이렇게 locaion파일이 보입니다. 더블클릭해보면 위 사진과 같은 형태로 보이게 되는데 이는 제 메모장의 옵션이 자동줄바꿈으로 되어었있기때문입니다. 혼란을 줄이기위해서 익숙한 프로그램인 '엑셀'로 열어보았습니다.

역시 우리가 알고있는 테이블형식이란 이런것입니다. 친근함이느껴 집니다. A열에는 각 주의 이름들이 나열되어있고, B열과 C열에는 알 수 없는 숫자들이 나열되어있습니다. 우리가 열어본 이 파일이름이 'location'이었다는 점을 생각하면 아마 x, y값 일것이라는 예측을 해볼 수 있습니다. 그런데 B,C열의 숫자들을 살펴보면 심하게 불규칙 적이라는 것을 알 수 있는데요.  결국 이 location데이터는 위도 경도 좌표값을 저장해둔 파일이 아니라, 단순하게 프로세싱에서의 좌표값을 저장한 파일인 것입니다.

실제로 한번 확인해보겠습니다. NY(뉴욕)의 B,C열 값은 541과 107인데, 뉴욕의 위도경도값은 40.7, -74입니다.

엑셀의 BC열 데이터로 '뉴욕'이라는 텍스트를 써보면 실제 뉴욕의 위치에 표시되는 것을 볼 수 있습니다.

Chapter3에서 위치데이터를 가져와 원을 그리는 원리는 위 사진에서 확인할 수 있습니다. draw()내 for구문은 데이터파일의 rowCount(총 행의 수)만큼 반복되며, 그 안에서 x,y값은 getFloat()이라는 함수로 데이터를 가져오게 됩니다.

getFloat()의 형태

getFloat()은 Table 클래스내에서 정의된 함수기능입니다. getFloat()은 두가지 형태로 기능하게 되는데 첫 번째는 매개변수로 행의 이름과 열을 받았을때의 모습이고, 두번 째는 행의 번호와 열을 받았을 때의 모습입니다.

위에서 살펴봤던 for구문에서는 행 번호와 열 번호를 매개변수로 데이터를 가져왔습니다. 즉, x는 특정 열(1열)의 각 행의 값을 순차적으로 가져오게끔 설정되어있는 것입니다. y역시 동일한 방식으로 파일로부터 위치정보를 불러오게 됩니다.

이러한 x, y값을 은 ellipse()기능을 이용하여 그려주게 됩니다.