Processing 入門 Lesson 02 【Arduino連携編その２】

Processing 入門
Lesson 02
【Arduino連携編その2】

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

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

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

しばらくは、どんなことができるのか体験です。

Lesson 01と同様にProcessingの構文の理解は後回しです！

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

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

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

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

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

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

オライリージャパン

東京電機大学出版局

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

はじめに

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

サンプルスケッチを読み出して実行するだけで、

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

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

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

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

…

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

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

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

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

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

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

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

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

「コンピュータにデータを送り、Processingでグラフ化する」という内容のチュートリアルとなります。

「Graph」で遊ぶための回路

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

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

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

「Graph」はポテンショメータ（可変抵抗器）とアナログ入力A0を利用します。

ポテンショメータとアナログ入力については以下で解説しています。

Arduino 入門 Lesson 12 【ポテンショメータ編】

「Arduino」を使ったマイコンプログラミングを子供と一緒に学習するブログ。本日はLesson 12 ポテンショメータ編です。ポテンショメータを利用して電圧値を読み取ることでanalogRead関数について理解します。色んな電圧値を測定し…

動作内容は以下となります。

ポテンショメータの出力電圧をアナログ入力で読み取りデジタル値に変換
変換したデータをパソコンに送る
Processingでデータをグラフ化

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

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

ポテンショメータのみの単純な回路です。

「Graph」サンプルスケッチ読み出し

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

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

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

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

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

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

/*
  Graph

  A simple example of communication from the Arduino board to the computer: The
  value of analog input 0 is sent out the serial port. We call this "serial"
  communication because the connection appears to both the Arduino and the
  computer as a serial port, even though it may actually use a USB cable. Bytes
  are sent one after another (serially) from the Arduino to the computer.

  You can use the Arduino Serial Monitor to view the sent data, or it can be
  read by Processing, PD, Max/MSP, or any other program capable of reading data
  from a serial port. The Processing code below graphs the data received so you
  can see the value of the analog input changing over time.

  The circuit:
  - any analog input sensor attached to analog in pin 0

  created 2006
  by David A. Mellis
  modified 9 Apr 2012
  by Tom Igoe and Scott Fitzgerald

  This example code is in the public domain.

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

void setup() {
  // initialize the serial communication:
  Serial.begin(9600);
}

void loop() {
  // send the value of analog input 0:
  Serial.println(analogRead(A0));
  // wait a bit for the analog-to-digital converter to stabilize after the last
  // reading:
  delay(2);
}

/* Processing code for this example

  // Graphing sketch

  // This program takes ASCII-encoded strings from the serial port at 9600 baud
  // and graphs them. It expects values in the range 0 to 1023, followed by a
  // newline, or newline and carriage return

  // created 20 Apr 2005
  // updated 24 Nov 2015
  // by Tom Igoe
  // This example code is in the public domain.

  import processing.serial.*;

  Serial myPort;        // The serial port
  int xPos = 1;         // horizontal position of the graph
  float inByte = 0;

  void setup () {
    // set the window size:
    size(400, 300);

    // 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');

    // set initial background:
    background(0);
  }

  void draw () {
    // draw the line:
    stroke(127, 34, 255);
    line(xPos, height, xPos, height - inByte);

    // at the edge of the screen, go back to the beginning:
    if (xPos >= width) {
      xPos = 0;
      background(0);
    } else {
      // increment the horizontal position:
      xPos++;
    }
  }

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

    if (inString != null) {
      // trim off any whitespace:
      inString = trim(inString);
      // convert to an int and map to the screen height:
      inByte = float(inString);
      println(inByte);
      inByte = map(inByte, 0, 1023, 0, height);
    }
  }

*/

「Graph」 Arduino用のスケッチを抜き出し

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

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

/*
  Graph

  A simple example of communication from the Arduino board to the computer: The
  value of analog input 0 is sent out the serial port. We call this "serial"
  communication because the connection appears to both the Arduino and the
  computer as a serial port, even though it may actually use a USB cable. Bytes
  are sent one after another (serially) from the Arduino to the computer.

  You can use the Arduino Serial Monitor to view the sent data, or it can be
  read by Processing, PD, Max/MSP, or any other program capable of reading data
  from a serial port. The Processing code below graphs the data received so you
  can see the value of the analog input changing over time.

  The circuit:
  - any analog input sensor attached to analog in pin 0

  created 2006
  by David A. Mellis
  modified 9 Apr 2012
  by Tom Igoe and Scott Fitzgerald

  This example code is in the public domain.

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

void setup() {
  // initialize the serial communication:
  Serial.begin(9600);
}

void loop() {
  // send the value of analog input 0:
  Serial.println(analogRead(A0));
  // wait a bit for the analog-to-digital converter to stabilize after the last
  // reading:
  delay(2);
}

「Graph」 Processing用のスケッチを抜き出し

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

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

/* Processing code for this example

  // Graphing sketch

  // This program takes ASCII-encoded strings from the serial port at 9600 baud
  // and graphs them. It expects values in the range 0 to 1023, followed by a
  // newline, or newline and carriage return

  // created 20 Apr 2005
  // updated 24 Nov 2015
  // by Tom Igoe
  // This example code is in the public domain.
*/

  import processing.serial.*;

  Serial myPort;        // The serial port
  int xPos = 1;         // horizontal position of the graph
  float inByte = 0;

  void setup () {
    // set the window size:
    size(400, 300);

    // 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');

    // set initial background:
    background(0);
  }

  void draw () {
    // draw the line:
    stroke(127, 34, 255);
    line(xPos, height, xPos, height - inByte);

    // at the edge of the screen, go back to the beginning:
    if (xPos >= width) {
      xPos = 0;
      background(0);
    } else {
      // increment the horizontal position:
      xPos++;
    }
  }

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

    if (inString != null) {
      // trim off any whitespace:
      inString = trim(inString);
      // convert to an int and map to the screen height:
      inByte = float(inString);
      println(inByte);
      inByte = map(inByte, 0, 1023, 0, height);
    }
  }