だるまさんがころんだ 📖

カメラを使って「だるまさんがころんだ」をします。「だるまさんがころん…」の間はカメラの前でいっぱい動き、最後の「だ」で動きを止める。日本語プログラミング言語「なでしこ」 Advent Calendar 2025、17日目の記事用。

プログラム: (→大)
#----- 設定 --------------- 待機中＝0。 移動中＝1。 判定中＝2。 動作モード＝待機中。 移動距離＝0。 タイマーID＝未定義。 # メイン画面 画面幅＝340。 画面高さ＝200。 # 文字 テキスト＝「だるまさんがころんだ」。 描画テキスト＝テキストを文字列分解。 フォントサイズ＝32。 初期文字X＝10。 文字X＝初期文字X。 # ニコ ニコX＝25。 ニコY＝画面高さ-20。 現在位置＝画面幅-20。 線X＝330。 #----- カメラを起動 --------------- ビデオ＝ビデオ作成。 ビデオの「幅」に「0px」をDOMスタイル設定。 ビデオの「高さ」に「0px」をDOMスタイル設定。 ビデオ.可視＝オフ。 ビデオにカメラ起動。 # フレームレート取得 カメラ設定＝ビデオのカメラ設定取得。 フレームレート＝カメラ設定.frameRate。 # ビデオの幅と高さ取得 ビデオ幅＝ビデオ.幅属性。 ビデオ高さ＝ビデオ.高さ属性。 # 動体検知の設定 精度＝30。精度＝精度/100。 感度＝80。感度＝255/100*(100-感度)+1を切り捨て。 閾値＝20。閾値＝ビデオ幅*ビデオ高さ*精度^2/1000*閾値を切り捨て。 #----- UI --------------- # メインキャンバス メイン＝描画中キャンバス。 メイン.幅属性＝画面幅。 メイン.高さ属性＝画面高さ。。 フォントサイズに描画フォント設定。 # 動いた点をモニターするキャンバス 改行作成。 モニター＝[ビデオ幅/2,ビデオ高さ/2]のキャンバス作成。 モニターの「高さ」に「0px」をDOMスタイル設定。 モニター.可視＝オフ。 # 途中終了のボタン 改行作成。 終了ボタン＝「やめる」のボタン作成。 終了ボタンをクリックした時には、終了処理。。。 改行作成。 # フレームごと交互に描画し前後を比較する2枚のキャンバス 比較用＝空配列。 ２回: 比較用[回数-1]＝[ビデオ幅*精度,ビデオ高さ*精度]のキャンバス作成。 比較用[回数-1]の「visibility」に「hidden」をDOMスタイル設定。 比較用[回数-1]の「幅」に「0px」をDOMスタイル設定。 # 比較した情報を描き出すキャンバス 処理用＝[ビデオ幅*精度,ビデオ高さ*精度]のキャンバス作成。 処理用.可視＝オフ。 処理用の「幅」に「0px」をDOMスタイル設定。 # 音を鳴らす ブブー＝「https://n3s.nadesi.com/image.php?f=592.mp3」をオーディオ開く。 おめ＝「https://n3s.nadesi.com/image.php?f=593.mp3」をオーディオ開く。 #----- オープニング --------------- 『「だるまさんがころん…」と言ってる間は カメラの前でいっぱい動いてね。 最後の「だ」で動きを止めてね。 動いてしまったらあなたの負けです。 上手に進んでタッチできたらあなたの勝ち。』と言う。 『では、始めるよ。 はじめのいっぽ！』と言う。 メインへ描画開始。 [現在位置-ニコX,ニコY]へ「😊」を文字描画。 動作モード＝移動中。 前時間＝時間ミリ秒取得。 #----- メイン --------------- C＝-1。比較データ＝空配列。T＝0。 (1/フレームレート)秒タイマー開始した時には（ID） タイマーID＝ID。 # 経過時間を計算 今時間＝時間ミリ秒取得。 経過時間＝(今時間-前時間)/1000。 前時間＝今時間。 Cを1増やす。Tを経過時間だけ増やす。 もし、動作モード＝判定中ならば、 もし、T≧3ならば: メインへ描画開始。T=0。[0,0,画面幅,画面高さ/2]の描画クリア。 文字X＝初期文字X。描画テキスト＝テキストを文字列分解。動作モード＝移動中。 ここまで。 比較データ[C%2]＝空配列。 比較用[C%2]へ描画開始。 ビデオの[0,0,ビデオ幅,ビデオ高さ]を[0,0,ビデオ幅*精度,ビデオ高さ*精度]へ画像部分描画。 色データ＝[0,0,ビデオ幅*精度,ビデオ高さ*精度]の色データ取得。 処理用へ描画開始。全描画クリア。赤色に塗り色設定。空に線色設定。 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,ビデオ幅,ビデオ高さ]を[0,0,ビデオ幅/2,ビデオ高さ/2]へ画像部分描画。 [0,0,ビデオ幅/2,ビデオ高さ/2]へ処理用の[0,0,ビデオ幅*精度,ビデオ高さ*精度]を画像部分描画。 ここまで。 もしI>閾値ならば: もし、動作モード＝判定中ならば、 動作モード＝待機中。 メインへ描画開始。 [現在位置-ニコX,ニコY]へ「😭」を文字描画。 ブブーをオーディオ再生。 モニターの「高さ」に「{ビデオ高さ/2}px」をDOMスタイル設定。 モニター.可視＝オン。 1秒待つ。 「動いた！{改行}あなたの負け～🤪」と言う。 終了処理。 違えば、もし、動作モード＝移動中ならば、 メインへ描画開始。黒色に線色設定。5に線太さ設定。 [0,画面高さ/2,画面幅,画面高さ]の描画クリア。 現在位置を1減らす。 [線X,ニコY]から[現在位置,ニコY]へ線描画。 [現在位置-ニコX,ニコY]へ「😊」を文字描画。 移動距離を１増やす。 もし、移動距離≧300ならば: 動作モード＝待機中。 [現在位置-ニコX,ニコY]へ「😆」を文字描画。 [0,0,画面幅,画面高さ/2]の描画クリア。 [60,60]へ「おめでとう！」を文字描画。 [60,100]へ「🎉🎊🎉🎊」を文字描画。 おめをオーディオ再生。 1秒待つ。 「タッチ！{改行}あなたの勝ち🎉」と言う。 終了処理。 ここまで。 もし、(動作モード＝移動中)かつ(T≧0.5)ならば: メインへ描画開始。 描画テキストの0から1を配列取り出し。 [文字X,60]へそれを文字描画。 文字X＝文字X+(それの文字幅取得)。 T=0。 もし、(描画テキストの要素数)≦0ならば、動作モード＝判定中。 ここまで。 ●終了処理 タイマーIDのタイマー停止。 ビデオのカメラ終了。 終了ボタン.可視＝オフ。 ここまで。 #----------------------------------------------- ●(xywhの|xywhを)色データ取得 　(描画中コンテキストの「getImageData」をxywhでJSメソッド実行).dataを戻す。 ここまで。 #----------------------------------------------- ●(Sの)文字幅取得 　　TM＝Sの文字描画幅取得。 　　TM["width"]で戻る。 ここまで。 ●(Sの)文字高さ取得 　　TM＝Sの文字描画幅取得。 　　TM["actualBoundingBoxAscent"]+TM["actualBoundingBoxDescent"]で戻る。 ここまで。 #-----------------------------------------------