\ AmazonにてArduino UNO R4 発売中!! /

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

processing-lesson06-00 Processing入門編
記事に広告(アフィリエイト広告)が含まれています。
スポンサーリンク
Processing 入門
Lesson 06
【Arduino連携編 その6】

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

 

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

 

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

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

 

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

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

 

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

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

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

 

スポンサーリンク

はじめに

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

 

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

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

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

 

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

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

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

 

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

1.サンプルスケッチで遊ぶ。

2.どんなことができるのか体験する。

3.やってみたいことを想像する。

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

 

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

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

数を用意ください。

 

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

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

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

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

 

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

 

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

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

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

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

 

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

RGBカラーですね。

 

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

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

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

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

 

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

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

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

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

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

 

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

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

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

3つのセンサとは以下。

  1. 赤色調整用のポテンションメータ(アナログ入力A0ピン)
  2. 緑色調整用のポテンションメータ(アナログ入力A1ピン)
  3. 青色調整用のポテンションメータ(アナログ入力A2ピン)

 

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

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

 

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

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

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

 

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

 

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

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

Lesson 05にて解説しました。

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

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

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

 

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

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

processing-lesson06-01

processing-lesson06-02

 

「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);
      }
    }
  }

 

「Virtual Color Mixer」 サンプルスケッチの実行

実行手順が以下となります。

  1. Arduino用のスケッチ部分をArduino用のIDEにコピーしてArduinoに書き込み。
    ※回路接続のため電源供給を一旦止める。
  2. 回路作成しArduinoと接続。
  3. Arduinoへ電源供給
  4. Processing用のスケッチ部分をProcessing用のIDEにコピーして実行。

これで、問題なく動くはずです。

 

「Virtual Color Mixer」 サンプルスケッチ実行結果

Processingを実行するとパソコンの画面中央に実行画面が現れます。

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

  • A0接続のポテンショメータ:赤色の調整
  • A1接続のポテンショメータ:緑色の調整
  • A2接続のポテンショメータ:青色の調整

という動作になります。

 

実行結果がこちら。

■A0、A1のへの入力を2.5V、A3への入力を5Vにした状態。

processing-lesson06-03

 

■A0、A1のへの入力を2.5V、A3への入力を0Vにした状態。

processing-lesson06-04

 

子供と一緒に、遊ぶことで色の理解にもつながります!

ポテンショメータを動かして色が変わる。

やってみると結構おもしろいです。

 

まとめ

Lesson 06【Arduino連携編 その6】はここまで。

サンプルコードを使った、Processingの導入変はここまで。

次回から、Processingについて学習していきます。

Processing 入門 Lesson 07 【学習の始めに】
Lesson 06までは、ArduinoとProcessingを連携するとどんなことができるのか?をサンプルコードを使って体験して遊びました。Lesson 07からはProcessingの構文を学習していきます。最終目標は、「6軸モーション…

 

管理人の取り合えずの目標は6軸モーションセンサとProcessingの連携。

6軸モーションセンサの動きをパソコン画面上でグラフィカルに表示出来たら・・・

おもしろいと思いませんか?

今から楽しみです。

 

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

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

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

 

最後に

疑問点、質問などありましたら気軽にコメントください。

この電子部品の解説をしてほしい!などなどなんでもOKです。

リンク切れ、間違いなどあればコメントいただけると助かります。

 

Arduino入門編、番外編、お役立ち情報などなどサイトマップで記事一覧をぜひご確認ください。

 

Arduino入門編で使用しているUNOはAmazonにて購入可能です。

互換品とは言え、Arduinoはオープンソース。

複製して販売するのもライセンス的に問題なし。

 

そのため互換品の品質も悪くなく、それでいて値段は安いです。

正規品本体の値段程度で豊富な部品が多数ついています。

 

学習用、遊び用、お試し用には安価な互換品がおすすめです。

 

 

上記のものでも十分に多数の部品が入っていますが、最初からもっと多数の部品が入っているこちらもお勧めです。

 

Amazonでお得に買う方法

Amazonでお得に購入するなら、Amazonギフト券がおすすめです。

現金でチャージするたびに、チャージ額に応じたポイントが付与されます。

最大2.5%!!!(Amazonプライム会員ならさらにお得)

チャージ額(一回分) 一般 プライム会員
5,000円~19,999円 0.5% 1.0%
2,0000円~39,999円 1.0% 1.5%
40,000円~89,999円 1.5% 2.0%
90,000円~ 2.0% 2.5%

さらに、初回チャージで1000ポイントもらえるキャンペーンも実施中!

\Amazonギフト券 1000ポイントキャンペーン/
Amazonチャージ 初回購入で1000ポイントキャンペーン

 

補足情報
コンビニ・ATM・ネットバンクが対象
購入は1円単位で可能

コメント

タイトルとURLをコピーしました