Arduino + Processing

Naver

[캡스톤 디자인을 위한 아두이노 processing 코딩]

의뢰는 ▶instructables.tisotry.com/64

▼다운로드 사이트

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

프로세싱

---

Processing Code Syntax (=프로세싱 코드 문법)

/*
  PROCESSINGJS.COM - BASIC EXAMPLE
  Delayed Mouse Tracking  
  MIT License - Hyper-Metrix.com/F1LT3R
  Native Processing compatible 
*/  

// Global variables
//As with any language, you begin by defining your global variables.
//어느 언어든, 시작한다.by 정의하면서 전역 변수들을(▼아래처럼)
float radius = 50.0;
int X, Y;
int nX, nY;
int delay = 16;

// Setup the Processing Canvas
//Then you create a setup() function, when you control the visualization's properties, like the canvas size, frame rate and perhaps variables such as the stroke-weight or background-color.
//그런다음 만든다. setup()함수를, when 제어할때 시각화의 속성들을
like the 캔버스 사이즈, 프레임 빈도 and 변수들 such as the 선두께 or 배경색.
void setup(){
  size( 200, 200 );
  strokeWeight( 10 );
  frameRate( 15 );
  X = width / 2;
  Y = width / 2;
  nX = X;
  nY = Y;  
}

// Main draw loop
//The next step is to create your draw() function, which controls the behavior of each frame in your animation.
//다음단계는 to 만들기이다. draw()함수를, which 제어하는 the behavior를 of 각 프레임의
void draw()
{  
  radius = radius + sin(frameCount / 4);
  
  // Track circle to new destination
  X+=(nX-X)/delay;
  Y+=(nY-Y)/delay;
  
  // Fill canvas grey
  background( 100 );
  
  // Set fill-color to blue
  fill( 0, 121, 184 );
  
  // Set stroke-color white
  stroke(255); 
  
  // Draw circle
  ellipse( X, Y, radius, radius );                  
}


// Set circle's next destination
//Adding interactivity to your visualization is increadibly simple.
void mouseMoved()
{
  nX = mouseX;
  nY = mouseY;  
}

▼위 코드의 결과물은 아래와 같다.

마우스가 이동함에 따라 공이 움직인다.

(=it moves according to the mouse movement.)

---

https://www.youtube.com/watch?v=eUF-9t1HAvM

아두이노와 프로세싱의 연동방법을 알려주는 간략한 동영상이다. (올려주신분께 박수를~!!!)

아두이노 코드의 Serial Monitor로 확인할 수 있는 Data값을 시각화시킨다고 이해하시면 된다.

미대에서는 이 Processing이 차지하는 부분이 좀더 크다고 할 수 있겠다.