[編集モード] なでしこさんで雪を降らせるよ❄️

日本語プログラミング言語「なでしこ」 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実行。
ここまで。

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

🍯 プログラム貯蔵庫

[編集モード] なでしこさんで雪を降らせるよ❄️

素材のアップロード