돌돌쌤

프로세싱과 아두이노를 연결하여

아두이노에 연결된 자원을 제어해보자

이번엔 간단히 LED으 밝기를 제어해보자.

프로세싱과 아두이노는 Serial 통신으로 연결하고

서로 데이터를 주고 받을 수 있다.

일단 프로세싱에서는 Serial 라이브러리를 활용한다.

프로세싱 스케치

-----------------------------------------------------------------------------

import processing.serial.*;      //Serial 라이브러리 임포트

Serial mport;                    // mport라는 시리얼포트 선언

void setup(){

  size(512,100);

  mport = new Serial(this,Serial.list()[1],9600);   //컴퓨터에 배정된 시리얼포트중 

                                                                    //2번째포트로 9600rate의 포트 사용

}

void draw(){

  background(mouseX/2);    // 마우스 x좌표값에 따른 배경색 변화

  mport.clear();                   // 주석처리해도 무방

  mport.write(mouseX/2);     //선언한 포트로 마우스값 전송

}

------------------------------------------------------------------------------

위 스케치에서

Serial.list()[1]부분은 컴퓨터에서 할당한 포트중에서 두번째 포트를 선택하는 것으로

[0],[1],[2],[3]......순이다.

아두이노에서 확인해보면 아래그림과 같다.

아두이노 스케치

----------------------------------------------------------------------------------------

int pdata = 0;               // 프로세싱에서 받을 데이터 변수 선언

void setup(){

  Serial.begin(9600);    // 시리얼 통신 시작

}

void loop(){

  if(Serial.available()>0){                      // 넘어오는 데이터가 있으면

    pdata = Serial.read();                       // 시리얼에서 오는 데이터 저장

    pdata = map(pdata,0,255,0,250);         // 데이터를 0~255명확한 한계지정

    analogWrite(10,pdata);                      // 아날로그 값으로 표현

  }

}

---------------------------------------------------------------------------------------

작동 영상

프로세싱 배열은

아두이노의 배열 선언과 조금 다르다.

배열 선언 방법은 

-------------------------------

int[] x;                // 배열 선언

x = new int[3];     // 배열 생성

x[0] = 100;

x[1] = 200;

x[2] = 300;

-------------------------------

이다 .

조금 간단히 하면

--------------------------------------------------------------

int[] x = new int[3];              // 배열 선언하고 배열 생성한다.

x[0] = 100;

x[1] = 200;

x[2] = 300;

--------------------------------------------------------------

더 간단히 하면

--------------------------------------------------------------

int[] x = {100,200,300};    //배열을 선언, 생성 하고 값을 할당한다.

--------------------------------------------------------------

아두이노에서는

int x[] = {100,200,300}; 했던 것을

프로세싱에서는 위와 같다.

이를 활용해 아래 예제는 이차원 배열로 사각형그리기다.

---------------------------------------------------------------------------------

int[][] a =  new int[5][5];

int i = 0;

int j = 0;

void setup(){

  size(480,360);

  background(255);

  noLoop();

}

void draw(){

  for(i=0;i<5;i++){

   for(j = 0; j<5 ; j++){

     a[i][j] = j*j;

   }

  }

  for(i = 0; i<5;i++){

    for(j = 0; j<5;j++){

      fill(0,0,0,10);

      rect(0,0,a[i][j]*10,a[i][j]*10);

    }

  }

}

--------------------------------------------------------------------------------

프로세싱 좌표변환

좌표변환 함수를 이용하여 도형의 좌표, 크기, 회전등을

표현해보자.

스케치 소스

----------------------------------------------------------------------------

void setup(){

  size(480,360);

  background(255);

}

void draw(){

  fill(255);

  rect(0, 0, 100, 100);   // 흰색 사각형을 (0,0)에 100x100크기로 그림  --(1)

  translate(30, 20);      // 기준좌표(왼쪽 맨위)를 (30,20)으로 이동

  rect(0, 0, 100, 100);   // 결국 사각형을 (30,20)에 100x100크기로 그림  --(2)

  translate(50,50);       // 기준좌표를 (50,50)으로 이동

                                // 누적 이동되어 기준좌표는 (0,0)에서 부터 (80,70)으로 이동됨

  rect(0,0,100,100);      // 결국 사각형을 (80,70)에 100x100크기로 그림 --(3)

  translate(-80,-70);    // 기준좌표를 (0,0)으로 원위치

  pushMatrix();            //pushMatrix(); 와 popMatrix();  사이에서

                                // translate(); rotate(); scale();가 적용됨

  translate(30, 20); 

  fill(0);  

  rect(0, 0, 50, 50);       // --(4)

  popMatrix(); 

  fill(102);  

  rect(15, 10, 50, 50);   // 위에서 쓰인translate();는 pushMatrix(); 와 popMatrix(); 사이에서

                                // 제한 되므로 사각형은 그대로 (15,10)좌표에서 그려짐.  --(5)

  translate(width/2, height/2);   //기준좌표를 창의 중앙점으로 옮김

  rect(-26, -26, 52, 52);     //  --(6)

  fill(255);

  rotate(PI/6.0);      // 좌료를 시계방향으로 30도 회전

  line(0,0,0,180);     // 좌표가 회전으로 수직선이 아닌 사선이 그려짐   --(7)

  line(0,0,240,0);     // 좌표가 회전으로 수평선이 아닌 사선이 그려짐   --(8)

  rect(-26, -26, 52, 52);    // 시계방향으로 30도 회전된 사각형    --(9)

  scale(0.5);    // 좌표를 가로세로 0.5축소됨

  rect(200, 200, 50, 50);   // 옮겨진 기준좌표(중점)에서    --(10)

                                   //(200,200)이 아닌 (100,100)위치에 그려짐(좌표 회전됨 유지)

  scale(0.5,0.7);     // 좌표가 가로0.5 세로 0.7 축소됨 

                           //결국 누적되어 가로 0.25 세로 0.35축소됨

  rect(200, 200, 50, 50);  // --(11)

}

--------------------------------------------------------------------------------------

화면

프로세싱 레퍼런스 http://processing.org/reference/

Transform 

applyMatrix()
popMatrix()
printMatrix()
pushMatrix()
resetMatrix()
rotate()
rotateX()
rotateY()
rotateZ()
scale()
shearX()
shearY()
translate()