top drop menu

Recent Post

금요일, 11월 4

프로세싱(2) - 마우스로 그림 그리기

앞에서 도형 그리는 것을 배웠다. 이제 이벤트와 그리기를 조합해 보자. 이벤트는 마우스의 동작을 이용했다. 마우스이 다양한 이벤트를 프로세싱에서는 미리 함수로 정의해 놓은것 같다. 그냥 해당 함수를 추가하고 원하는 동작을 적어 주면 된다. 클릭했을때, 마우스가 움직일때, 드래그 했을때, 마우스 좌표등을 모두 활용할 수 있다.

int i = 0; void setup(){ size(600, 400); } void draw(){ //if(mousePressed){ // ++i; // println(i); //} } //마우스 클릭시 한번반 실행됨 void mousePressed(){ println("mouse Pressed"); if (mouseButton == LEFT) { println("Left mouse"); } else if (mouseButton == CENTER) { println("Mouse Center"); } else if (mouseButton == RIGHT) { println("Mouse Right"); } } void mouseClicked(){ //println("Mouse Clicked"); fill(random(255), random(255), random(255)); } void mouseMoved(){ //println("Mouve moved"); //ellipse(mouseX, mouseY, 50, 50); } void mouseDragged(){ //println("mouse dragg"); ellipse(mouseX, mouseY, random(30), random(50)); }




프로세싱(1) - 설치와 간단한 예제

아두이노로 MPU-6050을 해보다가 이것의 움직임을 시각화 하는 도구로 프로세싱(Processing)이 있다는 것을 알게 되었다. 프로세싱은 학생, 예술가, 디자이너가 쉽게 접근할 수 있도록 배려된 오픈 소스 프로그래밍 언어이다. 그리기와 상호 작용을 프로그램하여 표현하고 싶은 사람들을 위해 개발된 것이다. 잠깐 살펴 보니 흥미롭다. 프로세싱은 초보자나 미디어 아티스트들이 쉽게 사용할 수 있도록 만들어진 언어라고 한다. 아두이노와 관련해서 생각해 보면 아두이노의 다양한 센서값에서 얻은 값들을 시각화해서 보여 줄 수 있다는 것이다. 눈으로 보는게 최고지...아믄~나중에 아두이노와 접목해서 뭘 할 수 있는지 기대해 보자. ^^ 

https://processing.org/download/?processing

위 사이트에서 OS에 맞게 다운로드하고 압축을 풀자. 설치 없이 그냥 실행할 수 있다. 자바스크립트, 파이썬, 안드로이드에 까지 뭔가 할 수 있는것 같다. 나중에 차차 알아 보기로 하자.



프로그래밍을 위한 IDE는 아두이노와 비슷하게 생겼다. 심플하다.기본적으로 문법 구조가 setup()과 draw()로 시작하는 것 같다(?). 아두이노에서 setup()과 loop()가 있듯이. 암튼 간단한 그림 그리기를 해보자.

void setup() { //background size (600, 400); background(123,34,56); //point and line strokeWeight(10); //점의 두께 stroke(34,125,45); //선의 칼라, 투명도로 지정 가능 point(300,200); stroke(12,33,90); line(50, 50, 200, 200); //circle strokeWeight(4); fill(190,67,23, 150); ellipse(200,240, 200, 100); noFill(); ellipse(300,300, 300,300); noStroke(); fill(88,133,44); ellipse(500,200, 100,100); //box fill(23,66,99); rect(150, 30, 100,100); //text fill(255); textSize(19); text("Hello World", 400, 50); //원하는 글꼴 지정하고 폰트 출력 PFont font = createFont("NanumGothic", 32); textFont(font); text("안녕하세요.", 400,100); //이미지 그리기 PImage img = loadImage("image.jpg"); image(img, 300, 200, 240, 180); } void draw() { }




일요일, 10월 16

Blogger 내용 상단에 해당 라벨의 글목록 보여주는 방법

* 안내 
이 방법에는 문제가 있다. pageno를 잘못 가져 오고 있다. 다른 소스를 찾아서 수정하도록 하자. 


블로거를 사용하다 보면 해당글의 본문이 바로 바로 나와서 다른 글을 보고 싶을때 빠르게 선택하기가 상당히 불편하다. 이 사람들은 이게 안 불편한가? 기본적으로 기능을 넣어 놔야지 설정에는 없는것 같다. 가젯을 추가해서 표현해야 한다고 한다.

그림 처럼 목록이 나오도록 가젯을 추가해 보기로 하자. 
관리자모드에서 [레이아웃]을 선택하자.



화면을 조금 내려서 우측에 [가젯추가]하기가 있다. 클릭하면 새창이 열린다.


기본 가젯 중에서 [HTML/JavaScript]를 선택한다.

제목을 적어 주고 내용에는 아래 링크에 있는 능력자가 만든 소스를 몽땅 복사해서 넣어 준다. 

http://creatorhong.blogspot.kr/2012/02/blogger-label-posts-list.html

그리고 소스의 하단에 보면 블로거의 주소를 적는 부분이 있다. 자신의 블로거 주소를 / 없이 적어 주고 목록의 갯수도 적어 준다. 5개면 적당하니 그대로 둬도 된다. 주소만 정확히 바꾸어 주기로 한다. 

마지막으로 추가한 가젯을 표시하고 싶은 위치로 옮겨 놓고 저장하면 된다. 본문 보기의 상단에 옮겨 놓고 저장한다. 
Blogger Widget