Processing 入門 Lesson 17 【圧電スピーカーと電子ピアノ】

Processing 入門
Lesson 17
【圧電スピーカーと電子ピアノ】

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

Lesson 16は【RGBダイオードの制御】ということでパルス幅変調により、ProcessingでRGBの色を制御しました。

Lesson 17では、【圧電スピーカーと電子ピアノ】です。

Processingでは鍵盤を作成。

Arduino側では圧電スピーカーを制御してピアノの音を出します。
※圧電スピーカはパッシブブザー（passive buzzer）とも呼ばれます。

キーボードの1～８の数字と、Processingのウィンドウの鍵盤、Aruduino側の圧電スピーカを連携させる学習となります。

そう、「簡易的な電子ピアノ」を作っちゃおうということです。

Processing学習の最終目標は、「6軸モーションセンサ」との連携です。

Lesson 14以降を学習することでLesson 01 ～ Lesson 06【Arduino連携変そのX】で遊んだスケッチも理解できるようになるはず。

これからのLessonを楽しみましょう！

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

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

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

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

オライリージャパン

東京電機大学出版局

はじめに
Lesson 17 目標
本Lessonの学習に必要な物
実践回路作成
1. 回路図
2. 接続
Serial入出力のためのクラス復習
実践スケッチ作成
まとめ
最後に
Amazonでお得に買う方法

はじめに

Lesson 14からはArduinoと一緒に学習していきます。

Arduinoの詳細な解説は「Arduino入門編」にて確認してください。

Arduino入門編

Arduino入門の記事となります。購入編から、IDEの使い方、色々な電子部品を使った実践編まで幅広く解説しています。また、サンプルのスケッチ（コード）は詳細に説明しています。初めてのかたでも、スケッチ（コード）を理解できます！Arduin…

本Lessonでは圧電スピーカーを制御するスケッチを描いていきます。

始めに、下記を読んでおくと理解しやすいはずです。

Arduino 入門 Lesson 07 【圧電スピーカー編】

圧電スピーカー（パッシブブザー）は、外部から与えた音声信号に従って音を発生させます。音程を変えたり、メロディーを流したりする事も可能です。ONとOFFを繰り返す（PWM制御）ことによって空気を振動させ音を発生させます。今回は圧電スピーカーで…

Lesson 17 目標

本Lessonの目標は以下の3点です。

１．簡易的な電子ピアノを作って遊ぶ！
２．ArduinoとProcessingの通信方法を理解
３．圧電スピーカー（passive buzzer）の復習

本Lessonの学習に必要な物

本Lessonに必要となる電子部品を列挙します。

RGBダイオードが新たに必要になります。

※ブレッドボードはメス―オスのジャンパーワイヤーがない場合は使います。
本Lessonではメス―オスのジャンパーワイヤーを使うため不要です。

圧電スピーカー（パッシブブザー）がこちら。

Jumper wireはできれば、「オス-メスオス-オスメス –メス」の３種類を揃えておくことをお勧めします。

ELEGOO 120pcs多色デュポンワイヤー、arduino用ワイヤ—ゲ—ジ28AWG オス-メスオス-オスメス –メスブレッドボードジャンパーワイヤー

ELEGOO

短めのメスーオスが使いやすい場合も。

uxcell ジャンプワイヤコネクタラインジャンパーケーブル 1P-1P 40P 10cm メスオス

uxcell

抵抗、LEDなどを個別でセット品を購入しても、そんなに使わない！

という方は、「電子工作基本部品セット」が使い勝手が良い。

OSOYOO(オソヨー) 電子工作基本部品セット LED 5色合計100PCS 金属皮膜抵抗器 30種類合計600本電解コンデンサ 12種類合計120本セラミックコンデンサー 30種類合計300本ダイオード 8種類合計100本トランジスタ 17種類合計170本 (電子部品セット6種類)

OSOYOO

実践回路作成

最初に回路図を確認してください。

次に、回路図に合わせて部品を接続します。

最後にスケッチ（コード）を書いて、電子ピアノを作っていきましょう。

Arduinoのピン配置を確認したい方は番外編02を参照してください。

Arduino 入門番外編 02 【外観とピン配置】

本日は、番外編02 Arduino UNO R3 外観とピン配置です。arduinoの入門編を書いていて、arduino自体の説明をしたいと考えていました。やはり、arduino自身のことを理解しておいた方が良いですよね。ということで番外編…

回路図

圧電スピーカ―（passive buzzer）のみの単純な回路です。

Arduino 入門 Lesson 07 【圧電スピーカー編】と同じ回路となります。

利用するピンも同じ8番ピン。

回路図がこちら。
※Arduino 入門 Lesson 07 【圧電スピーカー編】と同じ回路です。

こちらがブレッドボード図。

回路図は「fritzing」を利用しています。

「fritzing」の使い方は下記を参照してください。

Arduino 入門番外編 01 【回路図を書こう fritzing】

UNOの実際の回路を写真で掲載しても、接続がわかりずらいかなと考えていました。前々から「fritzing」を利用して回路を描くことで、わかりやすくしたいと考えていました。そこで本日は、「fritzing」のインストールと回路図を描くことに挑…

接続

下図に示すように、用意した部品を使用して接続しましょう。

部品は圧電スピーカ―（passive buzzer）のみのため簡単に接続できます。

使用するポートは、デジタル入出力ピンの「8」です。

穴に挿入しづらいときは、ラジオペンチなどを使用してください。

Serial入出力のためのクラス復習

Lesson 14にて解説しましたが、覚えるという意味で再度軽く解説。

Serialクラスの機能を使うためには、「serialパッケージをimport」する。

import processing.serial.*;

次に、Serialオブジェクトの生成処理。

生成するためには、Serialクラスのコンストラクタ使用。

Serial(parent, portName, baudRate);
parent：通常「this」を使用
portName：ポート番号（COM*）　デフォルト：COM1
baudRate：通信速度　デフォルト：9600

使用例
Serial Port; //シリアルクラスのオブジェクト、変数の設定
Port = Serial(this, COM3, 9600); //Serialオブジェクト生成、Portへ代入

Serialクラスの主なメソッドを紹介。

Serialクラス	内容
available()	読めるデータのバイト数を返す。戻り値が0より大きい場合、データを利用できる。
serial.list()	使用可能なシリアルポートのリストを返す。
read()	次の1バイトの読み込み。 0～255の値を返す。読めるバイトがないと-1を返す。データが使用可能かどうかを確認するために最初にavailable()で確認することを推奨します。
write()	バイト、文字、整数、バイト[]、文字列をシリアルポートに書き込みます。

詳しく知りたい方は、公式のホームページで確認！

Serial / Libraries

Send data between Processing and external hardware through serial communication (RS-232).…

実践スケッチ作成

ProcessingとArduinoを連携するためには、お互いにデータのやり取りをする必要があります。

本Lessonのデータのやり取りは、「Processing」　→　「Aruduino」。

Processingウィンドウでピアノの鍵盤を描画。

さらに、キーボードの1～8を押すことで鍵盤のドレミファソラシドが押されたことがわかるようにする。

Arduino側では、押したキーボードによって、圧電スピーカーに信号を送りドレミファソラシドを奏でる。

といった動作になります。

Arduino側では、受信データである「1～８」のデータに対して以下の動作をさせます。

1～8の文字に割り当てた「ドレミファソラシド」の音を出す。

Processing側のスケッチはキーボードの動作によって以下の動作と文字の送信をします。

押したキーボードにあわせ描画した「ドレミファソラシド」の鍵盤の色を変える
押したキーボードの情報（keyに格納されている）をArduinoへ送信する

Arduino用　サンプルスケッチ

サンプルスケッチ（コード）を下記に示します。

デジタル入出力である8番ピンを使用します。

次にProcessingから受信したデータを読み込む。

あとは、受け取った「1～8」の文字を「ドレミファソラシド」に変換して音を出すスケッチです。

//Lesson 17 Processing制御用のArduino用スケッチ
//Processingによるピアノ演奏　ドレミファソラシド
//https://omoroya.com/

int melody;                //変数の設定
const int duration = 300 ; //音の長さを指定
const int pin = 8 ;        //圧電スピーカを接続したピン番号

void setup() {
  Serial.begin(9600);       //シリアル通信のデータ転送レートを設定しポート開放
}
void loop() {
  if(Serial.available() > 0){
    char val = Serial.read(); //受信したデータをvalにint型として格納
    if(val == '1'){
      melody = 262;        //ド
    }else if(val == '2'){
      melody = 294;        //レ
    }else if(val == '3'){
      melody = 330;        //ミ
    }else if(val == '4'){
      melody = 349;        //ファ
    }else if(val == '5'){
      melody = 392;        //ソ
    }else if(val == '6'){
      melody = 440;        //ラ
    }else if(val == '7'){
      melody = 494;        //シ
    }else if(val == '8'){
      melody = 523;        //ド
    }
    tone(pin, melody, duration); //音を出す
    delay(duration);             //音の長さ
  }
}

このスケッチもLesson 14同様にProcessingがなくても動かすことができます。

Aruduinoのシリアルモニタを立ち上げて、「1～8」のデータを入力して送信することで「ドレミファソラシド」の音を出すことが可能です。

本LessonのProcessingスケッチも、シリアルモニタをマウスに置き換えていると考えていただければ理解しやすいと思います。

Processing用　サンプルスケッチ

サンプルスケッチ（コード）を下記に示します。

keyPressedとkeyPressed()関数を使って、描画と押したキボードの文字を送信するスケッチとなります。

キボードの1～8を、鍵盤の「ドレミファソラシド」に割り当てました。

１～８を押すことで、鍵盤の色も変わり押した「ドレミファソラシド」がわかるようになっています。

また、押したときkeyPressed()関数を使用して、keyに格納されている文字をArduinoに送信しています。

//Lesson 17 Processing用スケッチ
//Processingによるピアノ演奏　ドレミファソラシド
//https://omoroya.com/

import processing.serial.*; //Arduinoと通信するためのライブラリの読み込み
Serial port;                //シリアル通信を行うための変数を定義

void setup() {
  size(320, 120);      //ウィンドウサイズ
  background(0);       //背景の色　黒
  
  println("Available serial ports:");
  printArray(Serial.list());                       //使用できるCOMポートの取得
  port = new Serial(this, Serial.list()[0], 9600); //通信するポートと速度の設定、Arduinoと合わせる必要あり
}

void draw() {
  
  fill(200);             //テキストの色、黒
  textSize(16);          //フォントサイズ
  text("do:1 re:2 mi:3 fa:4 so:5 ra:6 si:7 do:8",  15,  110); //テキスト描画
  
  //押した鍵盤の作成
  if(keyPressed){
    if(key == '1'){
      fill(220);            //四角形の色
      rect(  0, 0, 40, 80); //四角形描画
      fill(0);              //テキストの色、黒
      text("do",  10,  70); //テキスト描画
    }else if(key == '2'){
      fill(200);            //四角形の色
      rect( 40, 0, 40, 80); //四角形描画
      fill(0);              //テキストの色、黒 
      text("re",  50,  70); //テキスト描画
    }else if(key == '3'){
      fill(200);            //四角形の色
      rect( 80, 0, 40, 80); //四角形描画
      fill(0);              //テキストの色、黒 
      text("mi",  90,  70); //テキスト描画
    }else if(key == '4'){
      fill(200);            //四角形の色
      rect(120, 0, 40, 80); //四角形描画
      fill(0);              //テキストの色、黒
      text("fa", 130,  70); //テキスト描画
    }else if(key == '5'){
      fill(200);            //四角形の色
      rect(160, 0, 40, 80); //四角形描画
      fill(0);              //テキストの色、黒 
      text("so", 170,  70); //テキスト描画
    }else if(key == '6'){
      fill(200);            //四角形の色
      rect(200, 0, 40, 80); //四角形描画
      fill(0);              //テキストの色、黒
      text("la", 210,  70); //テキスト描画
    }else if(key == '7'){
      fill(200);            //四角形の色
      rect(240, 0, 40, 80);  //四角形描画
      fill(0);              //テキストの色、黒
      text("si", 250,  70); //テキスト描画
    }else if(key == '8'){
      fill(200);            //四角形の色
      rect(280, 0, 40, 80); //四角形描画
      fill(0);              //テキストの色、黒
      text("do", 290,  70); //テキスト描画
    }
    
  }else{
    //鍵盤作成

    //枠線作り
    stroke(0);          //枠線黒
    fill(255);          //図形白
    rect(  0, 0, 40, 80); //四角形描画
    rect( 40, 0, 40, 80); //四角形描画
    rect( 80, 0, 40, 80); //四角形描画
    rect(120, 0, 40, 80); //四角形描画
    rect(160, 0, 40, 80); //四角形描画
    rect(200, 0, 40, 80); //四角形描画
    rect(240, 0, 40, 80); //四角形描画
    rect(280, 0, 40, 80); //四角形描画
    
    //テキストの作成
    fill(0);             //テキストの色、黒
    textSize(16);          //フォントサイズ
    text("do",  10,  70); //テキスト描画
    text("re",  50,  70); //テキスト描画
    text("mi",  90,  70); //テキスト描画
    text("fa", 130,  70); //テキスト描画
    text("so", 170,  70); //テキスト描画
    text("la", 210,  70); //テキスト描画
    text("si", 250,  70); //テキスト描画
    text("do", 290,  70); //テキスト描画
  }
}

void keyPressed(){
  port.write(key);      //シリアルポートへ押した文字を送信
}

補足事項
通信速度、COMポートの番号はArduinoと合わせる必要があります。
COMポートはAruduinoがつながっている番号であり、デバイスマネージャで確認可能。