시각화 134

▶함께공부하는 프로세싱 기초 - rotate 예제

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

▶함께공부하는 프로세싱 기초 - PVector Ⅰ

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개의 변수를 ..

함께배우는 프로세싱 :: #1 str() 눈에보이는 그대로!

str()눈에 보이는 그대로 문자열로 돌려주는 함수.정수도 str()을 이용하면, 문자열 형태로 받아 이용할 수 있습니다. 정수형태의 a와b와 함께, 차이점을 확인해보기 위하여문자열형태의 c함수도 함께 추가해 두었습니다. 정수형태의 a와 b를 더한 결과는 10이지만,b와 c의 더한 결과는 73입니다. 이는 str()의 기능의 영향입니다.

▶함께배우는 프로세싱 :: ControlP5 라이브러리#1 ControlP5라이브러리 : controlFont.

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

▶ 함께배우는 프로세싱 : 기초예제 - 폰트

▶ 함께배우는 프로세싱 : 기초예제 폰트 CreateFont Create Font 폰트를 생성하는 부분입니다.프로세싱 실행 후 [Tools] - [Create Font...]를 클릭해줍니다. Create Font 목록에는 컴퓨터에 설치되어있는 폰트목록이 나옵니다.만들고 싶은 폰트를 선택한 후, [OK]버튼을 누르면 됩니다. *참고로 Filename을 위의 사진처럼 본래명칭을 사용해도되지만길다고 생각되신다면 임의로 줄여서 만드셔도 됩니다. PFont : 폰트 클래스예) Pfont exfont; loadFont : 폰트파일을 불러오는 함수예) exfont = loadFont("SeoulHangangM-48.vlw"); text() : 텍스트를 출력(위치 등 지정)예) text(exfont, width/2, ..

▶함께배우는 프로세싱 :: Processing.js 설치 및 시작하기

▶Processing.js tutorial #1 설치 및 시작하기 Processing.js 이란?Processing.js는 자바스크립트로 작성된 라이브러리이며,프로세싱 코드가 HTML5를 지원하는 브라우저에서별도의 플러그인 없이 수행될 수 있도록 하는 기능을합니다. 프로세싱으로 작성한 코드를 HTML의 canvas기능을 사용하여자동으로 자바스크립트로 변환해줍니다. *html의 canvas기능은 대부분의 웹브라우저에서 지원 [Processing java script 의 설치과정] 프로세싱 실행화면에서우측 상단에 [Java]를 클릭한 후 [Java Script]를 눌러주면javaScript모드로 설정이 변경되게 됩니다. [JavaScript]가 없다면?[Add Mode..]를 클릭하신 후새로 열리는 창에서 ..

▶함께배우는 프로세싱 : 대한민국 와이파이 지도 만들기

▶함께배우는 프로세싱 : 대한민국 와이파이 지도 만들기 안녕하세요 오늘은 프로세싱을 활용하여 '대한민국 와이파이지도'를 만드는 과정에대해서 살펴보려고합니다. 완성된 동영상을 먼저 확인해보겠습니다. [프로세싱으로 만든 우리나라 와이파이지도] 흰배경에 다른색상으로 표시할 수도 있었지만 개인적으로는 검은색배경에 흰색으로 표시하는것이 가장 보기에 편한 것 같았습니다. 사용한 데이터는 공공데이터포털에서 얻었습니다. 미래창조과학부에서 공개한 이 데이터에는 각 와이파이의 위치정보, 지역명, 용도 등 다양한 정보가 정리되어있습니다. 공공데이터포털에서 'WIFI DB'를 검색하시면 다운로드받으실 수 있습니다^^ 다운로드 받은 파일을 열어보시면 총 288,762개의 와이파이에 대한 정보가 들어있습니다. 이 중에서 위 사진..