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

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..

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 등이 눈에 띕니다. 프로세싱을 다운로드하는 방법에 대해서 살펴보겠습니..