Arduinoと戯れてみる!

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

Processing-lesson17-00Processing入門編
スポンサーリンク
Processing 入門
Lesson 17
【圧電スピーカーと電子ピアノ】

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

 

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

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

Processingでは鍵盤を作成。

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

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

 

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

 

 

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

 

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

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

 

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

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

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

 

スポンサーリンク

はじめに

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

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

 

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

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

 

Lesson 17 目標

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

1.簡易的な電子ピアノを作って遊ぶ!
2.ArduinoとProcessingの通信方法を理解
3.圧電スピーカー(passive buzzer)の復習

 

本Lessonの学習に必要な物

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

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

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

 

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

Arduino-lesson07-01

 

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

 

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

 

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

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

 

実践 回路作成

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

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

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

 

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

 

回路図

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

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

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

 

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

Processing-lesson17-01

 

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

Processing-lesson17-02

 

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

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

 

接続

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

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

 

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

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

 

Arduino-lesson07-02

 

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()バイト、文字、整数、バイト[]、文字列をシリアルポートに書き込みます。

 

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

 

実践 スケッチ作成

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

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

 

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

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

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

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

 

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

  • 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を、鍵盤の「ドレミファソラシド」に割り当てました。

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がつながっている番号であり、デバイスマネージャで確認可能

 

動作確認

では、さっそく動作を確認していきます。

  1. Arduinoのスケッチ書き込み
  2. Processingスケッチ実行
  3. キーボードの1~8を押してみる
  4. 1~8が「ドレミファソラシド」になっている

 

Processingのウィンドウ画面が現れ、キーボードがあらわれます。

1~8を押すことで、ドレミファソラシドの鍵盤が押されたのがわかるようにしています。

 

下記に動作させているときの動作写真を抜粋してのせておきます。

音はのせられませんが・・・

キーボードRGBダイオード
何も押していないProcessing-lesson17-03
1を押す:doProcessing-lesson17-04
2を押す:reProcessing-lesson17-05

「ミ」以降も同じように押した場所の色が変わる動作となります。

 

簡単ですが、電子ピアノの完成です!

ぜひ、メロディを奏でてみましょう!

 

まとめ

Processing 入門 Lesson 17【圧電スピーカ-と電子ピアノ】はここまで。

本Lessonでは以下の3つについて目標としました。

1.簡易的な電子ピアノを作って遊ぶ!
2.ArduinoとProcessingの通信方法を理解
3.圧電スピーカー(passive buzzer)の復習

 

Processingのスケッチにもだいぶ慣れてきました。

簡易的ではありますが、電子ピアノが作れました!

Processingに慣れると、色々と面白いことがビジュアルで表現できます。

 

次回Lesson 18以降も引き続きArduinoとProcessingについて学習していきます。

Processing 入門 Lesson 18 【サーボモーターとコントローラー】
Lesson 18は、【サーボモーターとコントローラー】です。Processingでコントローラーを作成。Arduino側はサーボモーターを制御。Processingで作ったコントローラーとサーボモーターを連携させる学習となります。そう、「…

 

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をコピーしました