[ 📌文法] [ 🎨命令一覧]

[編集モード] カメラを使って簡単な動体検知📷️

フレーム間差分法でごく簡単な動体検知を試す。日本語プログラミング言語「なでしこ」 Advent Calendar 2025、10日目の記事用。

#----- 設定 ---------------
# 動体検知の設定項目
精度＝30。
感度＝80。
閾値＝20。

# 開閉できる設定画面
母艦＝DOM親要素。
設定画面＝「DETAILS」のDOM部品作成。
それ.open＝オン。
それにDOM親要素設定。
「SUMMARY」のDOM部品作成。
それに「設定」をテキスト設定。
母艦にDOM親要素設定。

# カメラ終了のボタン
改行作成。
カメラボタン＝「カメラ終了」のボタン作成。
改行作成。

#----- カメラを起動 ---------------
# まずカメラを表示するビデオ要素を作成する。
ビデオ＝ビデオ作成。

# 作成したビデオ要素にカメラを起動。
ビデオにカメラ起動。

# カメラ終了ボタンのイベント
カメラボタンのクリックした時には、ビデオのカメラ終了。。。

#----- フレームレートごとに画像比較 ---------------
# フレームレート取得
カメラ設定＝ビデオのカメラ設定取得。
フレームレート＝カメラ設定.frameRate。

# ビデオの幅と高さ取得
ビデオ幅＝ビデオ.幅属性。
ビデオ高さ＝ビデオ.高さ属性。

# 標準キャンバスに動いた点をモニターする
モニター＝描画中キャンバス。
モニター.幅属性＝ビデオ幅/2。
モニター.高さ属性＝ビデオ高さ/2。

# 動いたフレームを表示するキャンバス
撮影用＝[ビデオ幅,ビデオ高さ]のキャンバス作成。

# フレームごと交互に描画し前後を比較する2枚のキャンバス
比較用＝空配列。
２回:
    比較用[回数-1]＝[1,1]のキャンバス作成。
    比較用[回数-1]の「visibility」に「hidden」をDOMスタイル設定。

# 比較した情報を描き出すキャンバス
処理用＝[1,1]のキャンバス作成。
処理用.可視＝オフ。

# 音を鳴らす
ピ＝「https://n3s.nadesi.com/image.php?f=213.mp3」をオーディオ開く。

#--- メイン ---
C＝-1。比較データ＝空配列。
(1/フレームレート)秒タイマー開始した時には（タイマーID）
    Cを1増やす。
    比較データ[C%2]＝空配列。
    比較用[C%2]へ描画開始。
    ビデオの[0,0,ビデオ幅,ビデオ高さ]を[0,0,ビデオ幅*精度,ビデオ高さ*精度]へ画像部分描画。
    色データ＝[0,0,ビデオ幅*精度,ビデオ高さ*精度]の色データ取得。
    モニターへ描画開始。
    ビデオの[0,0,ビデオ幅,ビデオ高さ]を[0,0,ビデオ幅/2,ビデオ高さ/2]へ画像部分描画。
    処理用へ描画開始。全描画クリア。赤色に塗り色設定。空に線色設定。
    I＝0。
    Nを0から色データの要素数-1まで4ずつ増やし繰り返す。
        色平均＝(色データ[N] + 色データ[N+1] + 色データ[N+2])/3。
        比較データ[C%2]に色平均を配列追加。
        もし、C>0ならば:     #初回は前データがないので比較しない
            もし、(((比較データ[0][N/4])-(比較データ[1][N/4]))の絶対値)＞感度ならば:# ピクセルが動いたと判定
                Iを1増やす。
                # 処理用に点を打つ
                x＝N/4%(処理用.幅属性)。
                y＝N/4/(処理用.幅属性)を切り捨て。
                [x,y,1,1]へ四角描画。
    ここまで。
    もし、C>10ならば:     # 起動時のちらつき回避で少し待ってみる
        モニターへ描画開始。
        [0,0,ビデオ幅/2,ビデオ高さ/2]へ処理用の[0,0,ビデオ幅*精度,ビデオ高さ*精度]を画像部分描画。
        もしI>閾値ならば:
            ピをオーディオ再生。
            撮影用へ描画開始。
            [0,0]へビデオを画像描画。
ここまで。

#----- 設定変更用のUIを設定画面に追加する ---------------
改行作成。
設定画面にDOM親部品設定。
設定項目＝{精度:精度,感度:感度,閾値:閾値}
設定タイトル＝空辞書。設定バー＝空辞書。設定確認は空辞書。
設定項目を反復:
    設定タイトル[対象キー]＝対象キー＆「：」のラベル作成。
    設定バー[対象キー]＝[0,100,対象]の値指定バー作成。
    設定確認[対象キー]＝対象のエディタ作成。
    改行作成。
    設定バー[対象キー]の「幅」に「300px」をDOMスタイル設定。
    設定バー[対象キー]に対象キーをポケット設定。
    設定確認[対象キー]の「幅」に「50px」をDOMスタイル設定。
    設定確認[対象キー]の「行揃え」に「右」をDOMスタイル設定。
    設定確認[対象キー]の「無効化」にオンをDOM属性設定。
    設定バー[対象キー]を変更した時には:
        No＝対象のポケット取得。
        対象のテキスト取得。
        設定確認[No]にそれをテキスト設定。
        設定反映。

設定反映。
●設定反映
    精度＝(設定バー.精度のテキスト取得)/100。
    感度＝255/100*(100-(設定バー.感度のテキスト取得))+1を切り捨て。
    閾値＝ビデオ幅*ビデオ高さ*精度^2/1000*(設定バー.閾値のテキスト取得)を切り捨て。
    ２回:
        比較用[回数-1]の「幅」にビデオ幅*精度をDOM属性設定。
        比較用[回数-1]の「高さ」にビデオ高さ*精度をDOM属性設定。
    処理用の「幅」にビデオ幅*精度をDOM属性設定。
    処理用の「高さ」にビデオ高さ*精度をDOM属性設定。
    C=-1
ここまで。
#-----------------------------------------------
●(xywhの|xywhを)色データ取得
　(描画中コンテキストの「getImageData」をxywhでJSメソッド実行).dataを戻す。
ここまで。
#-----------------------------------------------

デバッグ × キャンバス: 幅 × 高

🍯 プログラム貯蔵庫

[編集モード] カメラを使って簡単な動体検知📷️

素材のアップロード