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

▶프로세싱 활용노트⑤ :: rectMode()이번에 살펴볼 것은 rect()함수와 관련 된 rectMode()이다. 이름 그대로 사각형을 그리는 방법을 설정하는 함수라고 할 수 있는데, 간단하지만 분명하게 짚고넘어가야 할 부분이 있어서 정리해보려고 했다. rectMode()별 차이를 알아보기위한 간단한 예제코드주석처리한부분을 하나씩 해제하면서 실행보는 것을 추천한다. 더 좋은 방법은 직접 타이핑하고, 값을 조절하면서 결과를 확인하는 것이다. 그러나 직접 타이핑하기가 번거롭다면, 아래에 첨부해놓은 메모장파일을 프로세싱에 집어넣어 실행버튼만 눌러보자. rectMode(CORNER)와 rectMode(CORNERS)의 차이이 둘 사이의 차이는 분명하게 기억해두어야 한다. 기본적으로 rectMode()관련 함수..

▶프로세싱 활용노트④ :: 시간관련 함수들 - time, day, hour 등이번글에서는 프로세싱의 함수 중에서 시간과 관련된 함수에 대해서 살펴보려고 한다. 시간 관련함수 "들"이라고 적어놨지만, 우리가 이미 알고있듯이 기본적으로 시간은 '년, 월, 일, 시, 분, 초", 그리고 조금 더 세부적으로 들어가 "밀리세컨드"라고 불리는 천분의 일초까지만 사용한다. (여기서 살펴볼 함수는 그리 많지 않다는 것이다.) 프로세싱에서제공하고 있는 시간관련 함수종류day()hour()millis()minute()month()second()year()종류는 위와 같으며, 각각의 함수들은 심플하게 자신의 이름에 걸맞는 값들만 반환한다. day() 작업을 처리하는 컴퓨터의 시계를 기준으로 하며, 1부터 31까지의 값을 반..

▶함께배우는 프로세싱 :: KEY의 활용이번글에서는 프로세싱에서 KEY를 활용하는 방법에 대해 살펴보려고 한다. 프로세싱에서는 사용자의 key입력신호를 바탕으로 시각화하는데 사용할 수 있도록, 여러가지 관련함수를 제공하고 있다. 프로세싱 시각화 콘텐츠에서 key값은 여러가지 용도로 사용된다. 1. 시각화결과물에 사용자가 탐색을 할 수 있도록 하는 경우2. 콘텐츠 제작중에 제작자가 여러가지 형태나, 범위를 보고자 할 경우 1번의 경우는 최종적인 결과물에 사용자가 조작가능하도록 key 기능을 포함시키는 것이다. 예를들어 키보드 화살표 '↑↓→←'를 통해 전체적인 구조를 살펴볼 수 있도록 하거나, 특정 키 값('+', '-'등)을 직접 지정하여 줌인아웃하는 경우등이 있다. 다른 글에서 살펴봤던 kepler시각..

▶함께 배우는 프로세싱 :: Processing - bezierVertex이번 글에서 살펴볼 내용은 프로세싱으 도형관련 함수 중 bezierVertex()이다. 이 bezierVertex()는 인자로 앵커포인트와 제어점, 시작점등의 인자를 포함하고 있어야 한다는 점에서 다른 도형함수들보다 활용하기 어려운 함수로 꼽힌다. rect()등의 기본함수의 경우 굳이더 설명할 필요가 없겠지만, bezierVertex()함수라면, 꼼꼼하게 정리해둘 필요가 있겠다는 생각이 들었다. bezierVertex()vertex Bezier 곡선 좌표를 지정한다.이 bezierVertex()를 호출 할 때마다 선 또는 모양에 새로운 선분을 추가하는데 추가되는 내용은 다음과 같다. bezierVertex()함수를 호출 할 때 추가..

▶함께배우는 프로세싱 :: Kepler2012 이번글에서는 프로세싱을 이용하여 데이터시각화를 제작한 예인 "kepler2012"코드를 하나 하나 뜯어보고자한다. kepler2012 시각화소개데이터시각화 전문가 Jer Thorp이 미 항공우주국(NASA)의 케플러 프로젝트의 일환으로 제작한 것이다. 제작자는 2012년에 Kepler2012라는 이름으로 1,236개에 달하는 행성데이터를 바탕으로 인터랙티브한 시각화를 제작하였으며, 부지런(?)하게도, 이후 1,091개의 행성을 업데이트했다. 이번예제에서 다룰 것은 "kepelr2012"로, 2012년 버전이다. 제작자의 Github주소 : http://github.com/blprnt/Kepler-Visualization 위의 url에서 전체 코드를 다운로드받..

▶함께배우는 프로세싱 :: generative design M6.1 Spring 이번 글에서는 generative design에서 제공하고있는 예제 중 각 노드를 spring으로 연결하는 예제를 살펴보고자 한다. 이 예제를 통해 확인할 수 있는 결과는 아래의 영상과 같다. SPRINGS AS CONNECTIONS. 연결된 노드들을 연결하는 것은 "Force directed layout'에서 두 번째로 중요한 요소이다.이러한 연결들(connections)은 일정 길이를 초과하지않도록 스스로 제한 하도록 해야한다. 스프링(SPINRG)의 개념은 이러한 목적을 위해 일반적으로 사용되는 방법중 하나이다. 알고리즘 위에서 설명한 이유로, 스프링의 알고리즘은 멀리떨어져 있다면 각각의 대상이 서로를 향해 이동하도록 ..

▶함께배우는 프로세싱 :: generative design P.2.2.3 Shape from agents 이번 글에서는 generative design에서 제공하고있는 예제를 살펴보려고합니다. 마우스를 클릭하면 그 지점을 기준으로 새롭게 agent들의 위치가 설정됩니다. (클릭위치에 도형생성) 이렇게 설정된 위치에 curveVertex()로 꼭짓점을그리게 되고, 각 꼭짓점은 유연한 곡선으로 이어지며 형태를 이룹니다. // 기본 세팅 부분int formResolution = 15; // 출력형태 해상도설정float[] x = new float[formResolution]; // formResolution에서 설정한 수 만큼 배열 생성float[] y = new float[formResolution]; //..

▶프로세싱 활용노트 ③ - loadStrings(), arrayList() loadStrings()활용하기loadStrings()의 문법, 기능 및 활용, 예시 순으로 살펴보려고합니다. loadStrings()의 SyntaxloadStrings()의 Syntax는 크게 두 가지로 나눌 수 있다. loadStrings(filename);loadStrings(reader); loadStrings()의 기능 및 활용loadString()는 파일의 내용을 읽어 들여 '문자열 배열'형식으로 리턴합니다. loadStrings(파일이름)형태와 같이 파일이름이 파라미터로 사용하고자 할 경우에는 작업 진행이전에 현재 작업중인 Processing파일의 sketch폴더 내에 위치한 'data'폴더 내에 불러오고자하는 데이터..

▶프로세싱활용노트② ambientLight(), directionalLight() 이번 글에서 살펴볼것은 프로세싱의 함수중에서 조명(light)관련 내용입니다. 이번 글은 레퍼런스와 샘플코드, 그리고 결과이미지를 정리하는 단순히 정리하는 정도에 그치기보다, 실제 프로세싱에서 조명기능을 활용하는데 필요한 가~~장기초적인 개념부분도 포함하고자 했습니다. ambientLight() - 주변광 ambientLight()함수를 이야기하기전, 이 용어의 사전적 의미를 먼저 살펴보려고합니다. 'ambient'라는 단어는 '주위의, 잔잔한'이라는 뜻을 가지고 있으며, 이 ambient와 Light의 합성어인 ambientLight는 국어사전에는 나와있지않지만 '주변광'으로 용어를 이해할 수 있을 것 같습니다. 주변광이..

▶함께배우는 프로세싱 ::Complex modules in a grid 이번 글에서는 generative design에서 제공하고있는 예제를 살펴보려고합니다. 이번 예제는 Complex modules in a grid이며 마우스 움직임에 따라 그리드형태로 이루어진 shape의 모습이 바뀌게 되는 구조입니다. P.2.1.3 Complex modules in a grid의 특징은 그리드 구조가 for구문의 중첩으로 형성되는데 이거 그 안에서도 또한 번 for구문을 활용하여 특정모양을 중첩시킨다는 것입니다. 예제의 결과는 이렇게 for()구문의 중첩을 활용한 그리드의 형태로 나타나게 됩니다. 그리드 내의 타일 크기는 화면의 너비와 미리 설정하는 전체타일 개수에 의해 설정됩니다. 처음에는 한개의 원이 그리드형태..