レーダー探知機の自作（Processing編）

Processing

みなさん，こんにちは
おかしょです．

レーダー探知機の自作を興味本位で始めて，Processingによる表示のプログラムができたので解説します．

この記事を読むと以下のようなことがわかる・できるようになります．

  • Processingで作れるアニメーション
  • レーダー探知機の見せ方

　

この記事を読む前に

この記事は以下の構想編の続きとなっています．

まだ読んでいない方はそちらを先に読んでおくことをおすすめします．

レーダー探知機（構想編）
みなさん，こんにちはおかしょです． この間，測距モジュールの使い方を確認した時にサーボと組み合わせてレーダーのようなものを作ったらおもしろそうだと思ったので作ってみることにしました． この記事を読むと以下のようなことがわかる・できるようにな...
okasho-engineer.com
2020.09.06

　

アニメーションの構想

アニメーションの構想は前回の記事でも紹介しましたが，少しだけ変えました．

前回の構想段階ではこのようなアニメーションを作ろうと考えていました．

物体を検出したら，その後ろにも物体があるかのように色を付ける予定でした．

これをこのように変更します．

理由としてはそこに物体があったとしてもその奥にも物体があるとは限らないからです．

図では線のように表示されていますが，実際のアニメーションでは点がつながって線に見えるようにします．

　

Processingのプログラム

以上のような構想のアニメーションを実現するプログラムは以下のようになります．

float W, H;

int angle = 0;
int ch = 1;
float L = 0;
float[] Point = new float[181];

void setup() {
  size(displayWidth,displayHeight);  // windowのサイズを画面いっぱいにする
  background(25);  // 背景の色指定 黒に指定
  W = displayWidth/33.87;    // 位置を調整しやすいようにPowerPointの単位に合わせる
  H = displayHeight/19.08;
}

void draw() {
  pushMatrix();  // 現在の座標系を保存
  translate(displayWidth/2, H*15);  // 円の中心に原点を移動
  noFill();  // 塗りつぶしなし
  strokeWeight(1);  // 線の幅は1
  stroke(157, 195, 230);  // 線の色設定
  ellipse(0, 0, H*13, H*13);  // 25cmを示す円
  ellipse(0, 0, H*26, H*26);  // 50cmを示す円
  fill(49, 235, 255);  // ロボットの位置を表すマークの設定
  noStroke();
  triangle(0, 0, 0, -H*1, -W*0.5, H*0.25);  // ロボットの位置を表示
  triangle(0, 0, 0, -H*1, W*0.5, H*0.25);
  popMatrix();  // 原点を元に戻す
  noStroke();
  fill(157, 195, 230);  // 文字の色設定
  textAlign(CENTER, TOP);  // 文字を中心のトップにそろえる
  textSize(18);
  text("50", displayWidth/2, H*2);
  text("25", displayWidth/2, H*8.5);
  
  pushMatrix();
  if(ch==1)  // レーダーを正回転
  {
    angle = angle+1;
    if(angle>=180)
    {
      ch = 0;
    }
  }
  else  // レーダーを負回転
  {
    angle = angle-1;
    if(angle<=0)
    {
      ch = 1;
    }
  }  
  L = random(0, 80);  // レーダーで取得した距離
  Point[angle] = L;  // 距離と角度を配列として格納
  fill(25, 10);  // 残像の設定
  rectMode(CORNER);
  rect(0, 0, displayWidth, displayHeight);
  pushMatrix();  // 現在の座標系を保存
  translate(displayWidth/2, H*15);  // レーダーの中心に原点を移動
  rotate(angle*PI/180);  // レーダーの向いている角度に合わせる
  fill(49, 235, 255);
  stroke(49, 235, 255);
  triangle(0, 0, -H*13/50*L, 5, -H*13/50*L, -5);  // レーダーの描画
  popMatrix();
  translate(displayWidth/2, H*15);  // 原点を下に戻す
  strokeWeight(10);  // 物体を認識した場所に点を打つ
  for(int i=0; i<181; i++)
  {  
    point(-H*13/50*Point[i], 0);  // 格納したポイントに点を打つ
    rotate(1*PI/180);
  }
  popMatrix();  // 原点を元に戻す
}

今回はアニメーションを作るだけなので，Arduinoとの通信は行っていません．

レーダーからのデータは52行目でランダム関数を使って格納しています．

このプログラムの解説は以下で行います．

　

プログラムの流れ

プログラムの全体的な流れは以下のようになります．

  1. ウィンドウの表示
  2. メモリとなる円やロボットの位置を描く
  3. レーダーから得たデータをもとにレーダーや物体の位置を描画

　

ウィンドウの表示

最初の「ウィンドウの表示」はsetup関数内で行います．

setup関数内ではさらに背景の設定も行っています．

また，先程示した構想図はPowerPointで作成しています．私はProcessingでアニメーションを作る時はいつもPowerPointを利用して，図形の位置などを決めています．

PowerPointを使用すると図形の位置がスライド上のどのくらいなのかがわかります．

スライドの大きさとウィンドウのサイズを使えば，描画したい図形をウィンドウのどこに設定すればいいのかを求めることができます．

この時のスライドの大きさとウィンドウの大きさの比を求めているのがsetup関数の最後にある’H’と’W’です．

この‘H’と’W’にPowerPointで求められた図形の位置をかけることで，図形をPowerPointと同じ位置に描画できます．

　

メモリとなる円やロボットの位置を描く

ここではレーダーから得られたデータがどのくらいの値なのかをわかるようにメモリを描きます．

そのために，最初にProcessingの原点をレーダーを搭載したロボットの位置に移動させます．

今回は180°回転するサーボを使用するので，ロボットの後ろは必要ありません．そのため，17行目で原点をウィンドの真ん中やや下よりに移動させています．

そこを中心とした円を描いて，円の上側の内部にメモリの値を記入しました．

さらに原点にはロボットを表すマークを描画しました．

カーナビなどでよく目にするマークを25行目でtriangleコマンドを2つ使用することで再現しています．

　

レーダーや物体の位置を描画

ここが，今回のプログラムの目玉となっています．

ここから解説するのはプログラムの35行目以降となっています．

アニメーションではレーダを回転させることも表現します

そのため，レーダーの向いている角度を使用したいです．
本来はArduinoと通信してサーボの角度を取得するのですが，ここでは仮に1度ずつサーボの角度が変化した時を想定してプログラミングしていきます．

レーダーの角度を1度ずつ変化させていくのですが，使用するサーボは180°までしか回転しないので0から始まって180度に達したら’ch’という変数を使用して反対に回転するようにしています．

次の52行目ではレーダーから取得した測定値を’L’に格納します．

今回はrandomコマンドを使用して0から80までの変数を入れています．この80という数字は使用している測距モジュールの測定範囲を表しています．最小値は0ではないのですが，このように乱数を発生させています．

53行目では測定値を配列’Point’に格納しています．

このとき，要素番号にはレーダーの向きを表すangleを使用しています．
このようにすることで，どの向きにどのくらいの距離に物体があるのかが判別できます．

54行目から56行目では残像の設定をしています．

レーダーを描いたときにただの線が回転しているだけではつまらないと思ったので，残像が残るようにしました．

残像を残すにはwindowを透明度を高くした背景と同じ色で塗りつぶすことによって可能になります．

57行目からはレーダーを描いていきます．

62行目にあるように，レーダーはただの直線だとレーダーっぽくないので三角形で表しました．

64行目からは物体の位置を表す点を描画していきます．

物体の位置は53行目で’Point’に格納していました．これをfor文を使ってすべての要素に格納されたデータをプロットしていきます．

このようにすることで，次に同じ向きで新たなデータが格納されるまで物体の位置を表示し続けることができます．

　

実行結果

以上のプログラムを実行した結果，以下のようなアニメーションが表示されます．

randomコマンドを使用しているのでレーダー探知機のようには見えにくいかもしれませんが，レーダーから得られた距離のデータを使って物体の位置を表す点も正確に打つことができています．

　

まとめ

この記事ではレーダー探知機をアニメーションで表示するためのProcessingのプログラムを解説しました．

このプログラムを使ってArduinoと通信すれば，レーダー探知機は完成するはずです．

Twitterでは記事の更新情報や活動の進捗などをつぶやいているので気が向いたらフォローしてください．

それでは最後まで読んでいただきありがとうございました．

コメント

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