Arduino + Processingをやってみた - えいあーるれいの技術日記

　リード線付き表面実装LEDを自作してみた - えいあーるれいの技術日記の続きです。

　前々からGUIを簡単に作れるProcessingに興味があったので、実際にそれを用いたプログラムを作成して実装してみました。このプログラムではLEDをGUIのスライドバーと同期させてPWM制御します。GUI画面もそれに伴って色が変わります。

Processingのインストール

　下記のリンクからプラットフォームを選択してダウンロードします。

processing.org

　zipファイルを解凍して実行ファイルをクリックして実行しました。

接続

　以下の図のように接続しています。Arduinoに挿したLEDをGUIツールで直接制御しています。LEDは表面実装用を使用しています。

f:id:Ray_ar:20210527161736p:plain

プログラム（Processing側）

　Processing側のプログラムを示します。setup関数でツールバーと配置する画像の読み込みなどを行います。そして、Arduinoのシリアルポート接続を開始します。draw関数ではスライドバーの量に応じてArduinoに数字を1バイト送ります。また、スライドバーの値に応じて背景の色も変化させています。

import controlP5.*;
import processing.serial.*;

ControlP5 slider;
Serial port;
int sliderValue;
PImage img;

void setup() {
  int myColor = color(255, 0, 0);
  
  port = new Serial(this, Serial.list()[0], 9600);
  port.bufferUntil(10);

  size(500, 500); 
  img = loadImage("data/data_sq.png");
  image(img, 0, 0);
  
  slider = new ControlP5(this);
  slider.addSlider("sliderValue")
    .setRange(0, 239)
    .setValue(0)
    .setPosition(100, 40)
    .setSize(200, 20)
    .setNumberOfTickMarks(10)
    .setColorValueLabel(myColor);

  slider.getController("sliderValue")
    .getValueLabel()
    .align(ControlP5.RIGHT, ControlP5.BOTTOM_OUTSIDE)
    .setPaddingX(-20);
}

void draw() {
  print(sliderValue);
  print(": ");
  port.write(char(sliderValue));
  int a = port.read();
  println(a);
  background(0,sliderValue*137/239,sliderValue);
  image(img, 0, 0);
}

プログラム（Arduino側）

　次はArduino側です。こっちは非常に簡単です。PWMピンは11番ピンを指定します。map関数でProcessing側から送られてくる最大値239を255に変更します。

void setup() {
  Serial.begin(9600);
  analogWrite(11, 0);
}

void loop() {
  if (Serial.available() > 0) {
    char pwm_c = Serial.read();
    if (pwm_c != 10) {
      map(pwm_c, 0, 239, 0, 255);
      Serial.write(pwm_c);
      analogWrite(11, pwm_c);
    }
  }
  delay(10);
}

　最初はM5 Atomで動かそうとしていましたが、直接USBで接続する方式のシリアル通信ができず苦労しました。Processing自体は簡単なのに結構いいGUIが作れるので便利だと感じました。いい感じの本とか買って必要に応じて辞書引く感覚で使いたいですね。

f:id:Ray_ar:20210527162914g:plain