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

▶함께공부하는 프로세싱 기초 - rotateXYZ이번포스팅에서는 프로세싱 OPENGL모드에서rotateXYZ별로 결과물이 어떻게 다르게 나오는지직접 실행해보고, 결과 사진을 모아보았습니다. rotateX rotateY rotateZ rotateXY rotateXZ rotateYX rotateYZ rotateZX rotateZY

PVector여러가지 기능 중, PVector에 대해 살펴보려고합니다.PVector는 벡터(x, y for 2D, and x, ,y, z for 3D)의 구성요소를 저장합니다.크기와 방향은 mag()와 heading()을 통해 액세스할 수 있습니다. 프로세싱 예제 속 PVector많은 경우에,PVector는 위치 또는 속도, 가속도등을 표현하는데 사용되고 있습니다.예를 들어, 스크린을 가로질러가는 사각형을 구현해야하는 경우 위치, 속도, 가속도등은 전체 영역에 적용되고 있기때문에단순히 전체영역의 속도를 조절하는 것 만으로는 어려움이 있습니다.이런 방법 대신, PVector class내부에서 적용해볼 수 있습니다. PVector - set() v.set(vvv)float[] vvv 배열에서 3개의 변수를 ..

str()눈에 보이는 그대로 문자열로 돌려주는 함수.정수도 str()을 이용하면, 문자열 형태로 받아 이용할 수 있습니다. 정수형태의 a와b와 함께, 차이점을 확인해보기 위하여문자열형태의 c함수도 함께 추가해 두었습니다. 정수형태의 a와 b를 더한 결과는 10이지만,b와 c의 더한 결과는 73입니다. 이는 str()의 기능의 영향입니다.

함께배우는 프로세싱 :: ControlP5 라이브러리#1 ControlP5라이브러리 : controlFont. * by andreas schlegel, 2012 ▶ 이번에 함께 살펴보려고하는 것은프로세싱 'ControlP5'라이브러리 입니다. import controlP5.*; 라이브러리를 설치하셨다면,프로세싱에서 controlP5라이브러리를 불러옵니다. ControlP5 cp5;controlP5.Button b; int buttonValue = 1;boolean isOpen;int myColorBackground = color(0,0,0); cp5라는 이름으로 ControlP5를 활용할 것입니다.boolean isOpen은 슬라이드가 열릴지, 닫힐지를 설정하게 됩니다. 전체 내용이 길지 않기때문에쭉~한..

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

▶Processing.js tutorial #1 설치 및 시작하기 Processing.js 이란?Processing.js는 자바스크립트로 작성된 라이브러리이며,프로세싱 코드가 HTML5를 지원하는 브라우저에서별도의 플러그인 없이 수행될 수 있도록 하는 기능을합니다. 프로세싱으로 작성한 코드를 HTML의 canvas기능을 사용하여자동으로 자바스크립트로 변환해줍니다. *html의 canvas기능은 대부분의 웹브라우저에서 지원 [Processing java script 의 설치과정] 프로세싱 실행화면에서우측 상단에 [Java]를 클릭한 후 [Java Script]를 눌러주면javaScript모드로 설정이 변경되게 됩니다. [JavaScript]가 없다면?[Add Mode..]를 클릭하신 후새로 열리는 창에서 ..

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