Q&A
現象が再現され、かつ実行可能なコードを載せたほうがいいと思います。
～.play();が二重ループの底にありますが、ひっきりなしに再生されているということはないのですか？～.play();直近にconsole.log(Date.now());を入れるだけでも再生頻度を簡易的に把握できると思います。
p5.jsで動体検知センサーのようなものを作っています
WEBカメラを使用して、WEB上で鑑賞できる作品を創っています。
今回は「動体検知センサー」のようなもので
鑑賞者自身の動きに合わせて「音」を出すことを考えています。
鑑賞者が少しでも動くと「ピッ」と音（sample.mp3）を鳴らし
動きを止めると鳴らさないものを作りたい。
ご教授の程、宜しくお願い致します。
発生している問題
未完成の「動体検知センサー」にある「大きな黒丸」は 鑑賞者の動きに反応しているので問題はないと思います。 問題は「音」です。 ピッ〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜！ という連続音ではなく、「ピッ」「ピッ」「ピッ」と反応させたい。 おそらく、音（ピッ）の再生がループになっているのではないか？ と考え、9日以上いろいろとやっているのですが解決しません。
該当のソースコード
html
1<!doctype html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>sensor</title> 6 <link rel="stylesheet" href="style.css" type="text/css" /> 7 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js"></script> 8 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.dom.min.js"></script> 9 <script src="https://p5js.jp/assets/js/p5.sound.min.js"></script> 10<script src="sketch.js"></script> 11</head> 12 13<body> 14<div class="canvas-wrapper"> 15 16<canvas id="canvas1"></canvas> 17<div id="wrapper"> 18<canvas id="pjs" height="100%"></canvas> 19</div> 20 21</div> 22</body> 23</html>
javascript
1let song; 2 3function setup() { 4 createCanvas(windowWidth, windowHeight); 5 img = createCapture(VIDEO); 6 img.hide(); 7 img.size(windowWidth, windowHeight); 8 song = loadSound('button01a.mp3'); 9} 10 11function draw() { 12 background(0); 13 img.loadPixels(); 14 for (var y=250;y<img.height ; y+=500){ 15 for (var x=250;x<img.width; x+=500){ 16 var i = y * width + (img.width-x-1); 17 const darkness = (255 - img.pixels[i * 4]) / 255; 18 const radius = 500 * darkness; 19 song.play(); 20 fill(255); 21 ellipse(x, y, radius, radius); 22 } 23 } 24}
2021/4/12に追記したソースコード
css
1.canvas-wrapper { 2 position: relative; 3} 4.canvas-wrapper canvas { 5 position: absolute; 6 bottom: 0; 7 left: 0; 8}
sample.mp3はこちらの無料効果音を借りています
sample.mp3
1https://taira-komori.jpn.org/sound/game01/button01a.mp3
試したこと
画面に対して黒丸の数が多いとネット環境が重くなり、PCも重くなりました。
そこで、黒丸の数を減らしてみました（こちから環境では４つ）が、
それでも音は連続しているため、重なって鳴っているのではないということを確認できました。
song.stop();をいろいろな箇所に入れて試しましたが、音がループがされます。
ご教授の程、宜しくお願い致します。
cwi様からのアドバイスで
.play();直下にconsole.log(Date.now());を入れましたが、ひっきりなしに音が再生されています。
cwi様、有難うございます。
.play();直下にconsole.log(Date.now());を入れましたが、まだひっきりなしに音が再生されています。
実行できないのは当方の問題でした。失礼しました。
console～は
> 重なって鳴っているのではないということを確認できました。
とありましたが、本当にそうなのか調べる目的の文です。
呼ばれた時刻をms単位（ただし精度はms単位ではない）でコンソールに出力するだけですから、問題の解消にはなりません。用が済んだら除去してください。
回答3件
0
ベストアンサー
p5.js Web Editor | motion detection demo
上のサンプルプログラムで、動体検知の判断のために使われている方法をそのまま使用して、ご質問のプログラムに動体検知のロジックを組み込んでみました。
ご質問のプログラムでは、描画される円ごとに特定のピクセルのR値を観察して、この値が小さければより大きな円（最大 500 ピクセル）を描き、この値が大きければより小さな円（最小 0 ピクセル）を描いているように私は読みましたが、間違いないでしょうか。
（ちなみに私がいまだに理解できていないのは、この特定のピクセルの位置がどこか（円の中心ではないようですが）と、なぜその位置が選ばれたのかです。）
この、円の大きさを決めるのに使われているピクセルの色の変化の大きさを算出して、この大きさが一定以上であれば動体検知中、一定以下であれば動体を検知していない、と判断します。
円は複数個あるので、円の大きさを決めるピクセルも複数個ありますが、ここではそのうち最大の色の変化があったピクセルのみを取り出して判断に使うことにします。
色の変化の算出方法は、あるピクセルのRGB値を取り出し、このRGB値をそれぞれXYZ値とみなし、3次元空間上に位置付けます。これを現在描画中のフレームでのピクセルと、一つ前のフレームでの同じ位置のピクセルとで、それぞれ行います。この2つの点の3次元空間上での距離を算出し、これをこのピクセルの色の変化の値とします。
おそらく他にも動体検知の考え方や実装の仕方（プログラムへの落とし込み方）はあると思うので、それも知ることができたらなあと思います。私はこの分野は詳しくないので、既存のプログラムをそのまま応用するぐらいしかできません…。
JavaScript
1let img; 2let song; 3let currentColors; // 現在描画中のフレームのピクセルの色 (RGB値) を記録しておく配列 4let prevColors; // 前回の描画フレームのピクセルの色 (RGB値) を記録しておく配列 5let prev_millis; // 前回音を出した時刻（プログラムのスタートからのミリ秒）を記録しておく変数 6let threshold = 15; // 前回のフレームと現在のフレームのピクセルの色の差がこの値以上だったら音を鳴らす 7let sound_interval = 250; // 前回音を出した時刻からの経過ミリ秒がこの値以上だったら音を鳴らす. 音が続けてならないようにする措置. 250は0.25秒 8 9function setup() { 10 createCanvas(windowWidth, windowHeight); 11 //frameRate(1); // 1秒間に何回描画するか（1秒間に何回draw()を実行するか）は変更できる. デフォルトはディスプレイのフレームレート＝通常は60. 24なら映画と同じ. 1にすると1秒に1回なので描画の動きを目で確認できる 12 img = createCapture(VIDEO); 13 img.hide(); 14 img.size(windowWidth, windowHeight); 15 song = loadSound('button01a.mp3'); 16 currentColors = []; // 空の配列で初期化 17 prevColors = []; // 空の配列で初期化 18 prev_millis = millis(); // 現在の時刻で初期化 19} 20 21function draw() { 22 background(0); 23 img.loadPixels(); 24 25 let n = 0; // 描かれた円が何個目かに対応する数字. 1個目の円は0、2個目の円は1、3個目の円は2、… 26 for (let y = 250; y < img.height; y += 500) { 27 for (let x = 250; x < img.width; x += 500) { 28 let i = y * width + (img.width - x - 1); 29 const darkness = (255 - img.pixels[i * 4]) / 255; 30 const radius = 500 * darkness; 31 fill(255); 32 ellipse(x, y, radius, radius); 33 34 // 円の大きさを決めるのに使ったピクセルのRBG値を記録しておく 35 currentColors[n * 4] = img.pixels[i * 4] // R値を配列の n * 4 の位置に記録 36 currentColors[n * 4 + 1] = img.pixels[i * 4 + 1] // B値を配列の n * 4 + 1 の位置に記録 37 currentColors[n * 4 + 2] = img.pixels[i * 4 + 2] // G値を配列の n * 4 + 2 の位置に記録 38 39 n += 1; // ひとつ円を描き終わったら1を足して次の円の描画へ 40 } 41 } 42 43 // 前フレームで記録したピクセルのRBG値と、現在のピクセルのRBG値を比較する 44 if (prevColors) { // 前フレームの値がある時だけ実行. 最初の1回は前フレームの値がないのでエラーになるのを避ける 45 let diffs = []; // 算出した色の変化値を記録する配列. ピクセルは円の数だけあるので配列を使う 46 for (let i = 0; i < n; i += 1) { // 円の数だけ繰り返す 47 let r1 = prevColors[i * 4]; // 前フレームの i 個目の円のピクセルのR値を取り出す 48 let g1 = prevColors[i * 4 + 1]; // 前フレームの i 個目の円のピクセルのG値を取り出す 49 let b1 = prevColors[i * 4 + 2]; // 前フレームの i 個目の円のピクセルのB値を取り出す 50 51 let r2 = currentColors[i * 4]; // 現フレームの i 個目の円のピクセルのR値を取り出す 52 let g2 = currentColors[i * 4 + 1]; // 現フレームの i 個目の円のピクセルのG値を取り出す 53 let b2 = currentColors[i * 4 + 2]; // 現フレームの i 個目の円のピクセルのB値を取り出す 54 55 // r1, g1, b1 をx, y, z に当てはめて、3次元空間内に点を配置。同様にr2, g2, b2 をx, y, z に当てはめて、3次元空間内に点を配置。この2つの点の3次元空間内での距離を算出 56 let diff = dist(r1, g1, b1, r2, g2, b2); 57 diffs.push(diff); // 算出した距離は配列に格納 58 } 59 // forループが終わった時点で、diffsには円の数だけ、算出した距離の値が格納されている 60 61 // Math.max(...diffs) は、diffsに格納されている値のうちの最大の値. この値がthresholdよりも大きければ、音を出す 62 if (Math.max(...diffs) > threshold) { 63 if (millis() - prev_millis > sound_interval) { // 前回音を出した時刻よりsound_intervalミリ秒以上経過していたら、音を出す 64 song.play(); 65 prev_millis = millis(); // 次の比較に備えて音を出した時刻を記録する 66 } 67 } 68 console.log(Math.max(...diffs)); // この値をJavaScriptコンソールで確認してthresholdの値を決める参考にすることができる 69 } 70 prevColors = [...currentColors]; // 次のdraw()ループに備えて現在のピクセル値を記録する 71}
投稿2021/04/17 09:54
総合スコア1195
etherbeg様
サンプルコードをいただきまして、有難うございます。
いただいたサンプルコードをそのままペーストして、ネット上で確認したところ、再生1秒以内に白丸の動きが止まり、音もなりません。
昨日から、再生PCを変えたりファイルの位置を変えたりしているのですが解決しません。
大変お手数ですが、確認していただけないでしょうか？
宜しくお願い致します。
console.log(Math.max(...diffs)); の1文をコメントアウトして実行しないようにしてみるとどうでしょうか？
etherbeg様
console.log(Math.max(...diffs)); の1文をコメントアウトしてみました。
人の動きに反応しているみたいです。
白丸は動きを感知すると静止（固まっているかも？）します。それまでは動いています。
音は鳴りません。
宜しくお願い致します。
etherbeg様
できました。
というより、できておりました。
button01a.mp3とsketch.jsの位置関係がズレていました。
大変、ご迷惑をおかけして申し訳ございませんでした。
有難うございました。
JavaScriptコンソールで何かエラーが出ていないか見てみてはどうでしょうか。
おっと、動きましたか。よかったです。プログラムの内容でわからない所があれば（私のわかる範囲で）お答えしますのでまたお尋ねください。
0
draw関数は通常1秒間に60回実行され、プログラムが停止するまでこれが繰り返されます。
このプログラムではdraw関数の中に二重のforループがあり、外側のforループで描画する円のY座標を、内側のforループでX座標を決め、内側のブロックで円の描画を行っているようですね。
私の環境では円は6つ描画されましたので、内側のブロックは6回実行されていることになります。
song.play();も、この二重のforループの内側のブロックにありますので、円が描画されるのと同時に実行され、それが円の数だけ、繰り返されます。私の環境だと6回です。
これがdraw関数が実行された際の動きで、実際はさらに1秒間に60回繰り返し実行されますので、6x60=360、つまり1秒間に360回、音が再生され、これがプログラムの停止まで続くことになります。
これが音が鳴り続けている理由です。
円は鑑賞者が動かなくても小さな脈動を繰り返しており、鑑賞者が動くと、それにつれてサイズが大きく変動するようですね。ここの描画プログラムのロジックは、私は理解し切れていません。特定の位置のピクセルの色を取得して、その変化に応じて円のサイズも変更するような感じでしょうか？
鑑賞者が少しでも動くと「ピッ」と音（sample.mp3）を鳴らし
動きを止めると鳴らさないものを作りたい
というのがご希望でした。そのためには、「鑑賞者が動いた」「鑑賞者が動き続けている」「鑑賞者が止まった」という判定のためのロジックを、プログラムの中に組み込む必要があります。音の鳴らし方によっては、「鑑賞者が早く動いている」「鑑賞者がゆっくり動いている」といった判定も必要かもしれません。これらはどう音を鳴らしたいかによります。
現在の描画プログラムのロジックから、この判定のために使う情報を取り出すことは可能でしょうか？
例えばになりますが、円ごとのサイズの情報を持っておき、いずれかの円のサイズがxxピクセル以上変化したら、動きを感知したとみなす、といったものが考えられます。
実際はさらにそこに、音を連続的にではなく、間欠的に鳴らすためのロジックも組み込む必要があります。
この部分は、カメラから得られた画像の変化をどう描画の変化に反映させるか、という描画ロジックの根本にも関わるため、ご本人にじっくり考えていただくしかなさそうです。
参考になるかどうか分かりませんが、
p5.js Web Editor | motion detection demo
こちらで見つけたサンプルプログラムに、動きを感知中は1秒間隔で音がなるようコードを追加したものを添付します。追加したコード部分には日本語でコメントをつけています。
JavaScript
1// Learning Processing 2// Daniel Shiffman 3// http://www.learningprocessing.com 4 5// Example 16-13: Simple motion detection 6 7// Variable for capture device 8var video; 9// Previous Frame 10var prevFrame; 11// How different must a pixel be to be a "motion" pixel 12var threshold = 50; 13 14var in_motion = 0; // 動きがあったと判定されたピクセルの数をカウントする変数 15var in_motion_threshold = 100; // 何ピクセル以上に動きがあったら音を出すかの定数（敏感度） 16var prev_millis; // 前回音を鳴らした時の時刻（プログラムの開始からのミリ秒）を記録する変数 17var beep; // ピッという音をロードする変数 18 19function setup() { 20 createCanvas(320, 240); 21 pixelDensity(1); 22 video = createCapture(VIDEO); 23 video.size(width, height); 24 video.hide(); 25 // Create an empty image the same size as the video 26 prevFrame = createImage(video.width, video.height, RGB); 27 28 beep = loadSound('button01a.mp3'); // ピッという音をファイルから読み込む 29 prev_millis = millis(); // プログラムの開始からの現在のミリ秒を取得して初期値として入力 30} 31 32function draw() { 33 image(prevFrame, 0, 0); 34 35 loadPixels(); 36 video.loadPixels(); 37 prevFrame.loadPixels(); 38 39 // Begin loop to walk through every pixel 40 for (var x = 0; x < video.width; x++) { 41 for (var y = 0; y < video.height; y++) { 42 43 // Step 1, what is the location into the array 44 var loc = (x + y * video.width) * 4; 45 46 // Step 2, what is the previous color 47 var r1 = prevFrame.pixels[loc ]; 48 var g1 = prevFrame.pixels[loc + 1]; 49 var b1 = prevFrame.pixels[loc + 2]; 50 51 // Step 3, what is the current color 52 var r2 = video.pixels[loc ]; 53 var g2 = video.pixels[loc + 1]; 54 var b2 = video.pixels[loc + 2]; 55 56 // Step 4, compare colors (previous vs. current) 57 var diff = dist(r1, g1, b1, r2, g2, b2); 58 59 // Step 5, How different are the colors? 60 // If the color at that pixel has changed, then there is motion at that pixel. 61 if (diff > threshold) { 62 // If motion, display black 63 pixels[loc] = 0; 64 pixels[loc+1] = 0; 65 pixels[loc+2] = 0; 66 pixels[loc+3] = 255; 67 in_motion += 1; // このピクセルは変化があったとみなされたので1を足す 68 } else { 69 // If not, display white 70 pixels[loc] = 255; 71 pixels[loc+1] = 255; 72 pixels[loc+2] = 255; 73 pixels[loc+3] = 255; 74 } 75 } 76 } 77 updatePixels(); 78 79 // 変化があったとみなされたピクセルの合計が in_motion_threshold 定数以上だったら 80 if (in_motion > in_motion_threshold) { 81 // かつ、前回の発音から1秒以上経過していたら 82 if (millis() - prev_millis > 1000) { 83 beep.play(); // 音を出す 84 prev_millis = millis(); // 音を出した時刻を記録する 85 } 86 } 87 88 // Save frame for the next cycle 89 //if (video.canvas) { 90 prevFrame.copy(video, 0, 0, video.width, video.height, 0, 0, video.width, video.height); // Before we read the new frame, we always save the previous frame for comparison! 91 //} 92 93 in_motion = 0; // 次のループへ行く前に、動きがあったピクセル数を記録する変数をリセット 94}
投稿2021/04/12 04:53
総合スコア1195
0
答えではないのですが、多少なりとも参考になればと思い、書き込ませていただきます。
以下ではp5.jsではなくネイティブ (Java) のProcessingで試しています。
動体検知センサーについては私の環境にはありませんし、またセンサーからどのような形で信号を受け取っているのかもよく分かりませんので、ここではmouseMoved()関数で代替することにします。
ウィンドウ上でマウスを動かしている時のみ、音が再生されるようにする、と問題を置き換えます。
https://processing.org/reference/mouseMoved_.html
動き出すと音が再生される、動きが止まると再生が止まる、のはいいとして、動いてる間どのように再生されるのか？ については必ずしも明瞭ではありません。
等間隔で例えば1秒おきに再生されるのか、それとも動くスピードに応じて再生間隔も変わるのか？
ここでは1秒間隔で再生されるものとしておきます。
まず、ここ
https://processing.org/reference/libraries/sound/SoundFile_play_.html
なども参考にして、次のようなコードで試してみると、
Processing
1import processing.sound.*; 2SoundFile file; 3 4void setup() { 5 size(640, 360); 6 background(255); 7 file = new SoundFile(this, "button01a.mp3"); 8} 9 10void draw() { 11} 12 13void mouseMoved() { 14 file.play(); 15}
マウスが動いている間だけ再生されて、マウスを止めると音も止まるのはいいのですが、連続的に再生されてしまって、インターバルをおいた再生にはなりません。
またこのことから、ループ処理などを書かなくても、draw()だけでプログラムは繰り返し実行されていることが分かりました。
描画に時間処理を持ち込めそうなAPIがないかどうか、いくつかサンプルコードなどを漁ってみるなどしてみると、second関数とmillis関数が見つかりました。この関数が返す値を使って計算と条件分岐を行えば、再生間隔の制御ができそうです。
ここではmillis関数を使うことにします。
https://processing.org/reference/second_.html
https://processing.org/reference/millis_.html
Processing
1import processing.sound.*; 2SoundFile file; 3 4void setup() { 5 size(640, 360); 6 background(0); 7 file = new SoundFile(this, "button01a.mp3"); 8} 9 10int prev_millis = millis(); 11 12void draw() { 13} 14 15void mouseMoved() { 16 if (millis() - prev_millis > 1000) { 17 fill(255); 18 text(millis(), mouseX, mouseY); 19 file.play(); 20 prev_millis = millis(); 21 } 22}
マウスが動き出してから3秒ほど間が開くのが、原因が分からず気になりますが、とりあえずマウスが動いている間だけ、1秒おきに音を鳴らすことができるようになりました。
投稿2021/04/10 15:48
編集2021/04/10 15:51総合スコア1195
etherbegさま
書き込みいただきまして、有難うございます。
いただいたProcessingでのコードを動作まで確認いたしました。
1日かけて、Processingのコードを参考にいろいろとやってみましたが
まだ音が再生され続けて止まりません。
私の環境でもやってみようと、質問に貼られているHTMLをindex.htmlというファイルに転記し、JavaScriptをsketch.jsというファイルに転記し、この二つのファイルを同一フォルダに置いてindex.htmlをGoogle Chromeで開いたのですが、黒い画面がウィンドウに表示されるだけで、それ以外は何も描画されませんし、音も再生されません。PCのカメラの使用は許可してあり、カメラは動作しています。何か見落としているのでしょうか？
etherbegさま
確認しておりますので、お待ちください。
etherbegさま、お待たせしました。
ネット回線次第で、ストレスがあるように感じたので
音のコードを
https://taira-komori.jpn.org/sound/game01/button01a.mp3
から
button01a.mp3
へ変更しました。
またindex.htmlにcssが記載してありましたが、コードを入れておりませんでしたので追記しました。
宜しくお願いいたします。
対応いただきありがとうございました。仮サーバにアクセスして動作を確認しました。ローカル環境では相変わらず動作しませんでしたが、ブラウザの開発者ツールで確認したところ、セキュリティ上の理由（同一生成元ポリシー）により音声ファイルのロードに失敗していることが原因と分かりました。初歩的な確認を怠り、お手を煩わせてしまい失礼しました。
新たに回答を追加してコメントさせていただきました。
etherbegさま
新たに回答をいただきまして、有難うございます。
音の再生回数にはびっくりしております。
もしかして？という予感もありましたが...
いただいたサンプルプログラムのコードを参考に、とにかくやってみます。
ご質問のプログラムの描画部分の理解が少しばかり進んだので（相変わらず根本的なところは理解できてませんが）、ネットのサンプルプログラムの方法をそのまま応用して、音を鳴らすように試してみました。円の描画の際に使っているピクセルのRGB値を前後で比較して、一定以上の変化のあったピクセルが一つでもあったら音が鳴るようにしています。正直、じっとしていても音が鳴ることがあったりと（常に円が脈動していることと関係している？）、あまり出来がいいようには思えないのですが、一応カメラの前で動いていると音が鳴り続けてはくれます。必要でしたらプログラムを回答に追記しますのでコメントしてください。不要ならこのままスルーしていただいて結構です。
etherbegさま
有難うございます。
私の勉強不足で、理解できないことが多いのですが
上記の件、プログラムを参考にさせていたけますか？
よろしくお願いいたします。
あなたの回答
tips
プレビュー
