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

▶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개의 선만 보이게 됩니다.(..

프로세싱배우기 : 기초예제함수에 대한 이해 1오늘 포스팅에서는'함수'에 대해서 꼼꼼하게 살펴보도록하겠습니다.^^ 함수에 대한 내용은프로세싱, 날개를 달다의 내용을 참조하였습니다. 함수를 정의(선언)하기 3부분으로 나누어 볼 수 있습니다.반환값 / 함수이름 / 인자(매개변수) 형태는 아래와 같습니다. 반환값 함수이름(인자) { //함수코드 본체 } 그렇다면 백문이불여일견!실제 예시를 살펴보겠습니다~ 예제 1 void draw() { drawCircle(); } void drawCirlce() { fill(0); ellipse(50, 50, 20, 20); } 관습적으로, 함수는 draw()아래에 위치합니다. 이번에는 인자(매개변수)를 포함한 예시입니다.여기서 drawCircle()은 예제를 위하여 임의로 ..

. ▶ Processing :: 프로세싱 배우기 :: 기초예제 2 - 이미지 불러오기 이번 포스팅에서는 기초 도형에 관하여 살펴보려고 합니다^^. 오늘은 그중에서도ellipse()와 rect()를 알아보겠습니다! [오늘 사용하는 코드] int x = 400; int y = 200; int w = 100; int h = 100; void setup(){ background(20); size(800, 400); smooth(); strokeWeight(3); stroke(255, 255, 0); fill(255); ellipse(x,y,w,h); rect(x,y,w,h); } 간단한 코드로 만들어보았습니다.결과는 아래 사진과 같습니다. [ellipse와 rect생성모습] 그런데, ellipse와 rect는 ..

Processing :: 프로세싱 사례Shaping Cyclone 안녕하세요^^ 오늘은 프로세싱으로 만들 수 있는 다양한콘텐츠 중 하나를 골라 어떤 형태로 이루어져 있는지하나하나 살펴보려고 합니다. 이번 포스팅에서 살펴볼 것은 Sabrina Verhage의 Shaping Cyclones(version1)입니다. 콘텐츠의 모습은 아래 사진과 같습니다. [Sabrina Verhage, Shaping Cyclones(version1)] 사진에 보이는 콘텐츠의 모습과 코드는Openprocessing에서 확인하실 수 있습니다. 바로가기 주소를 여기에 추가해두겠습니다^^ [version 1 주소][version 2 주소] 우선, shaping cylone의 전체적인 구조를 살펴보겠습니다^^ 위 사진과 같이 랜덤으로..

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

함께배우는 프로세싱기본예제 :: 프로세싱에 이미지 추가하기 이번에 살펴볼 기본예제는프로세싱에 이미지 추가하는 방법입니다. 전체적인 과정을3단계로 나누어 볼 수 있습니다. ① 스케치의 data폴더에 이미지 추가② 이미지를 저장할 수 있도록 PImage 유형의 변수 생성③loadImage() 함수로 변수에 로드 그러면 시작해볼까요? ① 스케치의 data폴더에 이미지 추가 프로세싱을 실행하신 후Sektch > Add File...메뉴를 클릭합니다. 클릭하면 이와같은 창이 뜨게 되는데요여기서 원하는 사진을 추가해주시면 됩니다. 자 그럼 두 번째 단계로 넘어가 볼까요?두번 째 단계는 PImage 유형의 변수를 생성하는 것입니다. ② 이미지를 저장할 수 있도록 PImage 유형의 변수 생성 PImage img; /..