なでしこさんで雪を降らせるよ❄️ 📖

日本語プログラミング言語「なでしこ」 Advent Calendar 2024、一日目の記事用。画面いっぱいに降らせるようにし、空をグラデーションにしてみました。画面の大きさで雪の個数と降らせる間隔を調整して完成。

プログラム: (→大)
＃画面 画面幅はクライアント幅/10*9.5。//画面幅＝400。 画面高はクライアント高/10*9.5。//画面高さ＝500。 メイン画面は、描画中キャンバス。 メイン画面.width＝画面幅。 メイン画面.height＝画面高さ。 背景は、[画面幅,画面高さ]のキャンバス作成。 背景.非表示＝オン。 [画面幅,画面高さ]へ空グラデ描画。 メイン画面へ描画開始。 ＃設定 変数 雪設定＝{ "最大径":50, "最小径":10, "最大落下速度":20, "最小落下速度":10, "最大風速":5, "最小風速":1, "最大数":(画面幅+画面高)/50 } ＃データ作成 雪一覧は空配列。 雪作成間隔基準値＝0.5。 雪作成間隔は(雪作成間隔基準値/(画面幅/400))。 (雪作成間隔)秒毎には、もし、(雪一覧の要素数)＜(雪設定.最大数)ならば、雪追加。。。 ●雪追加 変数 雪＝雪設定。 変数 方向＝[-1,1]。 変数 伸縮＝[[0,1],[1,0]]。 # 雪の降り方 変数 風力＝(雪.最小風速から雪.最大風速までの乱数範囲)/10。 変数 風向＝方向[2の乱数]。 変数 速度＝(雪.最小落下速度から雪.最大落下速度までの乱数範囲)/10 # 雪のサイズ 変数 雪径＝雪.最小径から雪.最大径までの乱数範囲。 # 雪位置 変数 横位置＝画面幅の乱数。 変数 縦位置＝雪径/2*-1。//雪が見えない所から降らせる # 雪色 変数 R＝0xCCから0xFFまでの乱数範囲。 変数 G＝0xDDから0xFFまでの乱数範囲。 変数 B＝0xEEから0xFFまでの乱数範囲。 変数 A＝(5から8までの乱数範囲)*0.1。 変数 雪データ＝{ "位置":[横位置,縦位置], "径":雪径, "色":「RGBA({R},{G},{B},{A})」, "左右方向":風力*風向き, "落下速度":速度, "回転方向":方向[2の乱数], "伸縮":伸縮[2の乱数], "角度":0 } 雪一覧に雪データを配列追加。 ここまで。 ＃雪を降らせる 降雪アニメーション。 ●降雪アニメーション [0,0]へ背景を画像描画。 もし、（雪一覧の要素数）＝０ならば、雪追加。 雪一覧を反復 変数 No＝対象キーを整数変換。 変数 雪位置は対象.位置。 変数 [横位置,縦位置]＝雪位置。 変数 雪径は対象.径。 変数 雪色は対象.色。 雪色に線色設定。 変数 伸縮＝対象.伸縮。 変数 角度＝対象.角度＋対象.回転方向。 変数 sin＝SIN((角度をラジアン変換))。 変数 cos＝COS((角度をラジアン変換))。 変数 [伸縮ｘ,傾斜ｙ,傾斜ｘ,伸縮ｙ]＝[cos*伸縮[0],sin,-sin,cos*伸縮[1]]。 変数 [起点ｘ,起点ｙ]＝[横位置,縦位置]。 キャンバス状態保存。 #--- [伸縮ｘ,傾斜ｙ,傾斜ｘ,伸縮ｙ,起点ｘ,起点ｙ]だけ描画変換マトリクス設定。 [0,0]へ雪径の雪描画。 #--- キャンバス状態復元。 横位置を対象.左右方向だけ増やす。 縦位置を対象.落下速度だけ増やす。 もし、縦位置-雪径＞画面高さならば、 雪一覧のNoを配列削除。 違えば、 対象.位置＝[横位置,縦位置]。 対象.角度＝角度。 ここまで。 ここまで。 「降雪アニメーション」を画面更新時実行。 ここまで。 ＃描画 //中点は[x,y]の配列。雪径は雪の「直径」 ●(中点へ雪径の)雪描画 空に塗り色設定 変数 m=雪径/10。m/4*3に線太設定。 中点からm*2で6の多角形頂点取得。 それで多角形描画。 変数 頂点は、中点からm*5で6の多角形頂点取得。 3回: 頂点[回数-1]から頂点[回数+2]まで線描画。 変数 分岐点は、中点からm*3で6の多角形頂点取得。 分岐点を反復: 変数 枝は、対象からm*2で6の多角形頂点取得。 変数 A＝(対象キー-1+6)%6。 変数 B＝(対象キー+1+6)%6。 枝[A]から対象まで線描画。 枝[B]から対象まで線描画。 ここまで。 // x = r cos θ　y = r sin θ の呪文 ●(中点から半径でnの)多角形頂点取得 変数 v＝空配列。 n回 変数 角度＝(360/n)*(回数-1)。 変数 ラジアン度＝(角度-90)をラジアン変換。 変数 x＝半径*COS(ラジアン度)＋中点[0]。 変数 y＝半径*SIN(ラジアン度)＋中点[1]。 vへ[x,y]を配列追加。 ここまで。 vで戻る。 ここまで。 ！「https://n3s.nadesi.com/plain/ImageProcessing.nako3」を取り込む。 ●(whへ)空グラデ描画 変数 上空色＝「#000066」 変数 地上色＝「#CCCCFF」 変数 [w,h]=wh。 1に線太さ設定。上空色に塗り色設定。上空色に線色設定。 [0,0,w,h/3]へ四角描画。 h/3*2回 C＝回数-1。 空色＝[C,h/3*2]で上空色と地上色の色等比計算の色混ぜ。 空色に線色設定。 [0,C+h/3]から[w,C+h/3]へ線描画。 ここまで。 ここまで。 ●クライアント幅 　　「document.documentElement.clientWidth」をJS実行。 ここまで。 ●クライアント高さ 　　「document.documentElement.clientHeight」をJS実行。 ここまで。