[1단계-1] p5.js-> 아두이노로 정수(0,1) 데이터 송수신(LED, 부저, DC모터 작동)

이제부터 아두이노에서 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) LED 1개 동작 제어 

- p5.js 캔버스에서 마우스를 클릭하여 LED가 점멸하도록 해봅시다.

 

- 아두이노 회로

- 아두이노 코드

// 수신된 정수로 LED 점멸 제어

#define LED 6

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

void loop() {
  while (Serial.available()) {		// 수신 여부 검사
    int value = Serial.read();		// 수신값 읽기
    if (value == 1) {			// 수신값이 1인 경우
      digitalWrite(LED, 1);
    } else if (value == 0) {		// 수신값이 0인 경우
      digitalWrite(LED, 0);
    }
  }
}

 

- p5.js 소스

// p5.js: 마우스 클릭값(정수: 0,1) 송신

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

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

  background(0);
  fill(255, 255, 0);
  textAlign(CENTER, CENTER);
  textSize(30);
  text('마우스를 눌러 LED 제어', width/2, height/2);
}

function draw() {
  if (mouseIsPressed) {
    port.write(1);				// 1 송신
  } else {
    port.write(0);				// 0 송신
  }
}

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) LED 여러 개 동작 제어 

- 아두이노 회로

- 아두이노 소스

// 4개의 LED 제어

const int LED[] = {6, 7, 8, 9};

void setup() {
  for (int i = 0; i < 4; i++) {
    pinMode(LED[i], OUTPUT);
  }
  Serial.begin(9600);
}

void loop() {
  while (Serial.available()) {
    int value = Serial.read();
    // LED 전부 소등
    for (int i = 0; i < 4; i++) {
      digitalWrite(LED[i], 0);
    }
    // LED 점등
    for (int i = 0; i < value; i++) {
      digitalWrite(LED[i], 1);
    }
  }
}

 

 

- p5.js 소스

- 키보드 1~4를 눌러 LED제어하기

// p5.js: 키보드 정수(1∼4) 송신

let port = new p5.WebSerial();

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

  background(0);
  fill(255, 255, 0);
  textAlign(CENTER, CENTER);
  textSize(30);
  text("1∼4키 누르기", width/2, height/2);
}

function draw() { }

function keyPressed() {
  if (key === '1') port.write(1);
  else if (key === '2') port.write(2);
  else if (key === '3') port.write(3);
  else if (key === '4') port.write(4);
  else port.write(0);
}

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

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

- 결과

 

(3) 부저 소리내기 

 

- 아두이노 회로

- 아두이노 소스코드

//수신된 정수로 부저 제어

#define BUZZER 12

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

void loop() {
  while (Serial.available()) {	// 검사
    int value = Serial.read();	// 수신
    if (value == 1) {		// 1 수신
      tone(BUZZER, 262);
    } else {			// 0 수신
      noTone(BUZZER);
    }
  }
}

 

- p5.js. 소스코드

// p5.js: 마우스가 사각형 안에 들어가면 1 송신, 그렇지 않으면 0 송신

let port = new p5.WebSerial();
let x = 150, y = 150, w = 200, h = 200;

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

function draw() {
  background(0);
  if (mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h) {
    fill(255, 0, 0);
    port.write(1);	// 1 송신
  } else {
    fill(0, 255, 0);
    port.write(0);	// 0 송신
  }
  rect(x, y, w, h);
}

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

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

 

(4) 키보드로 부저 작동하기(1~8키보드 숫자로 도레미파솔라시도 음계 재생)

- 아두이노 소스

#define BUZZER 12

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

void loop() {
  while (Serial.available()) {  // 검사
    int value = Serial.read();  // 수신
    if (value == 1) {   // 1 수신
      tone(BUZZER, 262);
    }
    else if (value == 2) {   // 2 수신
      tone(BUZZER, 293);
    }      
    else if (value == 3) {   // 3 수신
      tone(BUZZER, 329);
    }
    else if (value == 4) {   // 4 수신
      tone(BUZZER, 349);
    }
    else if (value == 5) {   // 5 수신
      tone(BUZZER, 392);
    }
    else if (value == 6) {   // 6 수신
      tone(BUZZER, 440);
    }
    else if (value == 7) {   // 7 수신
      tone(BUZZER, 493);
    }
    else if (value == 8) {   // 8 수신
      tone(BUZZER, 523);
    } 
    else {      // 0 수신
      noTone(BUZZER);
    }
  }
}

 

- p5.js 소스

// p5.js: 키보드 정수(1∼8) 송신

let port = new p5.WebSerial();

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

  background(0);
  fill(255, 255, 0);
  textAlign(CENTER, CENTER);
  textSize(30);
  text("1∼8키 누르기", width/2, height/2);
}

function draw() { }

function keyPressed() {
  if (key === '1') port.write(1);
  else if (key === '2') port.write(2);
  else if (key === '3') port.write(3);
  else if (key === '4') port.write(4);
  else if (key === '5') port.write(5);
  else if (key === '6') port.write(6);
  else if (key === '7') port.write(7);
  else if (key === '8') port.write(8);
  else port.write(0);
}

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

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

(4) DC 모터 동작 제어 

- 아두이노 회로

 

- 아두이노 소스코드

// DC모터 제어

#define DC_FWD 9
#define DC_BWD 10

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

void loop() {
  while (Serial.available()) {
    int value = Serial.read();
    if(value==1){
      digitalWrite(DC_FWD, 1);
      digitalWrite(DC_BWD, 0);
  }
  else{
      digitalWrite(DC_FWD, 0);
      digitalWrite(DC_BWD, 0);    
  }
 }
}

 

- p5.js 소스

 

// p5.js: 마우스가 사각형 안에 들어가면 1 송신, 그렇지 않으면 0 송신

let port = new p5.WebSerial();
let r=100;

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

function draw() {
  background(0);
  let d=dist(width/2, height/2, mouseX, mouseY);
  
  if (d<r) {
    fill(255, 0, 0);
    port.write(1);	// 1 송신
  } else {
    fill(0, 255, 0);
    port.write(0);	// 0 송신
  }
  ellipse(width/2, height/2, r*2, r*2);
}

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

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