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

Processing :: Processing.js의 시작html파일에서 프로세싱 적용하기 오늘 살펴보고자 하는 것은Processing.js입니다^^ 먼저 어떤 예제인지 영상을 통해확인해보세요~ Processing.js란? Processing.js는 데이터시각화, 인터랙티브 애니메이션,미디어아트, 인포그래픽, 비디오게임 등 다양한 작업을웹 표준의 작업환경에서 구현할 수 있도록 해줍니다. 중요한점은 Processing의 언어 그대로 특별한 플러그인 없이 구현이 가능하다는 점입니다^^ Processing의 결과물을 오프라인에서만활용하는것이 아니라, 웹표준 환경에서 직접구현할 수 있도록 해주는 것입니다. [ Processing.js 메인 페이지의 모습 ] 프로세싱js는 프로세싱과는 별개로Processing.js..

함께배우는 프로세싱기본예제 :: 프로세싱에 이미지 추가하기 이번에 살펴볼 기본예제는프로세싱에 이미지 추가하는 방법입니다. 전체적인 과정을3단계로 나누어 볼 수 있습니다. ① 스케치의 data폴더에 이미지 추가② 이미지를 저장할 수 있도록 PImage 유형의 변수 생성③loadImage() 함수로 변수에 로드 그러면 시작해볼까요? ① 스케치의 data폴더에 이미지 추가 프로세싱을 실행하신 후Sektch > Add File...메뉴를 클릭합니다. 클릭하면 이와같은 창이 뜨게 되는데요여기서 원하는 사진을 추가해주시면 됩니다. 자 그럼 두 번째 단계로 넘어가 볼까요?두번 째 단계는 PImage 유형의 변수를 생성하는 것입니다. ② 이미지를 저장할 수 있도록 PImage 유형의 변수 생성 PImage img; /..

R로하는 데이터시각화 -데이터멍잉 응용전통시장과 대형마트의 육류 가격차이를 살펴보기 지난 포스팅에서 데이터멍잉[data munging]에 대해살펴보고 기본적인 예제를 살펴보았었는데요~ [ 데이터멍잉의 시작 - tapply, by, aggregate 바로가기 ] 이번 포스팅에서는 기본예제에서 알아본함수들을 활용하여 전통시장과 대형마트의 육류가격 차이를 직접 구해보고자 합니다.^^ market_price

​ R로하는 데이터시각화 :: 데이터멍잉 - tapply, aggregate, by R을 활용하여 데이터시각화를 하면서 꼭 필요한 부분이 바로 ‘데이터 멍잉＇입니다. 데이터 멍잉[data munging]이 무엇인지 알아보야야 하는데요~ 멍잉[munging] : 전처리, 파싱, 필터링과 같이 데이터를 이리저리 핸들링하는 것 즉, 데이터 멍잉이란 목적에 맞게 데이터를 여러가지 방법으로 다듬는 과정이라고 생각할 수 있겠습니다^^ 오늘은 이런 데이터멍잉의 방법으로 tapply, by, aggregate 함수를 적용해보려고 합니다. ** 이번예제는 R로하는데이터시각화의 예제를 바탕으로 진행됨을 알려드립니다. ** 저 역시 R을 공부하기 전까지는 일일이 엑셀을 이용하여 데이터를 이리저리 바꾸곤 했었습니다. (물론 ..

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

R로 만드는 시각화 :: 기본예제 2R의 반복구문 3가지 첫 번째 반복구문 형태 repeat의 형태를 예제를 통해서살펴보도록 하겠습니다. ## repeat > a repeat{ if(a>110) break else { print(a); a a while(a for(i in seq(from = 100, to = 110, by = 2)) { print(i) } 첫 번째 코드의 결과부터 살펴보겠습니다. 두 번째 홀수를 구하는 구문의결과는 아래사진과 같습니다. 이처럼 for구문으로는 보다 간결하게다양한 기능을 이용할 수 있습니다.^^

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 의 결과를 얻을 수 있습니다. 여기서 함게 알아두시면 좋은 것은앞으로 자..

apply() apply()로 데이터를 다루는 내용 > d d [,1] [,2] [,3] [1,] 1 4 7 [2,] 2 5 8 [3,] 3 6 9 > apply(d, 1, sum) [1] 12 15 18 > apply(d, 2, sum) [1] 6 15 24 > apply(iris[,1:4], 1, sum) [1] 10.2 9.5 9.4 9.4 10.2 11.4 9.7 10.1 8.9 9.6 10.8 10.0 9.3 8.5 11.2 12.0 11.0 10.3 11.5 10.7 10.7 10.7 9.4 10.6 [25] 10.3 9.8 10.4 10.4 10.2 9.7 9.7 10.7 10.9 11.3 9.7 9.6 10.5 10.0 8.9 10.2 10.1 8.4 9.1 10.7 11.2 9.5 10...

//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; } }