紙吹雪舞う🎊 📖

アドベントカレンダー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=オンならば、 紙片幅＝対象["幅"]。 紙片高＝対象["高"]。 起点ｘ＝対象["ｘ"]。 起点ｙ＝対象["ｙ"]。 表示色＝対象["色"]。 落下速度＝対象["落下速度"]。 角度＝対象["角度"]。 風力＝対象["風力"]。 違えば、 対象["幅"]＝紙片幅。 対象["高"]＝紙片高。 対象["ｘ"]＝起点ｘ。 対象["ｙ"]＝起点ｙ。 対象["色"]＝表示色。 対象["落下速度"]＝落下速度。 対象["角度"]＝角度。 対象["風力"]＝風力。 ここまで。 ここまで。