[1단계-2] p5.js->아두이노로 정수(0~255) 데이터 송수신(LED, 서보모터)

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

 

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

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

 

1. 정수 송수신(0~255)

- 1 바이트(0~255) 범위로 변하는 정수 값을 송수신해 봅니다.

 

(1) LED 밝기 제어 

- 마우스의 좌우 움직임에 따라 LED의 밝기를 제어해봅시다.

 

- 아두이노 회로

- 아두이노 코드

// 수신값으로 LED 밝기 제어

#define LED 6

void setup() {
  pinMode(LED, OUTPUT);
  Serial.begin(9600);
}

void loop() {
  while (Serial.available()) {
    int value = Serial.read();
    analogWrite(LED, value);
  }
}

 

-p5.js 소스

// p5.js: 마우스 x축 위치값(0∼255) 송신

let port = new p5.WebSerial();

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

function draw() {
  background(0);
  let value = int(map(mouseX, 0, width, 0, 255));
  value = constrain(value, 0, 255);
  port.write(value);		// 송신

  fill(255, 255, 0);
  textAlign(CENTER, CENTER);
  textSize(30);
  text('LED 밝기: ' + nf(value, 3), width/2, height/2);
}

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

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

 

(2) 서보모터 각도 제어 

- 마우스의 좌우 움직임에 따라 서보모터의 각도(180도 까지만 가능)를 제어해봅시다.

 

- 아두이노 회로

- 아두이노 코드

// 서보모터 각도 제어

#include <Servo.h>      // Servo 클래스가 선언된 헤더파일 가져오기

#define SERVO A0
Servo servo;        // Servo 클래스를 이용한 servo 객체의 선언 및 생성

void setup() {
  pinMode(SERVO, OUTPUT);
  servo.attach(SERVO);      // SERVO핀(→A0)을 servo 객체에 연결
  Serial.begin(9600);
}

void loop() {
  while (Serial.available()) { // 수신 버퍼에 3바이트 이상 있을 때
    int value = Serial.read();    // 수신값 읽기
    servo.write(value);
  }
}

 

-p5.js 소스

// p5.js: 마우스 x, y축 위치 값(0∼255) 송신

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

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

function draw() {
  background(0);
  let value= int(map(mouseX, 0, width, 0, 180));	// 서보모터 각도값
  value = constrain(value, 0, 180);			// 각도값:0∼180도로 회전범위 제한     	
  port.write(value);					// 서보모터 각도값 송신

  fill(255, 255, 0);
 textAlign(CENTER, CENTER);
  textSize(30);
  text('서보모터 각도'+ nf(value,3),width/2, height/2);
}

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

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

 

 

(3) LED 밝기와 서보모터 각도 동시 제어 

- 마우스의 좌우 움직임에 따라 LED밝기와 서보모터의 각도(180도 까지만 가능)를 제어해봅시다.

 

- 아두이노 회로

 

- 아두이노 코드

//수신된 두 개의 정수로 서보모터 각도 및 LED 밝기 제어

#include <Servo.h>			// Servo 클래스가 선언된 헤더파일 가져오기
#define LED 6
#define SERVO A0
Servo servo;				// Servo 클래스를 이용한 servo 객체의 선언 및 생성

void setup() {
  pinMode(LED, OUTPUT);
  pinMode(SERVO, OUTPUT);
  servo.attach(SERVO);			// SERVO핀(→A0)을 servo 객체에 연결
  Serial.begin(9600);
}

void loop() {
  while (Serial.available() >= 3) {	// 수신 버퍼에 3바이트 이상 있을 때
    int value = Serial.read();		// 수신값 읽기
    if (value == 'A') {     		// 동기신호 확인
      int value1 = Serial.read();	// 서보모터 각도값 수신
      int value2 = Serial.read();	// LED 밝기값 수신
      servo.write(value1);
      analogWrite(LED, value2);
    }
  }
}

 

 

-p5.js 소스

// p5.js: 마우스 x, y축 위치 값(0∼255) 송신

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

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

function draw() {
  background(0);
  value1 = int(map(mouseX, 0, width, 0, 180));	// 서보모터 각도값
  value1 = constrain(value1, 0, 180);			// 각도값:0∼180도로 회전범위 제한
  value2 = int(map(mouseY, 0, height, 0, 255));	// LED 밝기값
  value2 = constrain(value2, 0, 255);			// 밝기값:0∼255로 범위 제한

  fill(255, 255, 0);
  textSize(30);
  text('각도: ' + nf(value1, 3), 10, 50);
  text('밝기: ' + nf(value2, 3), 10, 100);
  fill(0, 255, 0);
  text('마우스 움직임(X: Servo, Y: LED)', 10, 150);

  port.write('A');     					// 동기신호 송신
  port.write(value1);					// 서보모터 각도값 송신
  port.write(value2);					// LED 밝기값 송신
}

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

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