Processing 入門 Lesson 01 【Arduino連携編 その１】

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

 

Lesson 00にてProcessingをインストールしました。

Lesson 01はArduinoと連携して動かしてみます。

Processingの構文の理解は、まだしません！！

 

そのため、スケッチを見ても分からないかもしれません。

そこは、全て吹っ飛ばして、まずはどんなことができるのか体験です。

管理人、まずは遊んでみたいんです。

遊んで興味がわけば、学習もはかどります。

こんなことができるなら、あんなこともしてみたいという気持ちが学習継続の秘訣。

 

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

 

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

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

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

 

はじめに

連携と言っても何をしたらいいんだろう？

そこは、Arduinoの素晴らしいところで「スケッチ例」にサンプルがあります。

統合環境であるIDEに初めから、サンプルスケッチがありますので使っていきます。

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

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

 

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

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

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

 

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

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

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

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

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

 

まずは、「4. Communication」にある「Dimmer」で遊びます。

日本語だと「調光」でしょうか。

 

「Dimmer」で遊ぶための回路

英語のサイトを読まなくても良いように本Lessonでは解説していく予定です。

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

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

「Dimmer」はデジタル入出力の9番ピンを使ってLEDを調光するためのスケッチです。

 

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

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

抵抗とLEDのみの単純な回路です。

抵抗はLEDの焼損を防ぐための電流制限抵抗のため実質LEDのみの回路です。

 

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

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

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

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

 

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

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

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

/*
  Dimmer

  Demonstrates sending data from the computer to the Arduino board, in this case
  to control the brightness of an LED. The data is sent in individual bytes,
  each of which ranges from 0 to 255. Arduino reads these bytes and uses them to
  set the brightness of the LED.

  The circuit:
  - LED attached from digital pin 9 to ground.
  - Serial connection to Processing, Max/MSP, or another serial application

  created 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/Dimmer
*/

const int ledPin = 9;      // the pin that the LED is attached to

void setup() {
  // initialize the serial communication:
  Serial.begin(9600);
  // initialize the ledPin as an output:
  pinMode(ledPin, OUTPUT);
}

void loop() {
  byte brightness;

  // check if data has been sent from the computer:
  if (Serial.available()) {
    // read the most recent byte (which will be from 0 to 255):
    brightness = Serial.read();
    // set the brightness of the LED:
    analogWrite(ledPin, brightness);
  }
}

/* Processing code for this example

  // Dimmer - sends bytes over a serial port

  // by David A. Mellis
  // This example code is in the public domain.

  import processing.serial.*;
  Serial port;

  void setup() {
    size(256, 150);

    println("Available serial ports:");
    // if using Processing 2.1 or later, use Serial.printArray()
    println(Serial.list());

    // Uses the first port in this list (number 0). Change this to select the port
    // corresponding to your Arduino board. The last parameter (e.g. 9600) is the
    // speed of the communication. It has to correspond to the value passed to
    // Serial.begin() in your Arduino sketch.
    port = new Serial(this, Serial.list()[0], 9600);

    // If you know the name of the port used by the Arduino board, you can specify
    // it directly like this.
    //port = new Serial(this, "COM1", 9600);
  }

  void draw() {
    // draw a gradient from black to white
    for (int i = 0; i < 256; i++) {
      stroke(i);
      line(i, 0, i, 150);
    }

    // write the current X-position of the mouse to the serial port as
    // a single byte
    port.write(mouseX);
  }

*/

 

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

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

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

/*
  Dimmer

  Demonstrates sending data from the computer to the Arduino board, in this case
  to control the brightness of an LED. The data is sent in individual bytes,
  each of which ranges from 0 to 255. Arduino reads these bytes and uses them to
  set the brightness of the LED.

  The circuit:
  - LED attached from digital pin 9 to ground.
  - Serial connection to Processing, Max/MSP, or another serial application

  created 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/Dimmer
*/

const int ledPin = 9;      // the pin that the LED is attached to

void setup() {
  // initialize the serial communication:
  Serial.begin(9600);
  // initialize the ledPin as an output:
  pinMode(ledPin, OUTPUT);
}

void loop() {
  byte brightness;

  // check if data has been sent from the computer:
  if (Serial.available()) {
    // read the most recent byte (which will be from 0 to 255):
    brightness = Serial.read();
    // set the brightness of the LED:
    analogWrite(ledPin, brightness);
  }
}

 

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

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

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

/* Processing code for this example

  // Dimmer - sends bytes over a serial port

  // by David A. Mellis
  // This example code is in the public domain.
*/
  import processing.serial.*;
  Serial port;

  void setup() {
    size(256, 150);

    println("Available serial ports:");
    // if using Processing 2.1 or later, use Serial.printArray()
    println(Serial.list());

    // Uses the first port in this list (number 0). Change this to select the port
    // corresponding to your Arduino board. The last parameter (e.g. 9600) is the
    // speed of the communication. It has to correspond to the value passed to
    // Serial.begin() in your Arduino sketch.
    port = new Serial(this, Serial.list()[0], 9600);

    // If you know the name of the port used by the Arduino board, you can specify
    // it directly like this.
    //port = new Serial(this, "COM1", 9600);
  }

  void draw() {
    // draw a gradient from black to white
    for (int i = 0; i < 256; i++) {
      stroke(i);
      line(i, 0, i, 150);
    }

    // write the current X-position of the mouse to the serial port as
    // a single byte
    port.write(mouseX);
  }

 

「Dimmer」 サンプルスケッチの実行

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

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

 

「Dimmer」 サンプルスケッチ実行結果

Processingを実行するとパソコンの画面中央に黒い濃淡がついたグラフィックが現れます。

色が濃い部分にマウスのカーソルを持っていくとLEDが暗くなります。

色が薄い方へ動かしていくとLEDが明るくなります。

グラフィックの濃淡に合わせてLEDが調光できるようになっています。

 

管理人の率直な感想。

お、お、おもしろい！

 

まとめ

Lesson 01【Arduino連携編 その１】はここまで。

Processingとの連携、面白いです。

次回のLesson 02もサンプルスケッチを使って遊びます。

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

Lesson 01にてArduinoとProcessingを連携して動かしました。Lesson 02も引き続きサンプルスケッチを利用して遊んでいきます。しばらくは、どんなことができるのか体験です。Lesson 01と同様にProcessin…

omoroya.com

 

Processingと連携しているスケッチは他にもいくつかありそうです。

しばらく、これだけで遊べそうです！

 

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

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

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

 

 

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

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

時期により異なりますが、様々なキャンペーンを実施しています。

＼Amazonギフト券／
Amazonギフトカード　キャンペーン

＼Amazon Mastercard お申込み／
Amazon Mastercard 申し込み 

 

いずれの場合もプライム会員である方がお得！！

＼Amazon Prime 30日間の無料会員を試す／
無料会員登録