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

▶프로세싱 연습노트 :: 2014 상반기 낙뢰지점 시각화이번에는 한국전력공사(KEPCO)에서 제공하는 자료를 바탕으로, 2014년 상반기 낙뢰지점을 시각화해 보았습니다. 언뜻, 일기예보에서 봤던 것 같은 느낌이 드는데요, 하얀색 마커는 낙뢰지점을 의미합니다. 정지화면으로 시각화 했을 경우에는 낙뢰지점의 분포를 제외하고 특별한 점을 보기는 어려웠습니다. 그런데 시간순서로 마커를 표시해보았더니 재미있는 점이 눈에 띄었습니다. 함께 올려드리는 영상을 잘 보시면 번개를 뿌리는 '뇌운'이 특정경로를 따라 이동하면서 뿌리는 모습까지 시각화에 나타납니다. 또한 광범위하게 일어나기도하고, 한 지역에 집중되서 일어나기도 합합니다.

▶프로세싱 연습노트 :: 주소를 좌표값으로 변환 후 시각화하기이번 포스팅에서 다룰 내용은 주소를 좌표값으로 변환후 시각화하는 것입니다. 그동안 정리되어있는 좌표데이터만 찾아다니다가, 아무래도 한계가 있는 것 같아 직접 좌표로 변환 후 시각화해보기로 생각했습니다. 진행 순서이번 작업은 아래와 같은 순서로 진행했습니다. ① 주소데이터 파일 다운로드(CSV)② 프로세싱으로 주소데이터 로드 후 API를 이용해 좌표(x, y)로 반환 후 저장③ 반환 된 데이터를 UnfoldingMap 라이브러리로 시각화 사용할 데이터 : 서울시 식품접객업 등록현황사용할만 한 주소데이터를 찾다가 서울시 열린데이터광장에서 '서울시 식품접객업 등록현황'파일을 찾았습니다. 찾고 데이터를 다듬으려고 보니 숙박업(여관업, 일반호텔)의 데이..

▶프로세싱 연습노트 :: Video라이브러리를 활용한 원 생성이번 포스팅에서는 프로세싱의 기본 라이브러리인 Video을 이용하여 만들어 본 과정을 정리하려고 합니다. Video 라이브러리cam라이브러리는 프로세싱의 기본 라이브러리입니다. 지난 포스팅에서 살펴본 UnfoldingMaps라이브러리는 직접 설치해야하는 과정을 거쳐야 했지만, Video라이브러리는 따로 설치없이 바로 사용이 가능합니다. 다만, 캠이 필요합니다^^; 노트북을 사용하시는 분들은 대부분 노트북에 캠이 달려 있으니 문제없이 하실 수 있지만, PC로 작업하시는 분들은 별도로 캠을 구매하셔야겠지요^^; [프로세싱 공식 홈페이지 > 라이브러리 > Video / 바로가기] Video라이브러리를 활용한 원 생성캠으로 찍기만 한다면, 프로세싱을 ..

▶프로세싱 연습노트 :: UnfolidingMap라이브러리를 활용한 와이파이지도이번 포스팅에서는 Unfolding라이브러리를 활용해본 결과물을 정리해보려고합니다. UnfoldingMaps프로세싱이 장점이라면, 이런 라이브러리가 굉장히 다양하고, 어렵지 않게 이해해서 활용할 수 있다는 점이겠지요? 제가 이 라이브러리를 활용하면서 개인적으로 편리하다고 느낀 부분은 위도, 경도 값을 스크린상의 좌표계로 변환해주는 부분이었습니다. [UnfoldingMaps를 이용한 서울의 와이파이 맵.] UnfoldingMaps 페이지 [Unfoldiungmaps.org] Unfoldingmaps페이지로 바로 갈 수 도있고, 프로세싱 공식 홈페이지에서 [라이브러리>Unfoldingmap] 의 순서로 클릭하셔도 위 사진과 같은 ..

▶함께배우는 프로세싱 :: 기본개념 - Byte이번 포스팅에서 함께 살펴보려고 하는 것은 바로 Byte()입니다.기본적인 것이지만, 꼼꼼히 살펴보아야겠다는 생각이 들었고앞으로 종종 조금씩 정리해나가면서 개념들을 연결시켜볼 생각입니다. Byte란? 컴퓨터가 처리하는 정보의 기본단위로, 하나의 문자를 표현하는 단위이다. 8개 혹은 9개의 bit를 묶어서 표현하며, 1개의 하나의 문자를 표현하지만, 한글과 같은 동양권의 문자는 2개의 바이트로 표현된다. 컴퓨터에서 정보의 최소단위는 이진법의 한 자리수로 표현되는 비트(bit)이다. 그러나 비트 하나로는 0 또는 1의 2가지 표현밖에 할 수 없으므로, 일정한 단위로 묶어서 바이트(byte)라고 하고 정보를 표현하는 기본단위로 삼고 있다.자료 : [네이버 지식백과..

▶함께배우는 프로세싱 : Server & Client ① 다중 사용자와의 통신 다중 사용자와 통신, 1부 : 서버 브로드캐스팅은 서버와 클라이언트가 한 방향으로 통신하는 시스템입니다.서버는 데이터를 전송하고, 클라이언트는 받기만하는 수동적 위치에 있습니다.이러한 일 방향의 커뮤니케이션을 넘어 클라이언트와 서버가 서로 커뮤니케이션할 수 있도록하는 것이 다중 사용자와의 통신이라고 할 수 있습니다. 다중사용자 애플리케이션 만들기다중 사용자 애플리케이션 역시 프로세싱의 net 라이브러리를 통해 제작 할 수 있습니다. 예) 한 클라이언트가 마우스를 스크린에서 움직이면 그 x, y좌표값을 다른 클라이언트들에게 보내줍니다.따라서 서버에 연결된 모든 클라이언트들은 각자의 화면에서 그 움직임을 같이 볼 수 있습니다. 특..

▶함께공부하는 프로세싱 기초 - rotate 예제 이번 포스팅에서는 rotate를 활용한 예제를함께 살펴보려고 합니다. 이번 예제는 Nature of code의 예제를 참고하였습니다. angle은 각도입니다.aVelocity는 속도aAcceleration은 가속도입니다. 처음에는 이렇게 기본값으로 설정되어 있지만,draw()안에서 반복되는 과정에서회전하는 aVelocity(속도)가 증가하게됩니다. setup()부분에서는예제결과를 그릴 부분에 대한 설정을 합니다.특별한 부분은 없습니다.^^ draw()부분에서 모든 것이 이루어집니다. translate()를 활용하여 화면의 중심점으로 기준점을 이동하고나서rotate(angle)로 회전을 하게 됩니다. 시작 부분에서는 angle의 값이 0으로 설정되어있었지만..

▶함께공부하는 프로세싱 기초 - 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개의 변수를 ..

함께배우는 프로세싱 :: 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은 슬라이드가 열릴지, 닫힐지를 설정하게 됩니다. 전체 내용이 길지 않기때문에쭉~한..