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

[編集モード] だるまさんがころんだ

カメラを使って「だるまさんがころんだ」をします。「だるまさんがころん…」の間はカメラの前でいっぱい動き、最後の「だ」で動きを止める。日本語プログラミング言語「なでしこ」 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"]で戻る。
ここまで。
#-----------------------------------------------

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

🍯 プログラム貯蔵庫

[編集モード] だるまさんがころんだ

素材のアップロード