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

프로세싱배우기 : 기초예제함수에 대한 이해 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의 전체적인 구조를 살펴보겠습니다^^ 위 사진과 같이 랜덤으로..

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

Processing :: 프로세싱배우기기초예제2 - 키보드에 반응하는 도형만들기 오늘 소개하고자하는 것은키보드에 반응하는 도형을 만드는 과정입니다. 어떤 결과가 나오는지미리 영상을 통해서 확인해보세요 네 이렇게 키보드를 이용하여angle과 zoom을 조절할 수 있고,spacebar를 누르면 본래 위치로 돌아오게 되는 기능입니다. **이번 예제는 의 예제를 바탕으로작성한 것입니다.** int d = 40; float xo; float yo; float zoom = 1; float angle = 0; void setup() { size(600, 200); // xo, yo는 센터값을 줍니다. xo = width/2; yo = height/2; smooth(); noStroke(); } void draw() ..

size(900, 300); background(104); ellipse(width/2, height/2, 200, 200); // width값의 2분의 1지점, height값의 2분의 1지점 설정함으로써 센터에 설정하기 noStroke();

함께배우는 프로세싱 :: 데이터 형식 변환하기Processing에서의 float 과 int 프로세싱에는 다양한 데이터 형식이 있는데요~오늘은 그 중에서도 float과 int에 대한 내용을 소개하고자합니다. int a = 10; // int a에 10의 값을 부여하기 float b = (float)a; // float b가 int a의 값을 받기 (1) float c = float(a); // 다른 방법으로 float c가 int a의 값을 받기 (2) print(b + "\n" + c); //b와 c를 프린트하기 - "\n"을 넣어준 것은 b를 프린트 후, c를 프린트하기 위한 것입니다. #####이렇게 프린트해보면 10.010.0 의 결과를 얻을 수 있습니다. 여기서 함게 알아두시면 좋은 것은앞으로 자..

//motion - linear 수평선 모션 float a; void setup() { size(640, 360); stroke(255); a = height/2; //높이의 2분의 1지점 : 중간 } void draw() { background(51); line(0, a, width, a); // line을 만들기위한 조건 (x1, y1, x2, y2) a = a - 0.5; // - 값을 수정하면 수평선이 올라가는 속도를 조절할 수 있다. if (a < 0) { a = height; } }

Processing :: 프로세싱 배우기#2 api의 xml 데이터 수집하기 오늘 소개하고자하는 것은프로세싱에서 api의 xml데이터를 수집하는 것입니다. 이번 포스팅에서는서울시 공공데이터포털 사이트의 api를 이용하여정보를 호출한 뒤, 호출된 xml을 프로세싱에서 불러오는 과정을 소개합니다. 1. api로 데이터 호출하기 순서는 이렇게 진행됩니다.서울열린데이터광장 - api받기 - api로 데이터호출 [api 사용방법 게시글 바로가기] 2. 호출한 데이터 살펴보기 [api로 받아온 xml의 모습] 받아온 데이터를 살펴볼까요? 얻고자하는 위, 경도 데이터는태그안의 ,태그 속에 있습니다.이를 잘 기억하고, 프로세싱을 실행해줍니다^^ 3. 프로세싱에서 필요한 데이터만 가져오기 XML xml;xml = loa..

Processing :: 함께배우는 프로세싱랜던한 움직임 지난 포스팅에서 움직임과 뱡항에 대하여 알아보았는데요이번포스팅에서는 [랜덤한 움직임]을 살펴보겠습니다. 랜덤한 움직임을 만들기 전포인트를 하나 정리하고 가겠습니다~ **랜덤 값 생성하기random()함수는 항상 소수점이 있는 값을 반환> = 왼쪽의 변수유형은 float이어야 한다는 점! 이 같은 내용을 아래의 코드에서 확인해볼까요? void draw() {float r = random(o, mouseX);printIn(r);}위에서 설명한대로 random()함수 왼편에는flaot함수가 있습니다. 자, 그럼 본격적으로랜덤한 움직임을 표현하는 과정을살펴보겠습니다!^^ void setup() {size(240, 120);smooth();} void dr..