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

[編集モード] 雪が降ります❄️

ホワイトクリスマスになるように雪を降らせます！（積もりませんが；）　サンドボックスだとつまらないので編集画面で実行してみて☆　画面いっぱいに降らせるためにbodyへ直接ぶっこむとゆう暴挙！　ネタなのでゆるして🙏　ので、クリアを押しても消えません。見飽きたらお帰りください。アドベントカレンダー24日目が埋まらないのでなんとかしなきゃと使い回しのコードで作ってみたけど、ありがたいことに埋まったので、文章は書かなくて良くなったヤツ。

!『https://n3s.nadesi.com/plain/SVGplus.nako3』を取り込む。
母艦＝DOM親要素。
変数 画面幅＝クライアント幅。
変数 画面高＝クライアント高さ。

# CSS
「body」へDOM親要素設定。
CSS＝「style」のDOM部品作成。
CSSに「#雪 {波カッコ}
position:fixed;
pointer-events:none;
z-index:99;
{波カッコ閉じ}」をHTML設定。

# SVG
親SVG＝[画面幅,画面高]のSVG親要素作成。
親SVGへSVG描画開始。
親SVGの「id」へ「雪」をDOM属性設定。
BODY＝親SVGのDOM親要素取得。
挿入先＝BODYのDOM初子要素取得。
BODYの挿入先へ親SVGをDOM子要素挿入。
ID=挿入先の「id」をDOM属性取得。
もし、ID＝「雪」ならば、BODYから挿入先をDOM子要素削除。

# 雪
雪は空配列。雪径＝20。雪間隔＝雪径*2。雪数＝画面幅/雪間隔。

# フィルター
定義＝親SVGへSVG定義領域作成。
雪フィルター＝定義にSVGフィルター作成。
SVG対象フィルター＝雪フィルター。
銀色にSVG塗り色設定。0.6にSVG透明度設定。
[1,1]で2のSVGドロップシャドウ。

# シンボル
雪シンボル＝定義へSVGシンボルグループ作成。
雪シンボルへSVG描画開始。
アリスブルー色にSVG塗り色設定。0.8にSVG透明度設定。
[50,50]から8の雪角度取得。
それでSVG多角形描画。
アリスブルー色にSVG線色設定。3にSVG線太設定。
頂点＝[50,50]から20の雪角度取得。
3回:
  頂点[回数-1]から頂点[回数+2]までSVG線描画。
分岐点＝[50,50]から12の雪角度取得。
分岐点を反復:
    枝＝対象から8の雪角度取得。
    A=(対象キー-1+6)%6。B=(対象キー+1+6)%6。C=対象。
    枝[A]からCまでSVG線描画。
    枝[B]からCまでSVG線描画。

●(中点から半径の)雪角度取得
    P＝空配列。
    6回
        角度＝(360/6)*(回数-1)。
        x＝半径*COS(((角度-90)をラジアン変換))＋中点[0]。
        y＝半径*SIN(((角度-90)をラジアン変換))＋中点[1]。
        Pへ[x,y]を配列追加。
    ここまで。
    Pで戻る。
ここまで。
親SVGへSVG描画開始。
雪シンボルの「rotate」に「5s」と「0 50 50;360 50 50」でSVG変形アニメーション設定。

# 複製
雪は空配列。
雪数回:
    雪[回数-1]＝雪シンボルをSVG参照複製。
    雪[回数-1]に雪フィルターをSVGフィルター設定。
    [0,雪間隔*2*-1]へ雪[回数-1]をSVG描画移動。

# アニメーション開始のタイミング
降雪開始は0から雪数の配列連番作成。
降雪開始を配列シャッフル。

# アニメーション設定
雪数回:
    番号＝回数-1。
    X＝番号*雪間隔。Y＝雪間隔*-1。
    揺れ幅＝((雪間隔の乱数)+雪間隔)/2。
    揺れ位置＝空。
    32回。
        XX＝SIN(((画面高/2)/16*回数)/(画面高/2)*PI*2)*揺れ幅。
        揺れ位置は揺れ位置に「{X+XX},{Y};」を追加。
        Y＝Y+((画面高+雪間隔)/2)/16。
    ここまで。
    落下速度＝(5の乱数)+5。
    雪[番号]の「translate」に「{落下速度}s」と揺れ位置でSVG変形アニメーション設定。
    それの「begin」に「{降雪開始[番号]/2}s」をSVG属性設定。

●クライアント幅
　　「document.documentElement.clientWidth」をJS実行。
ここまで。

●クライアント高さ
　　「document.documentElement.clientHeight」をJS実行。
ここまで。

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

🍯 なでしこ3貯蔵庫

[編集モード] 雪が降ります❄️

素材のアップロード