[編集モード] 紙吹雪舞う🎊

アドベントカレンダー2021最終日。ミッションコンプリート（？）を祝う。あるいは、描画変換マトリクス設定を使ってみる。

＃設定
変数 [キャンバス幅,キャンバス高さ,背景色]＝[描画中キャンバス["width"],描画中キャンバス["height"],"#113333"]。
変数 [紙片幅,紙片高さ,表示色,角度,落下速度,風力]＝[8,8,金色,0,1,0]
変数 [伸縮ｘ,傾斜ｙ,傾斜ｘ,伸縮ｙ,起点ｘ,起点ｙ]＝[1,0,0,1,0,0]
変数 [描画ｘ,描画ｙ]＝[0,0]

変数 紙片データ＝空配列。
変数 [紙片枚数,最大紙片幅,最小紙片幅]＝[キャンバス幅*キャンバス高さ/2000,12,6]
変数 [最大落下速度,最小落下速度]＝[30,20]
変数 [最大風速,最小風速]＝[0.5,-0.5]
変数 [最大角度加算,最小角度加算]＝[15,5]
変数 紙色配列＝["#ff3333","#ff6699","#ff6600","#ffcc00","#ffff66","#99ff66","#33ffff","#33ccff","#9966ff","#ff66ff","#cccccc"]

＃紙片を作成
紙片データ作成。
●紙片データ作成
    紙片データ＝空配列。
    紙片枚数回
        紙片作成。
        起点ｘ＝キャンバス幅の乱数。
        起点ｙ＝キャンバス高さの乱数。
        落下速度＝(最小落下速度＋(最大落下速度-最小落下速度+1の乱数))/10。
        角度＝360の乱数。
        風力＝(最小風速＋(最大風速-最小風速+1の乱数))
        紙片データ[回数-1]＝{"幅": 紙片幅, "高": 紙片高, "ｘ":起点ｘ, "ｙ":起点ｙ, "色":表示色, "落下速度": 落下速度, "角度":角度, "風力":風力}
    ここまで。
ここまで。
●紙片作成
    紙片幅＝最小紙片幅＋(最大紙片幅-最小紙片幅+1の乱数)。
    紙片高＝紙片幅。
    表示色＝紙色配列[(紙色配列の要素数)の乱数]。
ここまで。

＃紙吹雪描画
「紙吹雪」を画面更新時実行。
●紙吹雪
    背景描画。
    紙片データを反復
        オンでデータ反映。
        起点ｘ＝起点ｘ＋風力。
        起点ｙ＝起点ｙ＋落下速度。

角度加算＝最小角度加算＋(最大角度加算-最小角度加算+1の乱数)
        もし、対象キー%2＝１ならば、
            角度＝角度＋角度加算。
        違えば、
            角度＝角度-角度加算。
        ここまで。
        sin＝SIN((角度をラジアン変換))。
        cos＝COS((角度をラジアン変換))。

伸縮ｘ＝0.3。傾斜ｙ＝cos。傾斜ｘ＝sin。伸縮ｙ＝0.1。
        描画ｘ＝-1*紙片幅/2。描画ｙ＝-1*紙片幅。
        #---
        キャンバス状態保存。
        表示色に塗り色設定。空に線色設定。
        [伸縮ｘ,傾斜ｙ,傾斜ｘ,伸縮ｙ,起点ｘ,起点ｙ]だけ描画変換マトリクス設定。
        [描画ｘ,描画ｙ,紙片幅,紙片高]へ四角描画。
        キャンバス状態復元。
        #---
        もし、起点ｙ＞キャンバス高さならば、
            起点ｙ＝０。起点ｘ＝キャンバス幅の乱数。
            紙片作成。
        ここまで。
        もし、起点ｘ＞キャンバス幅ならば、
            起点ｘ＝０。起点ｙ＝キャンバス高さの乱数。
            紙片作成。
        違えば、もし、起点ｘ＜０ならば、
            起点ｘ＝キャンバス幅。起点ｙ＝キャンバス高さの乱数。
            紙片作成。
        ここまで。
        オフでデータ反映。
    ここまで。
    「紙吹雪」を画面更新時実行。
ここまで。

#-----------------------------------------------
＃UI作成
!『https://n3s.nadesi.com/plain/751.nako3』を取り込む。
「幅」のラベル作成。
幅エディタ＝キャンバス幅のエディタ作成。
幅エディタの「幅」に「50px」をDOMスタイル設定。
「× 高」のラベル作成。
高エディタ＝キャンバス高のエディタ作成。
高エディタの「幅」に「50px」をDOMスタイル設定。
「 ｜ 背景色：」のラベル作成。
背景色エディタ＝背景色の色入力欄作成。
改行作成。
「紙色：」のラベル作成。
紙色エディタ＝紙色配列のエディタ作成。
改行作成。
実行ボタン＝「条件を変えて再実行」のボタン作成。
実行ボタンをクリックした時には
    キャンバス幅＝幅エディタのテキスト取得。
    描画中キャンバスの「width」にキャンバス幅をDOM属性設定。
    キャンバス高＝高エディタのテキスト取得。
    描画中キャンバスの「height」にキャンバス高をDOM属性設定。
    紙片枚数＝キャンバス幅*キャンバス高さ/2000。
    背景色＝背景色エディタ["value"]。
    紙色配列＝紙色エディタのテキスト取得して、「,」で区切る。
    紙片データ作成。
ここまで。

●背景描画
    もし、(背景色＝空)または(背景色＝未定義)ならば、
        全描画クリア。
    違えば、
        背景色に塗り色設定。
        [0,0,キャンバス幅,キャンバス高さ]へ四角描画。
    ここまで。
ここまで。

＃１枚の場合で作ったプログラムで動かすため
●(Aで)データ反映
    もし、A=オンならば、
        紙片幅＝対象["幅"]。
        紙片高＝対象["高"]。
        起点ｘ＝対象["ｘ"]。
        起点ｙ＝対象["ｙ"]。
        表示色＝対象["色"]。
        落下速度＝対象["落下速度"]。
        角度＝対象["角度"]。 
        風力＝対象["風力"]。 
    違えば、
        対象["幅"]＝紙片幅。
        対象["高"]＝紙片高。
        対象["ｘ"]＝起点ｘ。
        対象["ｙ"]＝起点ｙ。
        対象["色"]＝表示色。
        対象["落下速度"]＝落下速度。
        対象["角度"]＝角度。
        対象["風力"]＝風力。
    ここまで。
ここまで。

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

🍯 なでしこ3貯蔵庫

[編集モード] 紙吹雪舞う🎊

素材のアップロード