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

▶ 함께배우는 프로세싱 : 기초예제 폰트 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 :: 프로세싱 기초예제 – video #5 : blobDetction라이브러리 안녕하세요오늘은 video예제에 이어서응용해서 공부해볼만한 라이브러리를 소개하고자합니다. blobDetection 라이브러리를 이용하면위 영상처럼 재미있는 시각화를 만들 수 있습니다. [오늘 포스팅에서 살펴볼 blobDetection 라이브러리] import processing.video.*; import blobDetection.*; 먼저 프로세싱 비디오라이브러리와다운받은 blobDetection라이브러리를 로드합니다. Capture cam; BlobDetection theBlobDetection; PImage img; boolean newFrame=false; 새로 설치한 BlobDetection 라이..

▶Processing :: 프로세싱 기초예제 – video #4움직임 추적하기 + 원 그리기 프로세싱 기초예제 - VIDEO의 4번째 포스팅입니다.오늘 포스팅에서는 #2, #3포스팅에서했던 움직임 감지에서 조금 더 나아가서전체 움직임의 양을 감지하고, 이를 바탕으로 원을 그리는 과정을 살펴보겠습니다. import processing.video.*; Capture cam; PImage prevFrame; float threshold = 50; 이전 예제에서 했던대로 먼저 프로세싱의 비디오라이브러리를 로드하고기본세팅을 먼저해주는 부분입니다. PImage prevFrame부분은 이전 프레임을 저장해줄 변수이며float threshold 부분은 '얼마나 다른 픽셀을 움직임로 판단할지'에 대한 설정입니다. voi..

▶Processing :: 프로세싱 기초예제 – video #3움직임을 감지하고 추적하기 이번 포스팅에서는 지난 #1, #2예제와 마찬가지로video를 불러온다음 이것을 이용하여 여러가지 조작을 해보는 과정으로'움직임을 감지하고 추적하기'에 대해서 살펴보고자합니다. ▶▶바로가기 Processing :: 프로세싱 기초예제 – video #1 - 캠 영상 출력하기▶▶바로가기 Processing :: 프로세싱 기초예제 – video #2 - 영상의 색상 추적하기 import processing.video.*; Capture cam; PImage preFrame; float threshold = 50; 사전 설정을 해주는 부분입니다. preFrame부분이 이전 프레임을 저장할 변수입니다.그리고 그아래에있는 th..

▶Processing :: 프로세싱 기초예제 – video #2 '시각화'에서 비디오를 다루는 것 만큼 재미있는 것은 없지요^^ 오늘은 지난 포스팅에 이어서 를 살펴보겠습니다. 프로세싱 기초예제 video #1 바로가기 그럼 시작해보겠습니다. import processing.video.*; 가장 먼저 잊지말고 해야할 부분이지요~ 프로세싱의 비디오 라이브러리를 로드해줍니다. Capture cam; color trackColor; 그 다음으로는 캡처를 하기위한 'cam' 변수와 색상을 찾을 때 이용할 'trackColor'변수를 만들어줍니다. 다음으로 setup()부분을 먼저 살펴보겠습니다 void setup(){ size(640, 480); trackColor = color(255, 0, 0); // 추적..

▶Processing :: 프로세싱 기초예제 – video #1 오늘은 캠을 활용하여 프로세싱내에서 비디오를 출력하고,출력된 비디오를 간단하게 조작하는 부분까지 살펴보려고 합니다. import processing.video.*; 먼저 프로세싱의 비디오라이브러리를 불러옵니다. 불러오셨나요?여기까지 마치셨다면, setup()부분 먼저 살펴보겠습니다. Capture cam; void setup(){ size(640, 480); String[] cameras = Capture.list(); if(cameras.length == 0){ println("There are no cameras available for capture."); exit(); } else { println("Available cameras"..

문자열[String]이번 포스팅에서는 프로세싱의 다양한 내용중에서도'문자열' 관련 내용을 꼼꼼하게 정리해보고자 합니다.{작성 된 후에도 추가 및 수정되는 부분이 있을 수 있습니다.) 들어가기 앞서, 이 포스팅의 예제는[프로세싱 날개를달다] 서적을 바탕으로 하였음을 말씀드립니다. indexOf 함수 문자열에 존재하는 글자들의 순서열을 바탕으로 하며 하나 이상의 인자를 갖고, 인자에 해당하는 문자를 반환합니다.만약 한개의 문자가 아닌 문자열을 또 다른 문자열에서 찾는다면? : 그 첫번째 문자가 갖고 있는 인덱스 번호를 반환합니다. 예제로 살펴보는 것이 더 편하겠지요? String search = "def"; String toBesearched = "abcdefghijk"; int index = toBesea..

픽셀[Pixel]파헤치기 이번 포스팅에서 살펴볼 것은 '픽셀'입니다. 먼저 픽셀의 개념에 대해서 살펴보겠습니다 픽셀 (=화소) 컴퓨터 디스플레이 또는 컴퓨터 이미지를 구성하고 있는 최소 단위의 점. 모니터를 통해서 보는 모든 이미지는 실제로는 픽셀이라고 하는 매우 작은 사각형의 점들로 구성돼 있다. 쉽게, '매우작은 사각형의 점'이 이미지나 디스플레이를 구성하고 있다고 생각하면 됩니다. 이해를 돕기위해서 아래의 그림을 준비했습니다. 사진을 확대해보면 네모난 사각형으로 이루어진 모습을 볼 수 있습니다. 이제 프로세싱으로 돌아가서 살펴볼까요? ▶프로세싱에서의 픽셀 픽셀의 배열은 다른 배열들과 거의 동일합니다. : [다른점 : 프로세싱 내장함수이기에, 배열 선언을 하지 않아도 된다는 점입니다.] 픽셀에 접근할..

Processing :: 프로세싱 배우기기초예제5 - 배열예제 ① 수평라인모션 수평 라인 모션 만들기 배열의 기초적인 예제로 '배열'에 대해서 살펴보려고 합니다.오늘 만들어볼 수평라인모션의 모습은 이렇습니다. float y; void setup() { size(200, 200); smooth(); frameRate(5); } 예제의 기본적인 설정은 이렇습니다. * frameRate()함수 : 초당 연산할 프레임 수 설정: 5로 설정하여 애니메이션이 잘 보이도록 해줍니다. void draw() { background(255); line(0, y, width, y); y = y + 10; } *background()가 draw()함수에 있을경우 매번 새롭게 배경을 그리기때문에, 1개의 선만 보이게 됩니다.(..