6/21(月)0:00から6/22(火)23:59「プライムデー」開催のご案内
\Amazon プライムデー/

Amazon最大のまとめ買い到来!
6月21日(月)00:00 ~ 6月22日(火)23:59

プライムデー解説記事!

Processing 入門 Lesson 20 【ポテンショメータ】

Processing-lesson20-00Processing入門編
スポンサーリンク
Processing 入門
Lesson 20
【ポテンショメータ】

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

ProcessingのLesson、久しぶりに更新。

最近、記事を更新する時間が限られている管理人にです!

 

Lesson 19は【スイッチとLED】ということでスイッチのON、OFFをProcessing上で表現するスケッチを描きました。

また、Lesson 19からは「Arduino」 → 「Processing」へと情報の流れもこれまでと逆パターン。

 

Lesson 20で使用する電子部品は【ポテンショメータ】です。

本LessonではArduino入門編で遊んだ「ポテンショメータ」を思い出しながら学習です。
※ポテンショメータ:可変抵抗器のことです。

本Lessonも情報の流れは、「Arduino」 → 「Processing」

 

Arduinoで取得したデータをProcessingで処理する学習。

前回同様、理解しやすいように使用する電子部品は少なくします。

ポテンショメータ」のみを使った回路で学習していきましょう。

 

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

 

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

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

 

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

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

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

 

スポンサーリンク

はじめに

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

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

 

本Lessonではポテンショメータの抵抗変化をProcessingに表現させます。

その、ポテンショメータの抵抗値の情報をArduinoからパソコンへ送信。

Processingで処理して画像で表現するということになります。

「ポテンショメータって何?」という場合は、下記を読んでおくと理解しやすいはずです。

 

Lesson 20 目標

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

1.Arduino → Processingの通信方法を理解
2.ポテンショメータの復習

 

本Lessonの学習に必要な物

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

 

ポテンショメータはお好みで。

本Lessonでは最大値が10Kohmのポテンショメータを使います。

 

可変抵抗器、半固定抵抗器など用途にあわせてご購入ください。

 

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

 

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

 

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

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

 

実践 回路作成

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

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

最後にスケッチ(コード)を描きましょう。

ポテンショメータの抵抗値をPC上で表現していきます。

 

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

 

回路図

ポテンショメータ(10Kohm)」のみの回路となります。

Arduino 入門 Lesson 12 【ポテンショメータ編】と同じ回路です。

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

 

回路図がこちら。

Arduino-lesson12-01

 

 

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

Arduino-lesson12-02

 

 

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

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

 

接続

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

部品はポテンショメータ(10Kohm)のみのため簡単に接続できます。

 

使用するポートは、Analog IOの「A3」電源の「5V」「GND」です。

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

Arduino-lesson12-06

 

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のデータのやり取りは、「Arduino」 → 「Processing」

Lesson 18までとは逆方向、Lesson 19とは同じ方向になります。

 

流れとしては以下となります。

  1. ポテンショメータの値をArduinoのアナログピンで読み取る。
  2. 読み取った値をパソコン側へ伝える。(送信)
  3. 受け取ったデータを抵抗値に変換。
  4. Processingウィンドウで抵抗値がわかるようにグラフィックを描画。

といった動作!

 

Arduino側は、ポテンショメータの値を1バイトの数値としてパソコンへ送信。

  • A3番ピンで読み取ったデータをSerial.write()関数で送信
  • 1バイト送信のため4で割って送るのがミソ

 

Processing側のスケッチは送られてきたデータによってグラフィックを描画。

  • 送られてきたデータをread()関数で読み込み
  • データを256で割って10を掛けることでKohmに変換
  • 数値と円のグラフィックを表示

 

Arduino用 サンプルスケッチ

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

 

アナログ入力であるA3番ピンを使用します。

//Lesson 20 Processing制御用のArduino用スケッチ
//Processingによるポテンショメータの抵抗値 グラフィック描画
//https://omoroya.com/

const int analogPin =3;  //アナログ入力ピンを3番に設定
int val = 0;             //読み取り値の変数設定

void setup() {
  Serial.begin(9600);    //シリアル通信のデータ転送レートを9600bpsで指定。bpsはビット/秒。
}

void loop(){
  val = analogRead( analogPin ); //ピンの値を読み取り
  Serial.write( val/4 );         //1バイトのデータに変換するため4で割る
  delay(100);                    //100m秒(0.1秒)ごとに表示させるための遅延
}

 

このスケッチはProcessingがなくても動作を確認することができます。

Aruduinoのシリアルモニタを立ち上げてみてください。

ポテンショメータを動かす度にシリアルモニタに「何かが」が表示されるはずです。

ただし、シリアルモニタから送信するデータはASCIIコードであることに注意。

シリアルモニタに表示されるデータをProcessing側へ送っているということです。

 

Processing用 サンプルスケッチ

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

このスケッチで重要なところは、抵抗変換の式ぐらいでしょうか。

Kohm換算しています。

float型で計算していることに注意してください。

r_convert = float(val) / 256.0f * 10.0f;

 

width、height
ウィンドサイズのサイズ値が入っているということも覚えておくと図形描画に便利!

 

//Lesson 20 Processing用スケッチ
//Processingによるポテンショメータの抵抗値 グラフィック描画
//https://omoroya.com/

import processing.serial.*; //Arduinoと通信するためのライブラリの読み込み
Serial myPort;              //シリアル通信を行うための変数を定義
PFont  myFont;              //画面に表示するフォントの指定

int val = 0;                //グローバル変数の設定
float r_convert=0.0f;       //グローバル変数の設定
int w = 350, h = 350;       //円のサイズ

void setup() {
  size(400, 400);                         //ウィンドウサイズ
  background(200);                        //背景の色
  
  println("Available serial ports:");
  printArray(Serial.list());              //使用できるCOMポートの取得
  //printArray(PFont.list());             //使用できるFontの表示、わからないときに使用
  
  myPort = new Serial(this, Serial.list()[0], 9600); //通信するポートと速度の設定、Arduinoと合わせる必要あり
  myFont = createFont("Meiryo UI Bold", 100);        //Font指定、サイズ100pt
  textFont(myFont);
  
  textAlign(CENTER);                   //文字揃え、中心
  stroke(0);                           //線の色を黒
  fill(0, 0, 255);                     //塗りつぶし色を青
  myPort.clear();                      //受信データをクリア
  ellipse(width/2, height/2, w, h);    //円を表示
  fill(255, 255, 0);                   //文字を黄色
  String sval = nf(val, 2, 2);         //表示桁数の制御
  textSize(100);                       //テキストサイズ100pt
  text(sval, width/2, height/2+50);    //テキストを中心に表示
  textSize(24);                        //テキストサイズ24pt
  text("Kohm", width/2, height/2+110); //テキストを中心に表示
}

void draw() {
  if(myPort.available() > 0){                //データがあるかないかの判断
    val = myPort.read();                     //データ読み込み
    r_convert = float(val) / 256.0f * 10.0f; //読み取った値をKohm抵抗に変換、floatで計算
    String sr_convert = nf(r_convert, 2, 2); //表示桁数の制御
    fill(0, 0, 255 - val);                   //抵抗値増 青色 -> 黒色へ
    ellipse(width/2, height/2, w, h);        //円を表示
    fill(255, 255, 0);                       //文字を黄色
    textSize(100);                           //テキストサイズ100pt
    text(sr_convert, width/2, height/2+50);  //テキストを中心に表示
    textSize(24);                            //テキストサイズ24pt
    text("Kohm", width/2, height/2+110);     //テキストを中心に表示
  }
}

 

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

 

動作確認

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

  1. Arduinoへスケッチ書き込み
  2. Processingスケッチ実行
  3. ポテンショメータを動かしてみる
  4. ポテンショメータの動きにあわせて円の色と抵抗値が表示される

 

Processingのウィンドウ画面にがあわわれすます。

ポテンショメータを動かすと下記のように動作します。

  • 抵抗値が00.00の場合
  • ポテンショメータを回して抵抗値を大きくしていくと、だんだんと●に近づく
  • ポテンショメータを回して抵抗値を小さくしていくと、だんだんとに近づく

 

本Lessonではキャリブレーションをしていないため抵抗値は多少のずれが生じます。
精度を出したい場合はArduinoの電圧値など測定し、計算結果を補正してください。
最大値が10kohmになっていません。
Arduinoの電圧値が実際は5Vピッタリではないためであり本来は調整が必要です。

 

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

LEDProcessingウィンドウ
0Kohmポテンショメータ最小Processing-lesson20-01
5kohmポテンショメータ中間Processing-lesson20-02
10kohmポテンショメータ最大Processing-lesson20-03

 

本Lessonでも、データ方向「Arduino」 → 「Processing」を理解するために簡単な電子部品で遊んでみました。

次回も、「Arduino」 → 「Processing」の理解を深めていきます。

 

まとめ

Processing 入門 Lesson 20【ポテンショメータ】はここまで。

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

1.Arduino → Processingの通信方法を理解
2.ポテンショメータの復習

 

これまでと同様

本Lessonでも、これまで使っていない関数を少し使っています。

知らない関数も調べれば、ネットにごろごろ説明が転がっています。

便利な世の中です。

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

 

次回Lesson 21以降も引き続き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%

さらに、初回チャージで2000ポイントもらえるキャンペーンも実施中!
※いつもは1000ポイント、今なら2000ポイントです!

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

 

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

コメント

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