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

​ ▶프로세싱 에러해결 ① You might be missing a library. 이번 살펴볼 것은 프로세싱에러 중에서도 '라이브러리설치'와 관련된 에러입니다. 이 에러가 발생한 경우,다음과 같은 형태의 에러메시지를 보게 됩니다. The packages [설치하고자 하는 라이브러리이름] does not exist. You might be missing a library. No library found for [설치하고자 하는 라이브러리 이름]. core.(상황에 따라 다를 수 있음) Libraries must be installed in a folder named "libraries" inside the 'sketchbook'folder. 또한 프로세싱 하단부에 있는 콘솔창에도 에러메시지가 뜨게되는 되..

▶프로세싱활용노트① - 나머지연산(모듈로, modulo) 이해하기 이번 글에서는 나머지연산(모듈로, modulo)에 대해서 정리해보려고 합니다. 나머지연산은 계수 연산자(modulus operator)에 관련된 내용이기때문에 프로세싱에서의 계수연산자에 대해 간략하게 살펴보고 시작하겠습니다. 계수는 특정 구간(스크린상의 도형, 배열 범위 안의 인덱스 값 등) 안에 수를 머물도록 하는 대단히 유용하면서 매우 단순한 개념으로, 나누기를 처음 배울 때 그 명칭을 칭하지 않고 개념을 배우는 것과 같다. 계수 연산자는 한 수를 다른 수로 나누었을 때 그 나머지를 계산하며, 정수와 실수에서 모두 사용할 수 있다. 여기서 간단한 나눗셈 개념이 적용됩니다.(매우간단합니다.) 20을 6으로 나머지 연산하면 몫은 2이며 식..

▶함께배우는 프로세싱 :: 프로세싱에서 데이터활용하기① - Table() 이번 글에서는 Unfolding Maps 에서 제공하고 있는 기본 예제를 통해 데이터로드방법에 대해서 살펴보려고 합니다. 이 예제에서 사용하고 있는 방법은 Table()함수와 for()구문을 이용하는 것으로서, 이를통해 지도위에 마커(marker)를 표시하는것을 목적으로하는 예제입니다. // Load CSV data Table bikeDataCSV = loadTable(bikeDataFile, "header, csv"); 데이터를 로드하는 부분입니다. 데이터로드는 loadTable()함수를 사용하며, header(제목 유무), csv(형식)을 괄호안에 적어줍니다. for (TableRow bikeStationRow : bikeDat..

▶함께배우는 프로세싱 :: generative design P.2.1 Alignment in a grid. 이번 글에서는 generative design에서 제공하고있는 예제중 'Alignment in a grid'를 살펴보려고합니다. int tilecount = 20; int actStrokeCap = ROUND; // 선의 끝부분을 둥글둥글하게 설정합니다. * strokeCap() 선의끝부분을 어떻게 처리할지 설정하는 기능입니다. ROUND, SQUARE, PROJECT 이렇게 세 가지 종류가 있습니다. [Processing.org > reference > strokeCap 바로가기] [사진 : Processing.org ] 이번에제에서 strokeCap의 설정을 바꾸는것으로 아래사진과 같은 변화를 ..

▶함께배우는 프로세싱 :: generative design P.1 Color 이번 글에서는 generative design에서 제공하고있는 예제를 살펴보려고합니다. P.1..0 Hello, color 참고사항 : noCursor, mouseX, mouseY, colorMode 사용자가 마우스포지션 값(x,y)를 이용하여 도형의 크기와 배경 및 도형의 색상을 변화시킬 수 있는 예제이다. 우리는 색상인식을 할때, 인접 컬러 및 배경 색상의 변화비율에 의해 영향을 받는다 void setup(){size(displayWidth/2, displayHeight/2);noCursor();} void draw(){... colorMode(HSB, 360, 100, 100);rectMode(CENTER);noStroke..

▶Processing :: 프로세싱의 오디오기능 - Minim라이브러리 이번에 살펴볼 것은 프로세싱에서의 오디오기능입니다. 어려운것은 아니고 가장 기초적인것인데, 어떤 메커니즘인지 정리해둘 필요가 있을 것 같았습니다. 먼저 이번 예제에서 사용할 audio샘플을 함께 첨부하겠습니다. 따르르릉하고 짧게 울리는 벨소리이며 wav형식이며, 프로세싱작업 파일 내 data폴더에 넣어두시면 됩니다. 프로세싱 실행후 가장 먼저, 이번예제에서 적용해볼 Minim라이브러리를 로드해줍니다. 그다음으로 살펴볼 것은 setup부분입니다. 뒤에서 볼 수 있겠지만, bell클래스는 bell(x, y, r, filename)의 형태로 이루어져있습니다.따라서 이번 예제에서 벨은 화면 중심에서(width/2, height/2) 반지름이..

▶함께배우는 프로세싱 :: 위치데이터로 원그리기 ① 이번 포스팅에서는 VisualizingData - chapter 3: mapping부분에 대해서 정리해보았습니다. - table class- location파일의 의미 red dot예제의 결과모습입니다.미국 각 주의 위치에 원이 그려져있는 모습입니다. 여기서는 '어떻게 각 주의 위치에 그렸는지'가 중요합니다. 프로세싱에서 원을그리기가 아무리 쉽다고 하지만, 일일이 모든 좌표를 입력하기에는 무리가 있습니다. ellipse(470, 300, 9, 9);ellipse(302, 200, 9, 9);ellipse(410, 202, 9, 9).........이건 무리! 저자는 tsv형식의 'locaion'이라는 파일에서 정보를 불러왔습니다. 예제폴더내의 'data..

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

▶ 함께배우는 프로세싱 :: 데이터스트링 : 서버 만들기 - 서버의 작동확인 서버의 작동 확인 방법은 '텔넷(telnet)'을 이용합니다.텔넷: 컴퓨터에 내장되어있는 가장 일반적인 프로토콜로서 네트워크 연결을 조정하고 확인합니다. 매킨토시에서는 터미널, 윈도우에서는 명령 프롬프트를 실행합니다.다니엘 쉐프만은 책에서 PuTTY를 사용할 것을 추천합니다.(저 또한 PuTTY를 이용하여 진행했습니다.) PuTTY 다운로드 [다운로드페이지 링크] 설치를 마치셨다면, 서버와 연결해봅니다.우선 우리가 현재 서버가 위치한 컴퓨터에서 접속을 시도하는 중이기 때문에텔넷은 '로컬 호스트'에 연결됩니다. 따라서, 로컬호스트의 포트번호 입력란에서버를 만들 때 사용했던 '5204'를 입력해줍니다. 또한, 컴퓨터 내에서 다른 프..

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