Week 3 of Object oriented programming
이번주 과정을 마치면 위와 같이 Processing library를 활용하여 GUI에 관해 다룰수 있게 된다고 한다.
최종 결과물을 위와 같은 모습이 된다.
먼저 Creating GUIs using PApplet 강의를 보자
위와 같은 사진에 시간에 따라 색이 변하는 원을 추가하고 싶을 때 GUI를 어떤식으로 활용할 것인지에 대한 내용을 다룬다.
먼저 GUI는 Graphical User Interface의 약자로
메뉴, 아이콘, 마우스클릭, 텍스트박스 등과 같은 객체를 다루는 것까지 포함한다.
GUI를 자바에서 활용할 때 다양한 라이브러리가 있는데 이번에는 Processing이라는 라이브러리를 사용한다고 한다.
간단한 퀴즈가 등장한다.
왼쪽의 사진을 배경화면으로 지정할 것이고 오른쪽과 같은 객체를 변화하도록 설정을 할텐데 위치를 선정하는 것부터 시작한다.
예상한 것처럼 x,y축의 좌표개념으로 위치를 선정할 수 있다.
대신 왼쪽 상단이 (0, 0)이며 x축은 오른쪽으로 갈수록 값이 증가, y축은 아래로 갈수록 값이 증가한다.
Processing에 관한 내용을 더 확인할 경우 Documentation을 참고하기를 권유한다.
PApplet 을 extend하여 MyPApplet으로 확장하여 객체를 사용하고
그 위를 보면 Processing 라이브러리의 core를 전부 임포트한 것을 알 수 있다.
MyPApplet에는 setup과 draw 메쏘드가 존재하는데 각각 캔버스를 마련해주는 것과 콘텐츠를 표출해주는 역할을 담당한다.
현상태에서 Run하더라도 위와 같이 공백의 지도만 뜰 것이다.
그렇다면 위에 어떻게 내용을 채워야하는지 보겠다.
setup을 먼저보게되면
우선 size를 결정할 수 있고
배경사진을 설정할 수 있다.
따라서 200x200 크기로 만들고 배경사진을 결정해주는 코드를 입력한다.
하지만 실행하더라도 여전히 빈화면이 나오는데 이유는 잠시뒤 나온다.
먼저 우측 상단의 좌표를 묻는데 (400, 0)이 될 것이다.
아까 setup을 했음에도 빈화면이 출력된 것은 draw를 통해 콘텐츠를 보이지 않았기 때문이다.
따라서 위와 같이 배경사진을 보이도록하고 실행하면
위와 같이 파랗게만 나온다.
이는 사진의 크기가 너무 크기때문에 발생한것으로 사진의 일부분만 나오게 된 상황이다. 따라서 크기재조정이 필요하다.
resize메쏘드를 참조하여
추가하면 약간 어색하게 사진크기가 재조정된 것을 알 수 있다.
이때 사진의 비율을 유지하면서 재조정을 하려면 위와 같이 맞추고자하는 기준축을 동일한 크기인 height으로 설정하고 다른축을 0으로 두면 되겠다.
같은 내용에 대한 퀴즈를 내고 있다.
이번에는 시간에 따라 변하는 객체(Sun)을 추가해본다.
위치를 선정할때 좌표를 이용한다고 해서 (50, 50)으로 할 수도 있겠지만
배경사진처럼 비율에 맞도록 설정할 수도 있겠다. 또한 창의 크기(캔버스)는 언제든 변할 수 있으므로 비율에 맞게 설정하는 것이 효율적이다.
따라서 ellipse메쏘드를 통해 원을 그려주면 오른쪽과 같이 원이 추가가 된다.
이번엔 색을 추가하여야 하는데 RGB기준에 따라 선정할 수 있고
각 Red, Green, Blue의 값이 얼마나 있는지 표현하는 방식을 짚어준다.
fill 메쏘드를 통해 색깔을 채워준다.
이제 시각에 따라 색깔이 달라지도록 설정할 준비는 끝난다.
RGB에 관한 문제이다.
다음은 계속 진행중인 과제를 수행하기 위해 Unfolding Maps에 관한 강의이다.
지도에 각 포인트마다 다양한 정보를 기입해야 하는 상황이 왔다.
위에서 작업한 것과 동일하게 setup을 통해 캔버스를 준비하고 이에 콘텐츠를 표시함으로 완성할 수 있겠다.
따라서 setup과 draw를 위와 같이 작성할 수 있겠다.
prcessing 라이브러리가 어디서 임포트 되었는지 눈여겨 보라는 메세지를 보여준다.
이제 실행했을때 위와 같이 나오며
background를 통해 배경의 기본 색상을 결정할 수 있다.
이제 콘텐츠를 추가해본다.
계속적으로 강조하는 이야기이지만 setup은 실행 시 한번만 작동하며 draw는 반복적으로 갱신된다.
특정위치값을 valLoc에 저장하고 SimplePointMarker를 통해 마커 콘텐츠를 셋팅한다.
SimplePointMarker 또한 문서를 참고하면 된다.
그래서 val 변수를 SimplePointMarker 객체를 통해 생성하며 해당 지역을 강조할 수 있다.
특정위치에 마커를 추가하기위해 해야하는 것은 위에 나온 것처럼 SimplePointMarker 객체를 추가하고 여기에 Location 객체가 들어가 있게 된다.
이제 마커를 커스터마이즈하거나 추가/유지하는 방법을 알아본다.
2개의 단계를 거치는데 특성과 위치의 정보를 가지고 이를 시각화하게된다.
Feature라는 타입으로 valEq 변수를 선언하고 여기에 PointFeature객체를 통해 인스턴스를 생성한다. 이때 addProperty메쏘드를 통해 다양한 정보를 기입하게 된다. title, magnitude, date, year 등의 정보들을 말이다.
그리고 이를 valMk로 묶어 Marker로 표기를 하게된다.
그럼 위와 같이 시각화가 가능해진다.
정보를 한데 모아 효율적으로 관리하기위해 List 타입을 가져오며 bigEqs 변수에 저장하게된다.
마찬가지로 List 타입의 markers에도 여러정보가 포함되지만 더 적은 정보가 들어선다.
그리고 markers 내에서 year 기준으로 2000년대 이후이면 색상을 노랑색으로 표기하고 아닐 시에는 회색으로 표기하는 if문이다.
또한 진도에 따라서도 분류가 가능하기에 List 타입으로 parseEarthquake를 정의하고
이를 맵상에서 진도별로 표기하는 것이 가능하다.
댓글
댓글 쓰기