[2단계-1] 아두이노-> p5.js로 데이터(0, 1) 송수신 (버튼)

이제부터 아두이노에서 p5.js로 데이터를 송수신 하는 방법을 알아보겠습니다. 송수신하는 데이터의 종류는 정수, 문자열입니다. 먼저 정수를 송수신하는 방법에 대해 알아보겠습니다.

 

=> 먼저 p5.js 에디터에서 index.html에서 <script>~</script> 뒤에 붙여넣기 한 후  저장한다.

<script src="https://unpkg.com/p5-webserial@0.1.1/build/p5.webserial.js"></script>

1. 정수 송수신

- 1 바이트(0~255) 범위의 값 중 0, 1 값을 송수신해 봅니다.

 

(1) 푸시버튼 값을 수신하여 원의 색상 변경

- 아두이노 회로

 

- 아두이노 코드(버튼을 누르면 원 색상 변경)

// 푸시버튼값 송신

#define BUTTON 2

void setup() {
  pinMode(BUTTON, INPUT);
  Serial.begin(9600);
}

void loop() {
  int value = digitalRead(BUTTON);		// 버튼값 읽기
  if (value == 0) Serial.write(0);		// 0 송신
  else Serial.write(1);				// 1 송신
  delay(30);					// 전송속도 지연(30msec)
}

 

 

- p5.js코드(원 색상 변경)

// p5.js: 푸시버튼값 수신하여 원 색상 변경

let port = new p5.WebSerial();		// 시리얼 통신을 위한 객체 생성
let value = 0;

function setup() {
  createCanvas(500, 500);
  port.getPorts();			// 포트 사용 가능 여부 확인
  port.on('noport', makePortButton);	// 기존 선택한 포트가 없으면 makePortButton() 호출
  port.on('portavailable', openPort);	// 사용 가능한 포트가 있으면 openPort() 자동 호출
  port.on('data', serialEvent);		// 수신값이 있으면 serialEvent() 자동 호출
}

function draw() {
  background(0);
  if (value === 0) fill(255, 255, 0);		// 수신값이 0이면 노란색
  else fill(255, 0, 0);				// 수신값이 0이 아니면 빨간색
  ellipse(width/2, height/2, 200, 200);
}

function serialEvent() {				// 콜백함수: 수신값이 있으면 자동 호출
  value = port.read();				// 수신값 저장
}

function makePortButton() {			// 포트 첫 연결 시 포트 선택 버튼 생성
  let portButton = createButton('포트 선택');	// 버튼 생성
  portButton.mousePressed(choosePort);	// 버튼 누르면 choosePort() 자동 호출
  function choosePort() {			// 콜백함수
    port.requestPort();				// 시리얼 포트 선택창 오픈
  }
}

function openPort() {				// 콜백함수
  port.open().then(initiateSerial);		// 포트를 오픈 후 initiateSerial() 자동 호출
  function initiateSerial() {			// 콜백함수
    console.log('포트 오픈');
  }
}

 

- 결과

 

 

 

 

 

(2) 푸시버튼 값을 수신하여 원의 크기 변경

 

 - 아두이노 코드

// 아두이노: 푸시버튼값 송신

#define BUTTON 2
int val, pre_val, count;

void setup() {
  pinMode(BUTTON, INPUT);
  Serial.begin(9600);
}

void loop() {
  val = digitalRead(BUTTON);		// 버튼값 읽기
  if (val == 0 && pre_val==1) {
  	count +=10;
    if (count >= 255) count=0;
    Serial.write(count);		// 0~255 송신
  }
  pre_val=val;
  delay(30);					// 전송속도 지연(30msec)
}

 

 

- p5.js

// 버튼값 수신하여 원 크기 변경

let port = new p5.WebSerial();
let value=10;

function setup() {
  createCanvas(500, 500);
  port.getPorts();
  port.on('noport', makePortButton);
  port.on('portavailable', openPort);
  port.on('data', serialEvent);
}

function draw() {
  background(0);
  fill(255,255,0);
  ellipse(width/2, height/2, value*2, value*2);
  }

function serialEvent() {
	value = port.read();
}

function makePortButton() {
  let portButton = createButton('포트선택');
  portButton.mousePressed(choosePort);
  function choosePort() {
    port.requestPort();
  }
}

function openPort() {
  port.open().then(initiateSerial);
  function initiateSerial() {
    console.log('포트 오픈');
  }
}