시각화를 배우고 정리합니다

▶ 함께배우는 프로세싱 : 기초예제 폰트 CreateFont Create Font 폰트를 생성하는 부분입니다.프로세싱 실행 후 [Tools] - [Create Font...]를 클릭해줍니다. Create Font 목록에는 컴퓨터에 설치되어있는 폰트목록이 나옵니다.만들고 싶은 폰트를 선택한 후, [OK]버튼을 누르면 됩니다. *참고로 Filename을 위의 사진처럼 본래명칭을 사용해도되지만길다고 생각되신다면 임의로 줄여서 만드셔도 됩니다. PFont : 폰트 클래스예) Pfont exfont; loadFont : 폰트파일을 불러오는 함수예) exfont = loadFont("SeoulHangangM-48.vlw"); text() : 텍스트를 출력(위치 등 지정)예) text(exfont, width/2, ..

▶함께배우는 프로세싱 : 대한민국 와이파이 지도 만들기 안녕하세요 오늘은 프로세싱을 활용하여 '대한민국 와이파이지도'를 만드는 과정에대해서 살펴보려고합니다. 완성된 동영상을 먼저 확인해보겠습니다. [프로세싱으로 만든 우리나라 와이파이지도] 흰배경에 다른색상으로 표시할 수도 있었지만 개인적으로는 검은색배경에 흰색으로 표시하는것이 가장 보기에 편한 것 같았습니다. 사용한 데이터는 공공데이터포털에서 얻었습니다. 미래창조과학부에서 공개한 이 데이터에는 각 와이파이의 위치정보, 지역명, 용도 등 다양한 정보가 정리되어있습니다. 공공데이터포털에서 'WIFI DB'를 검색하시면 다운로드받으실 수 있습니다^^ 다운로드 받은 파일을 열어보시면 총 288,762개의 와이파이에 대한 정보가 들어있습니다. 이 중에서 위 사진..

Processing :: Processing.js의 시작html파일에서 프로세싱 적용하기 오늘 살펴보고자 하는 것은Processing.js입니다^^ 먼저 어떤 예제인지 영상을 통해확인해보세요~ Processing.js란? Processing.js는 데이터시각화, 인터랙티브 애니메이션,미디어아트, 인포그래픽, 비디오게임 등 다양한 작업을웹 표준의 작업환경에서 구현할 수 있도록 해줍니다. 중요한점은 Processing의 언어 그대로 특별한 플러그인 없이 구현이 가능하다는 점입니다^^ Processing의 결과물을 오프라인에서만활용하는것이 아니라, 웹표준 환경에서 직접구현할 수 있도록 해주는 것입니다. [ Processing.js 메인 페이지의 모습 ] 프로세싱js는 프로세싱과는 별개로Processing.js..

Processing :: 프로세싱 : 움직임과 방향 이번 포스팅에서는 프로세싱을 이용하여 도형의 움직임과 방향을설정하는 과정을함께 살펴보겠습니다. 먼저 프로세싱을 열어줍니다. int radius = 40;float x = -radius;float speed = 0.5; **tip**int와 float의 프레임당 최저속도 int의 프레임당 최저속도 : 1pxfloat의 프레임당 최저속도 : 소수점 자리 > float(실수)를 사용하면 더 높은 해상도로 구현할 수 있다. 예제에서 float유형을 사용하는 이유가 있었습니다.결과물에 모션이 들어간다면 꼭 기억해두어야할 것 같네요^^ void setup() {size(240,120);smooth();ellipseMode(RADIUS);} void draw() {..

프로세싱으로 만드는 시각화 :: 변수설정하기 이번 포스팅에서는 [프로세싱]에서의 변수설정에 대해서 알아보겠습니다.변수를 이용하면 같은 값을 반복해서 써야하는 불편함을 줄일 수 있습니다. [변수 설정의 여러가지 형태] int x; // x를 int 유형의 변수로 설정x = 12; // x에 값을 할당하기int x = 12; // x를 int유형의 변수로 선언하고 값을 할당하기 [실제 적용 예시] size(480,120); smooth();int x = 60;int d = 110;ellipse(75, x, d, d);ellipse(145, x, d, d);ellipse(215, x, d, d,); 다음 포스팅에서는 [프로세싱]의 변수에 대해서 보다 많은 종류와 방법들을 예시와 함께 살펴보겠습니다.

인터랙티브 그래픽 프로그래밍 툴인 [프로세싱 Processing] 에 대해 살펴보고자 합니다. 프로세싱은 MIT 미디어랩에서 케이시 리아이와 벤 프라이가 만든 오픈소스 프로그래밍 언어인데요~이미지, 애니메이션, 인터랙션을 구현하는 소프트웨어를 작성하는데 사용됩니다. [ 데이터시각화에 프로세싱을 이용한 예 : Aaron Koblin Flightpatterns ][사진출처 : Aaron Koblin page ] 이렇게 실제로 데이터시각화에서 사용되고있는 프로세싱을위키백과에서는 어떻게 설명하고 있는지 살펴보겠습니다.[프로세싱]을 설명하는데 프로세싱이 가장 큰 비중을 차지하고 있고그다음으로 눈에 띄는 단어를 보명 visual, language 등이 눈에 띕니다. 프로세싱을 다운로드하는 방법에 대해서 살펴보겠습니..