Processing 入門 Lesson 06 【Arduino連携編その６】

Processing 入門
Lesson 06
【Arduino連携編その６】

こんにちは、管理人のomoroyaです。

Lesson 01、02、03、04、０５にてサンプルスケッチを利用してProcessingとArduinoを連携して遊びました。

Lesson 06も引き続きサンプルスケッチを利用して遊んでいきます。

サンプルスケッチでArduinoと連携するのは本Lessonが最後です！

本日も内容理解は全て吹っ飛ばし、まずはどんなことができるのか体験です。

では、さっそく行って見ましょう。

Processingを始めようと考えている方。

ネット情報のみでも十分に学習可能です。

手元に参考書がほしいと考えている場合は下記の2冊程度で十分と考えます。

Processingをはじめよう第2版 (Make: PROJECTS)

オライリージャパン

東京電機大学出版局

はじめに
「Virtual Color Mixer」で遊ぶための回路
「Virtual Color Mixer」サンプルスケッチ読み出し
「Virtual Color Mixer」 Arduino用のスケッチを抜き出し
「Virtual Color Mixer」 Processing用のスケッチを抜き出し
「Virtual Color Mixer」サンプルスケッチの実行
「Virtual Color Mixer」サンプルスケッチ実行結果
まとめ
最後に
Amazonでお得に買う方法

はじめに

本LessonでもLesson 01、Lesson 02、Lesson 03、Lesson 04、Lesson 05同様にArduinoの「スケッチ例」にあるサンプルを利用します。
※統合環境であるIDEには、いくつかのサンプルスケッチがあります。

これまでと同様に、サンプルスケッチを読み出して実行するだけ。

「Arduino」と「Processing」を連携して遊ぶことができます。

どんなことができるのか確認するにはちょうど良い内容です。

公式ホームページのチュートリアルに説明があります。

https://www.arduino.cc/en/Tutorial/HomePage

…

上記ページの「Built-In Examples」⇒「4. Communication」と移動してください。

Communication用のTutorialが色々あります。

この中から、Processingと連携できるサンプルスケッチを選んで遊びます。

１．サンプルスケッチで遊ぶ。

２．どんなことができるのか体験する。

３．やってみたいことを想像する。

その後、本格的に学習していきます。

本Lessonでは、「4. Communication」にある「Virtual Color Mixer」で遊びます。

このチュートリアルはポテンションメータを3つ使用します。

数を用意ください。

手持ちがない方は以下からどうぞ。

ポテンションメータの単品購入はなかなか難しいです。

そのため、購入される場合は種類が異なる物が入ったセットをおすすめします。

タイプは好みで、つまみあり、なし。

KKHMF 抵抗器パック100Ω-1M 青い白い水平可変抵抗バッグ横型調節可能 13種類各種5pcs

KKHMF

GTIWUNG ポテンショメータ B5K B10K B20K B50K B100K オーム WH148 ポテンショメーターノブ音量制御ロータリー 3ターミナルリニアテ Bタイプ 15mm 20個セット赤、黄、青、白、ブラック・ノブ（WH148）キット

GTIWUNG

上記が在庫切れの場合は下記なども。

GTIWUNG

「Virtual Color Mixer」で遊ぶための回路

公式の英語サイトを読まなくてもできるように本Lessonでは解説していきます。

英語が気にならない場合、公式ページを読んでいただいて遊ぶことができます。

先ほどの公式ページに実体配線図も記載されています。

「Virtual Color Mixer」は光の3原色である「赤、緑、青」の色を調整することでパソコンの画面上に様々な色を表示させて遊ぶサンプルです。

RGBカラーですね。

色の調整はポテンションメータで行います。

ポテンションメータを動かすことで、読み取る電圧値を変える。

読み取った電圧値をArduinoでデジタル変換。

変換したデジタル値をパソコンに送り色を表示といった具合です。

では、さっそく解説していきます。

公式ホームページでは、ポテンションメータ３つと抵抗３つを使用している実体配線図になっています。

本Lessonでは、ポテンショメータのみ使います。

本Lessonで紹介している3端子のポテンショメータであれば、抵抗いりません。

部品が少なくて済むので簡単です。

簡単な動作内容を説明します。

Arduino側のスケッチは簡単で下記をしているだけです。

analogRead()関数で3つのセンサ（ポテンショメータ）の電圧をデジタル値に変換
パソコンへASCIIコードとして送信

３つのセンサとは以下。

赤色調整用のポテンションメータ（アナログ入力A0ピン）
緑色調整用のポテンションメータ（アナログ入力A1ピン）
青色調整用のポテンションメータ（アナログ入力A2ピン）

ブレッドボード上の電子部品の動作はポテンショメータを動かし出力の電圧を変えるだけです。

３つのポテンショメータを動かすと色が変わる。

Arduino入門編にて「RGBダイオード制御編」の解説をしています。

こちらも、RGBの色の変化を楽しめるLessonとなっています。

参考に遊んでみてください。

Arduino 入門 Lesson 04 【RGBダイオード制御編】

RED LEDを使い、RED LEDの各輝度を変更する作業を通して、RED LEDの色が３色以外の色になっていることを確認します。輝度の変更はパルス幅変調（PWM）にて制御します。これは「LEDがONしている時間を制御する」ということです。…

アナログ入力、アナログデジタル変換に関しては下記を参照ください。

Arduino 入門番外編 05 【アナログ入力とは】

今回は、「Arduino 入門番外編０５アナログ入力とは」です。arduino 入門番外編はarduinoの基本的なことを書いていく方向性にする予定です。今回は、arduinoのアナログ入力について解説していきます。…

パソコンへの送信方法は、Lesson 05と同じく「Serial.print」

⇒　数値をあらわす文字として送信

Lesson 05にて解説しました。

文字列で送信することで255よりお大きい値を簡単に送ることができます。

analogRead()で読み取った0～1023の値を文字列としてそのまま送信できるということです。

その後、エンコードすることで数値として扱います。

「Virtual Color Mixer」に対応した回路図とブレッドボード図がこちらとなります。

管理人がFrizingを使って描いた回路図となります。

「Virtual Color Mixer」サンプルスケッチ読み出し

Arduinoの「IDE」を立ち上げてください。

以下で「Virtual Color Mixer」のサンプルスケッチが読み出されます。

「ファイル」⇒「スケッチ例」⇒「04.Communication」⇒「VirtualColorMixer」

こちらが読み出したサンプルスケッチ。

下記サンプルスケッチはArduino用のスケッチとProcessing用のスケッチが両方記載されています。

Processing用のスケッチはコメントアウトされていますので、Processingの「IDE」にコメントアウトされた部分を記載すればよいだけとなります。

/*
  This example reads three analog sensors (potentiometers are easiest) and sends
  their values serially. The Processing and Max/MSP programs at the bottom take
  those three values and use them to change the background color of the screen.

  The circuit:
  - potentiometers attached to analog inputs 0, 1, and 2

  created 2 Dec 2006
  by David A. Mellis
  modified 30 Aug 2011
  by Tom Igoe and Scott Fitzgerald

  This example code is in the public domain.

  http://www.arduino.cc/en/Tutorial/VirtualColorMixer
*/

const int redPin = A0;		// sensor to control red color
const int greenPin = A1;	// sensor to control green color
const int bluePin = A2;		// sensor to control blue color

void setup() {
  Serial.begin(9600);
}

void loop() {
  Serial.print(analogRead(redPin));
  Serial.print(",");
  Serial.print(analogRead(greenPin));
  Serial.print(",");
  Serial.println(analogRead(bluePin));
}

/* Processing code for this example

  // This example code is in the public domain.

  import processing.serial.*;

  float redValue = 0;        // red value
  float greenValue = 0;      // green value
  float blueValue = 0;       // blue value

  Serial myPort;

  void setup() {
    size(200, 200);

    // List all the available serial ports
    // if using Processing 2.1 or later, use Serial.printArray()
    println(Serial.list());

    // I know that the first port in the serial list on my Mac is always my
    // Arduino, so I open Serial.list()[0].
    // Open whatever port is the one you're using.
    myPort = new Serial(this, Serial.list()[0], 9600);
    // don't generate a serialEvent() unless you get a newline character:
    myPort.bufferUntil('\n');
  }

  void draw() {
    // set the background color with the color values:
    background(redValue, greenValue, blueValue);
  }

  void serialEvent(Serial myPort) {
    // get the ASCII string:
    String inString = myPort.readStringUntil('\n');

    if (inString != null) {
      // trim off any whitespace:
      inString = trim(inString);
      // split the string on the commas and convert the resulting substrings
      // into an integer array:
      float[] colors = float(split(inString, ","));
      // if the array has at least three elements, you know you got the whole
      // thing.  Put the numbers in the color variables:
      if (colors.length >= 3) {
        // map them to the range 0-255:
        redValue = map(colors[0], 0, 1023, 0, 255);
        greenValue = map(colors[1], 0, 1023, 0, 255);
        blueValue = map(colors[2], 0, 1023, 0, 255);
      }
    }
  }

*/

「Virtual Color Mixer」 Arduino用のスケッチを抜き出し

Arduino用のスケッチ部分のみを抜き出したのがこちら。

下記をArduino用の「IDE」に記載してArduinoに書き込んでください。

/*
  This example reads three analog sensors (potentiometers are easiest) and sends
  their values serially. The Processing and Max/MSP programs at the bottom take
  those three values and use them to change the background color of the screen.

  The circuit:
  - potentiometers attached to analog inputs 0, 1, and 2

  created 2 Dec 2006
  by David A. Mellis
  modified 30 Aug 2011
  by Tom Igoe and Scott Fitzgerald

  This example code is in the public domain.

  http://www.arduino.cc/en/Tutorial/VirtualColorMixer
*/

const int redPin = A0;		// sensor to control red color
const int greenPin = A1;	// sensor to control green color
const int bluePin = A2;		// sensor to control blue color

void setup() {
  Serial.begin(9600);
}

void loop() {
  Serial.print(analogRead(redPin));
  Serial.print(",");
  Serial.print(analogRead(greenPin));
  Serial.print(",");
  Serial.println(analogRead(bluePin));
}

「Virtual Color Mixer」 Processing用のスケッチを抜き出し

Processing用のスケッチ部分のみを抜き出したのがこちら。

下記をProcessing用の「IDE」に記載してください。

/* Processing code for this example

  // This example code is in the public domain.
*/

  import processing.serial.*;

  float redValue = 0;        // red value
  float greenValue = 0;      // green value
  float blueValue = 0;       // blue value

  Serial myPort;

  void setup() {
    size(200, 200);

    // List all the available serial ports
    // if using Processing 2.1 or later, use Serial.printArray()
    println(Serial.list());

    // I know that the first port in the serial list on my Mac is always my
    // Arduino, so I open Serial.list()[0].
    // Open whatever port is the one you're using.
    myPort = new Serial(this, Serial.list()[0], 9600);
    // don't generate a serialEvent() unless you get a newline character:
    myPort.bufferUntil('\n');
  }

  void draw() {
    // set the background color with the color values:
    background(redValue, greenValue, blueValue);
  }

  void serialEvent(Serial myPort) {
    // get the ASCII string:
    String inString = myPort.readStringUntil('\n');

    if (inString != null) {
      // trim off any whitespace:
      inString = trim(inString);
      // split the string on the commas and convert the resulting substrings
      // into an integer array:
      float[] colors = float(split(inString, ","));
      // if the array has at least three elements, you know you got the whole
      // thing.  Put the numbers in the color variables:
      if (colors.length >= 3) {
        // map them to the range 0-255:
        redValue = map(colors[0], 0, 1023, 0, 255);
        greenValue = map(colors[1], 0, 1023, 0, 255);
        blueValue = map(colors[2], 0, 1023, 0, 255);
      }
    }
  }