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

　アドベントカレンダー2024 開幕！
　・・・にもかかわらず特にやることが思いつかないので、１２月だし、クリスマスだし、雪でも降らせてみようかなぁ、という。
　アドベントカレンダーのページでも雪が降っていますよね。
　今回は、なでしこさんの貯蔵庫エディタでキャンバスに雪を降らせてみます。

　あるいは、新しく導入された[オブジェクトプロパティ構文](https://nadesi.com/v3/doc/index.php?%E6%96%87%E6%B3%95%2F%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E6%A7%8B%E6%96%87%E3%80%8C%24%E3%80%8D&show)をお試し。

# なでしことは
　日本語プログラミング言語「なでしこ」は、その名の通り日本語でプログラミングできる、素敵プログラミング言語です❣️ 
　みんなが義務教育でプログラミングを勉強するというこんにち、「**誰でも簡単プログラマー**」と謳われているとおり、ちょっとプログラムを作って遊んだり生活が便利になったりしたいという時に、日本語なら取っつきやすいですよね✨
　教育用途としてもなでしこは、[中学校の教科書に採用](https://nadesi.com/index.php?%E3%81%AA%E3%81%A7%E3%81%97%E3%81%93%E3%81%8C%E6%95%99%E7%A7%91%E6%9B%B8%E3%81%AB%E8%BC%89%E3%81%A3%E3%81%9F%E4%BB%B6)されたり、大学入試のセンター試験で利用される疑似言語、[DNCL](https://nadesi.com/v3/doc/index.php?%E6%96%87%E6%B3%95%2FDNCL%E3%83%A2%E3%83%BC%E3%83%89%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6&show)、[DNCL2の互換モード](https://nadesi.com/v3/doc/index.php?%E6%96%87%E6%B3%95%2FDNCL2&show)が実装されたりしています。

　詳しくはホームページで👇

https://nadesi.com/

# 雪の結晶を描いてみるよ！
　なでしこではHTML5のCanvasを使うことが出来、日本語で色々な描画が行えます。

👉[**なでしこ3 マニュアル > plugin_browser/描画**](https://nadesi.com/v3/doc/index.php?plugin_browser%2F%E6%8F%8F%E7%94%BB&show)

　カンタンに「円描画」で丸とかでもいいのですが、少し華やかにしてみたいと思います。
　現実には雪の結晶の形が降ってるの見られるわけじゃないですけれどね～。

　雪の結晶は正六角形を元にした対象形なのでプログラムで描きやすいアレだと思いますが、ワタクシ能力もなければセンスも不足なので、とにかく「多角形描画」したり「線描画」したりして頑張ります。

👉[**なでしこ3 マニュアル > plugin_browser/多角形描画**](https://nadesi.com/v3/doc/index.php?plugin_browser%2F%E5%A4%9A%E8%A7%92%E5%BD%A2%E6%8F%8F%E7%94%BB&show)

　「多角形描画」は座標配列vを指定して多角形を描画する命令で、正ｎ角形を描きたいと思ったら、その座標を自分で計算して指定してあげなくちゃいけないんですよね～。

　ユキノは、さいんこさいんのじゅもんをとなえた！
```
　x = r cos θ
　y = r sin θ
```
　半径rの円の中心(0,0)からx軸に対し角度θの直線が円周と交わる点(x,y)の座標を求める公式。
　これを使って正六角形の頂点の配列を作成し、六角形を描いたり線を引っ張って枝を付けたり・・・

<blockquote><font color="#009900">//&nbsp;x&nbsp;=&nbsp;r&nbsp;cos&nbsp;θ　y&nbsp;=&nbsp;r&nbsp;sin&nbsp;θ&nbsp;の呪文</font><br><strong><font color="#cc0099">●(中点から半径でnの)多角形頂点取得</font></strong><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">v</font><font color="#cc0099">＝</font><font color="#660099">空配列</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">n</font><font color="#cc0099">回</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">角度</font><font color="#cc0099">＝</font><font color="#cc0099">(</font><font color="#0000cc">360</font><font color="#cc0099">/</font><font color="black">n</font><font color="#cc0099">)</font><font color="#cc0099">*</font><font color="#cc0099">(</font><font color="#660099">回数</font><font color="#cc0099">-</font><font color="#0000cc">1</font><font color="#cc0099">)</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">ラジアン度</font><font color="#cc0099">＝</font><font color="#cc0099">(</font><font color="black">角度</font><font color="#cc0099">-</font><font color="#0000cc">90</font><font color="#cc0099">)</font><font color="#cc0000">を</font><font color="#660099">ラジアン変換</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">x</font><font color="#cc0099">＝</font><font color="black">半径</font><font color="#cc0099">*</font><font color="#660099">COS</font><font color="#cc0099">(</font><font color="black">ラジアン度</font><font color="#cc0099">)</font><font color="#cc0099">＋</font><font color="black">中点</font><font color="#cc0099">[</font><font color="#0000cc">0</font><font color="#cc0099">]</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">y</font><font color="#cc0099">＝</font><font color="black">半径</font><font color="#cc0099">*</font><font color="#660099">SIN</font><font color="#cc0099">(</font><font color="black">ラジアン度</font><font color="#cc0099">)</font><font color="#cc0099">＋</font><font color="black">中点</font><font color="#cc0099">[</font><font color="#0000cc">1</font><font color="#cc0099">]</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">v</font><font color="#cc0000">へ</font><font color="#cc0099">[</font><font color="black">x</font>,<font color="black">y</font><font color="#cc0099">]</font><font color="#cc0000">を</font><font color="#660099">配列追加</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">ここまで</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">v</font><font color="#cc0000">で</font><font color="#cc0099">戻る</font>。<br><font color="#cc0099">ここまで</font>。<br><br><font color="#009900">//中点は[x,y]の配列。雪径は雪の「直径」</font><br><strong><font color="#cc0099">●(中点へ雪径の)雪描画</font></strong><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#660099">空</font><font color="#cc0000">に</font><font color="#660099">塗り色設定</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">m</font><font color="#cc0099">=</font><font color="black">雪径</font><font color="#cc0099">/</font><font color="#0000cc">10</font>。<font color="black">m</font><font color="#cc0099">/</font><font color="#0000cc">4</font><font color="#cc0099">*</font><font color="#0000cc">3</font><font color="#cc0000">に</font><font color="#660099">線太設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">中点</font><font color="#cc0000">から</font><font color="black">m</font><font color="#cc0099">*</font><font color="#0000cc">2</font><font color="#cc0000">で</font><font color="#0000cc">6</font><font color="#cc0000">の</font><font color="black">多角形頂点取得</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">それ</font><font color="#cc0000">で</font><font color="#660099">多角形描画</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">頂点</font><font color="#cc0000">は</font>、<font color="black">中点</font><font color="#cc0000">から</font><font color="black">m</font><font color="#cc0099">*</font><font color="#0000cc">5</font><font color="#cc0000">で</font><font color="#0000cc">6</font><font color="#cc0000">の</font><font color="black">多角形頂点取得</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000cc">3</font><font color="#cc0099">回</font><font color="#cc0099">:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="black">頂点</font><font color="#cc0099">[</font><font color="#660099">回数</font><font color="#cc0099">-</font><font color="#0000cc">1</font><font color="#cc0099">]</font><font color="#cc0000">から</font><font color="black">頂点</font><font color="#cc0099">[</font><font color="#660099">回数</font><font color="#cc0099">+</font><font color="#0000cc">2</font><font color="#cc0099">]</font><font color="#cc0000">まで</font><font color="#660099">線描画</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">分岐点</font><font color="#cc0000">は</font>、<font color="black">中点</font><font color="#cc0000">から</font><font color="black">m</font><font color="#cc0099">*</font><font color="#0000cc">3</font><font color="#cc0000">で</font><font color="#0000cc">6</font><font color="#cc0000">の</font><font color="black">多角形頂点取得</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">分岐点</font><font color="#cc0000">を</font><font color="#cc0099">反復</font><font color="#cc0099">:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="#cc0099">変数</font>&nbsp;<font color="black">枝</font><font color="#cc0000">は</font>、<font color="#cc0099">対象</font><font color="#cc0000">から</font><font color="black">m</font><font color="#cc0099">*</font><font color="#0000cc">2</font><font color="#cc0000">で</font><font color="#0000cc">6</font><font color="#cc0000">の</font><font color="black">多角形頂点取得</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">A</font><font color="#cc0099">＝</font><font color="#cc0099">(</font><font color="#cc0099">対象キー</font><font color="#cc0099">-</font><font color="#0000cc">1</font><font color="#cc0099">+</font><font color="#0000cc">6</font><font color="#cc0099">)</font><font color="#cc0099">%</font><font color="#0000cc">6</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">B</font><font color="#cc0099">＝</font><font color="#cc0099">(</font><font color="#cc0099">対象キー</font><font color="#cc0099">+</font><font color="#0000cc">1</font><font color="#cc0099">+</font><font color="#0000cc">6</font><font color="#cc0099">)</font><font color="#cc0099">%</font><font color="#0000cc">6</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">枝</font><font color="#cc0099">[</font><font color="black">A</font><font color="#cc0099">]</font><font color="#cc0000">から</font><font color="#cc0099">対象</font><font color="#cc0000">まで</font><font color="#660099">線描画</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">枝</font><font color="#cc0099">[</font><font color="black">B</font><font color="#cc0099">]</font><font color="#cc0000">から</font><font color="#cc0099">対象</font><font color="#cc0000">まで</font><font color="#660099">線描画</font>。<br><font color="#cc0099">ここまで</font>。<br><font color="#cc0099">[</font><font color="#0000cc">50</font>,<font color="#0000cc">50</font><font color="#cc0099">]</font><font color="#cc0000">へ</font><font color="#0000cc">100</font><font color="#cc0000">の</font><font color="black">雪描画</font>。</blockquote>

![雪の結晶.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561177/3279f40b-9e72-826e-91fb-e6a0999be6a7.png)

　こんなかんじ？　ちょっとそれらしくなったんじゃないでしょうか？
　雪の結晶の形は無数にあるので、是非もっとかっこいい結晶を描いてみて下さい。
　色々な結晶が降れば、なお華やかな感じになりますよね。

# ①とりあえず降らせます
　今度は、この雪を降らせてみます。

## 雪のデータを作ります
　とりあえず雪のサイズは決め打ちで、縦位置も降り始めなので一番上に決め打ちで良いかと思いますので、横位置だけ乱数で決めます。
　設定項目はこれから増える予定なので、辞書型変数形式で雪一覧配列に追加します。
　一片一片降ってくる感じを出したいので、とりあえず0.5秒毎に雪データが追加されるようにしておきます。

<blockquote><font color="#009900">＃設定</font><br><font color="black">雪径</font><font color="#cc0099">＝</font><font color="#0000cc">30</font>。<font color="#009900">//雪のサイズ</font><br><br><font color="#009900">＃データ作成</font><br><font color="black">雪一覧</font><font color="#cc0000">は</font><font color="#660099">空配列</font>。<br><font color="black">0.5秒毎</font><font color="#cc0000">には</font>、<font color="black">雪追加</font><font color="#cc0099">。。。<br><br></font><strong><font color="#cc0099">●雪追加</font></strong><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;雪位置</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">横位置</font><font color="#cc0099">＝</font><font color="black">画面幅</font><font color="#cc0000">の</font><font color="#660099">乱数</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">縦位置</font><font color="#cc0099">＝</font><font color="black">雪径</font><font color="#cc0099">/</font><font color="#0000cc">2</font><font color="#cc0099">*</font><font color="#cc0099">-</font><font color="#0000cc">1</font>。<font color="#009900">//雪が見えない所から降らせる</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">雪データ</font><font color="#cc0099">＝</font><font color="#cc0099">{</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"位置"</font><font color="#cc0099">:</font><font color="#cc0099">[</font><font color="black">横位置</font>,<font color="black">縦位置</font><font color="#cc0099">]</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">}</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">雪一覧</font><font color="#cc0000">に</font><font color="black">雪データ</font><font color="#cc0000">を</font><font color="#660099">配列追加</font>。<br><font color="#cc0099">ここまで</font>。</blockquote>

## アニメーションします
　「画面更新時実行」は、画面更新のタイミングで画面を指定した関数を実行する命令で、画面を一旦全て塗り潰し、そこへ雪の縦位置を変化させながら雪一覧の雪を次々を描画していく関数で自分を呼び出し続けることでアニメーションになります。
　縦位置が画面の下に見えなくなったら、その雪は雪一覧から消すの忘れず。

👉[**なでしこ3 マニュアル > plugin_browser/画面更新時実行**](https://nadesi.com/v3/doc/index.php?plugin_browser%2F%E7%94%BB%E9%9D%A2%E6%9B%B4%E6%96%B0%E6%99%82%E5%AE%9F%E8%A1%8C&show)

　本当は雪追加もタイムスタンプを取ってこの中で行った方がイイのかなぁ？　と思いましたが、面倒なので別のタイマーを使っています。
　画面を塗り潰す空描画はとりあえず四角を描いているだけです。
　なでしこだと「空」は「から」と読みたくなっちゃうけど、「そら」描画です～。

<blockquote><strong><font color="#cc0099">●降雪アニメーション</font></strong><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">[</font><font color="black">画面幅</font>,<font color="black">画面高さ</font><font color="#cc0099">]</font><font color="#cc0000">へ</font><font color="black">空描画</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">もし</font>、<font color="#cc0099">（</font><font color="black">雪一覧</font><font color="#cc0000">の</font><font color="#660099">要素数</font><font color="#cc0099">）</font><font color="#cc0099">＝</font><font color="#0000cc">０</font><font color="#cc0000">ならば</font>、<font color="black">雪追加</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">雪一覧</font><font color="#cc0000">を</font><font color="#cc0099">反復</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">No</font><font color="#cc0099">＝</font><font color="#cc0099">対象キー</font><font color="#cc0000">を</font><font color="#660099">整数変換</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">雪位置</font><font color="#cc0000">は</font><font color="#cc0099">対象</font><font color="#cc0099">＠</font><font color="maroon">「位置」</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">横位置</font>,<font color="black">縦位置</font><font color="#cc0099">＝</font><font color="black">雪位置</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;描画</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">「snow」</font><font color="#cc0000">に</font><font color="#660099">線色設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">雪位置</font><font color="#cc0000">へ</font><font color="black">雪径</font><font color="#cc0000">の</font><font color="black">雪描画</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;次の位置を変更</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">縦位置</font><font color="#cc0000">を</font><font color="black">1増やす</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">もし</font>、<font color="black">縦位置</font><font color="#cc0099">-</font><font color="black">雪径</font><font color="#cc0099">＞</font><font color="black">画面高さ</font><font color="#cc0000">ならば</font>、<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">雪一覧</font><font color="#cc0000">の</font><font color="black">No</font><font color="#cc0000">を</font><font color="#660099">配列削除</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">違えば</font>、<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">対象</font><font color="#cc0099">＠</font><font color="maroon">「位置」</font><font color="#cc0099">＝</font><font color="#cc0099">[</font><font color="black">横位置</font>,<font color="black">縦位置</font><font color="#cc0099">]</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">ここまで</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">ここまで</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">「降雪アニメーション」</font><font color="#cc0000">を</font><font color="#660099">画面更新時実行</font>。<br><font color="#cc0099">ここまで</font>。<br><font color="maroon">「降雪アニメーション」</font><font color="#cc0000">を</font><font color="#660099">画面更新時実行</font>。<br><br><strong><font color="#cc0099">●(whへ)空描画</font></strong><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">「midnightblue&nbsp;」</font><font color="#cc0000">に</font><font color="#660099">塗色設定</font>。<font color="#0000cc">1</font><font color="#cc0000">に</font><font color="#660099">線太さ設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">[</font><font color="#0000cc">0</font>,<font color="#0000cc">0</font>,<font color="black">画面幅</font>,<font color="black">画面高さ</font><font color="#cc0099">]</font><font color="#cc0000">へ</font><font color="#660099">四角描画</font>。<br><font color="#cc0099">ここまで</font>。</blockquote>

![とりあえず降らす.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561177/0996a31a-e875-749b-1fd6-b34d2fe00578.png)

　できました。
　と言っても、上から下へ全部同じ速さでスーっと移動しているだけなので、雪が降ってる感はないですね。

https://n3s.nadesi.com/id.php?2905

# ②設定を追加していくよ！

　雪の一片ごとに大きさや落ちる速さ、風で左右に流れる感じなどを付与して、自然な感じにしていきたいと思います。
　変化できる範囲は後から変更しやすいよう辞書型変数で先に設定しておきます。

👉[**なでしこ3 マニュアル > 文法/辞書型変数**](https://nadesi.com/v3/doc/index.php?%E6%96%87%E6%B3%95%2F%E8%BE%9E%E6%9B%B8%E5%9E%8B%E5%A4%89%E6%95%B0&show)

<blockquote><font color="#cc0099">変数</font>&nbsp;<font color="black">雪設定</font><font color="#cc0099">＝</font><font color="#cc0099">{</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"最大径"</font><font color="#cc0099">:</font><font color="#0000cc">50</font>,<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"最小径"</font><font color="#cc0099">:</font><font color="#0000cc">10</font>,<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"最大落下速度"</font><font color="#cc0099">:</font><font color="#0000cc">20</font>,<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"最小落下速度"</font><font color="#cc0099">:</font><font color="#0000cc">10</font>,<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"最大風速"</font><font color="#cc0099">:</font><font color="#0000cc">5</font>,<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"最小風速"</font><font color="#cc0099">:</font><font color="#0000cc">1</font>,<br><font color="#cc0099">}</font></blockquote>
　このようにJSON記法でまるっと設定することが出来、設定などに利用すると個別に変数を用意するより管理しやすく大変便利です。

## オブジェクトプロパティ構文を使ってみるよ！
　先ほどはあえて`対象＠「位置」`という書き方をしていました。
　元々辞書型変数の参照は`A["キー"]`もしくは`A@「キー」`でした。
　ここで！
　今回新たに導入された「オブジェクトプロパティ構文」です！
　もともとはDOM部品の属性値へ効率的にアクセスするために導入されましたが、DOMもオブジェクトなら辞書型変数もオブジェクトです。
　英語イヤンな人からすると、オブジェクトもプロパティもまあまあな呪文ですが、辞書型変数のキーと思えば分かりやすいですね（？）

👉[**なでしこ3 マニュアル > 文法/プロパティ構文「$」**](https://nadesi.com/v3/doc/index.php?%E6%96%87%E6%B3%95%2F%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E6%A7%8B%E6%96%87%E3%80%8C%24%E3%80%8D&show)

　この「オブジェクトプロパティ構文」では`A$キー`または`A.キー`で参照することが出来ます。
　「」がなくなっただけじゃんって？　いやもうそれ大事！
　めちゃくちゃ書きやすくなりました。
　ここが書きにくかったり見づらかったりすると、いっそもう全部バラの変数にしちゃいたくなるし！💧
　そして本当はもっと、DOMの読み書きに真価を発揮できる予定の便利構文なのですが、それはまた今度頑張りましょう。
　今回はお試しとゆうことで、とりあえず使ってみます。

<blockquote><strong><font color="#cc0099">●雪追加</font></strong><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">雪</font><font color="#cc0099">＝</font><font color="black">雪設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">方向</font><font color="#cc0099">＝</font><font color="#cc0099">[</font><font color="#cc0099">-</font><font color="#0000cc">1</font>,<font color="#0000cc">1</font><font color="#cc0099">]</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;雪の降り方</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">風力</font><font color="#cc0099">＝</font><font color="#cc0099">(</font><font color="black">雪</font><font color="#cc0099">$</font><font color="black">最小風速</font><font color="#cc0000">から</font><font color="black">雪</font><font color="#cc0099">$</font><font color="black">最大風速</font><font color="#cc0000">までの</font><font color="#660099">乱数範囲</font><font color="#cc0099">)</font><font color="#cc0099">/</font><font color="#0000cc">10</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">風向</font><font color="#cc0099">＝</font><font color="black">方向</font><font color="#cc0099">[</font><font color="#0000cc">2</font><font color="#cc0000">の</font><font color="#660099">乱数</font><font color="#cc0099">]</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">速度</font><font color="#cc0099">＝</font><font color="#cc0099">(</font><font color="black">雪</font><font color="#cc0099">$</font><font color="black">最小落下速度</font><font color="#cc0000">から</font><font color="black">雪</font><font color="#cc0099">$</font><font color="black">最大落下速度</font><font color="#cc0000">までの</font><font color="#660099">乱数範囲</font><font color="#cc0099">)</font><font color="#cc0099">/</font><font color="#0000cc">10</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;雪のサイズ</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">雪径</font><font color="#cc0099">＝</font><font color="black">雪</font><font color="#cc0099">$</font><font color="black">最小径</font><font color="#cc0000">から</font><font color="black">雪</font><font color="#cc0099">$</font><font color="black">最大径</font><font color="#cc0000">までの</font><font color="#660099">乱数範囲</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;雪位置</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">横位置</font><font color="#cc0099">＝</font><font color="black">画面幅</font><font color="#cc0000">の</font><font color="#660099">乱数</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">縦位置</font><font color="#cc0099">＝</font><font color="black">雪径</font><font color="#cc0099">/</font><font color="#0000cc">2</font><font color="#cc0099">*</font><font color="#cc0099">-</font><font color="#0000cc">1</font>。<font color="#009900">//雪が見えない所から降らせる</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;雪色</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">R</font><font color="#cc0099">＝</font><font color="#0000cc">0xCC</font><font color="#cc0000">から</font><font color="#0000cc">0xFF</font><font color="#cc0000">までの</font><font color="#660099">乱数範囲</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">G</font><font color="#cc0099">＝</font><font color="#0000cc">0xDD</font><font color="#cc0000">から</font><font color="#0000cc">0xFF</font><font color="#cc0000">までの</font><font color="#660099">乱数範囲</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">B</font><font color="#cc0099">＝</font><font color="#0000cc">0xEE</font><font color="#cc0000">から</font><font color="#0000cc">0xFF</font><font color="#cc0000">までの</font><font color="#660099">乱数範囲</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">A</font><font color="#cc0099">＝</font><font color="#cc0099">(</font><font color="#0000cc">5</font><font color="#cc0000">から</font><font color="#0000cc">8</font><font color="#cc0000">までの</font><font color="#660099">乱数範囲</font><font color="#cc0099">)</font><font color="#cc0099">*</font><font color="#0000cc">0</font><font color="#cc0099">.</font><font color="#0000cc">1</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">雪データ</font><font color="#cc0099">＝</font><font color="#cc0099">{</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"位置"</font><font color="#cc0099">:</font><font color="#cc0099">[</font><font color="black">横位置</font>,<font color="black">縦位置</font><font color="#cc0099">]</font>,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"径"</font><font color="#cc0099">:</font><font color="black">雪径</font>,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"色"</font><font color="#cc0099">:</font><font color="maroon">「RGBA({R},{G},{B},{A})」</font>,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"左右方向"</font><font color="#cc0099">:</font><font color="black">風力</font><font color="#cc0099">*</font><font color="black">風向き</font>,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"落下速度"</font><font color="#cc0099">:</font><font color="black">速度</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">}</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">雪一覧</font><font color="#cc0000">に</font><font color="black">雪データ</font><font color="#cc0000">を</font><font color="#660099">配列追加</font>。<br><font color="#cc0099">ここまで</font>。<br><br><font color="#009900">＃雪を降らせる</font><br><strong><font color="#cc0099">●降雪アニメーション</font></strong><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">[</font><font color="black">画面幅</font>,<font color="black">画面高さ</font><font color="#cc0099">]</font><font color="#cc0000">へ</font><font color="black">空描画</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">もし</font>、<font color="#cc0099">（</font><font color="black">雪一覧</font><font color="#cc0000">の</font><font color="#660099">要素数</font><font color="#cc0099">）</font><font color="#cc0099">＝</font><font color="#0000cc">０</font><font color="#cc0000">ならば</font>、<font color="black">雪追加</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">雪一覧</font><font color="#cc0000">を</font><font color="#cc0099">反復</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">No</font><font color="#cc0099">＝</font><font color="#cc0099">対象キー</font><font color="#cc0000">を</font><font color="#660099">整数変換</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">雪位置</font><font color="#cc0000">は</font><font color="#cc0099">対象</font><font color="#cc0099">$</font><font color="black">位置</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="#cc0099">[</font><font color="black">横位置</font>,<font color="black">縦位置</font><font color="#cc0099">]</font><font color="#cc0099">＝</font><font color="black">雪位置</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">雪径</font><font color="#cc0000">は</font><font color="#cc0099">対象</font><font color="#cc0099">$</font><font color="black">径</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">雪色</font><font color="#cc0000">は</font><font color="#cc0099">対象</font><font color="#cc0099">$</font><font color="black">色</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;描画</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">雪色</font><font color="#cc0000">に</font><font color="#660099">線色設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">雪位置</font><font color="#cc0000">へ</font><font color="black">雪径</font><font color="#cc0000">の</font><font color="black">雪描画</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;次の位置を変更</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">横位置</font><font color="#cc0000">を</font><font color="#cc0099">対象</font><font color="#cc0099">$</font><font color="black">左右方向</font><font color="#cc0000">だけ</font><font color="#cc0099">増やす</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">縦位置</font><font color="#cc0000">を</font><font color="#cc0099">対象</font><font color="#cc0099">$</font><font color="black">落下速度</font><font color="#cc0000">だけ</font><font color="#cc0099">増やす</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">もし</font>、<font color="black">縦位置</font><font color="#cc0099">-</font><font color="black">雪径</font><font color="#cc0099">＞</font><font color="black">画面高さ</font><font color="#cc0000">ならば</font>、<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">雪一覧</font><font color="#cc0000">の</font><font color="black">No</font><font color="#cc0000">を</font><font color="#660099">配列削除</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">違えば</font>、<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">対象</font><font color="#cc0099">$</font><font color="black">位置</font><font color="#cc0099">＝</font><font color="#cc0099">[</font><font color="black">横位置</font>,<font color="black">縦位置</font><font color="#cc0099">]</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">ここまで</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">ここまで</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">「降雪アニメーション」</font><font color="#cc0000">を</font><font color="#660099">画面更新時実行</font>。<br><font color="#cc0099">ここまで</font>。<br><font color="maroon">「降雪アニメーション」</font><font color="#cc0000">を</font><font color="#660099">画面更新時実行</font>。</blockquote>

![とりあえず降らす2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561177/e61335f4-7522-00ee-ab95-9b7e99c6fff7.png)
 
　動きました！　いい感じ🎶
　１に決め打ちだった縦方向への移動を、最小落下速度から最大落下速度の間の乱数で決めるようにして、同様に風の影響による左右方向への移動も追加。
　ちょっとは動きが自然になり、雪が降ってる感も出てきたんじゃないでしょうか？
　ついでに色もうっすら幅を持たせ、透明度も設定して、自然っぽさとキラキラ感（？）がアップしました✨

https://n3s.nadesi.com/id.php?2907

# ③くるくるひらひら舞わせたい！

　「描画変換マトリクス設定」を使って、雪の結晶をくるくる舞わせたいと思います。

👉[**なでしこ3 マニュアル > plugin_browser/描画変換マトリクス設定**](https://nadesi.com/v3/doc/index.php?plugin_browser%2F%E6%8F%8F%E7%94%BB%E5%A4%89%E6%8F%9B%E3%83%9E%E3%83%88%E3%83%AA%E3%82%AF%E3%82%B9%E8%A8%AD%E5%AE%9A&show)

　「描画変換マトリクス設定」は、描画を変化させる命令です。
　既に描かれているものではなく、これから描画するものが変化します。
　使い方については2021年のアドベントカレンダーで一度やりました。

https://qiita.com/snowdrops89/items/76f34e2774dfc7ba6cd3

　引数 [a,b,c,d,e,f] に[伸縮x, 傾斜y, 傾斜x, 伸縮y, 移動x, 移動y]を指定することで、拡大、傾斜、回転、起点設定をまとめて設定出来る、[伸縮x, 傾斜y, 傾斜x, 伸縮y]を[cos,sin,-sin,cos]とすることで回転するということでした。

　でも、ただフツーに回転させたら、雪っていうより歯車に見えてきちゃいますからねー💧
　伸縮の片一方を０にしてやったらどうかな？

<blockquote><font color="black">角度</font><font color="#cc0099">＝</font><font color="#0000cc">0</font>。<br><strong><font color="#cc0099">●雪回転とは</font></strong><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#660099">全描画クリア</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">角度</font><font color="#cc0099">＝</font><font color="black">角度</font><font color="#cc0099">＋</font><font color="#0000cc">1</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">sin</font><font color="#cc0099">＝</font><font color="#660099">SIN</font><font color="#cc0099">(</font><font color="#cc0099">(</font><font color="black">角度</font><font color="#cc0000">を</font><font color="#660099">ラジアン変換</font><font color="#cc0099">))</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">cos</font><font color="#cc0099">＝</font><font color="#660099">COS</font><font color="#cc0099">(</font><font color="#cc0099">(</font><font color="black">角度</font><font color="#cc0000">を</font><font color="#660099">ラジアン変換</font><font color="#cc0099">))</font>。<br><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#660099">キャンバス状態保存</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#---</font><br>&nbsp;&nbsp;<font color="#009900">※[伸縮ｘ,傾斜ｙ,傾斜ｘ,伸縮ｙ,起点ｘ,起点ｙ]</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">[</font><font color="#0000cc">0</font>,<font color="black">sin</font>,<font color="#cc0099">-</font><font color="black">sin</font>,<font color="black">cos</font>,<font color="#0000cc">150</font>,<font color="#0000cc">150</font><font color="#cc0099">]</font><font color="#cc0000">だけ</font><font color="#660099">描画変換マトリクス設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">[</font><font color="#0000cc">0</font>,<font color="#0000cc">0</font><font color="#cc0099">]</font><font color="#cc0000">へ</font><font color="#0000cc">100</font><font color="#cc0000">の</font><font color="black">雪描画</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#---</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#660099">キャンバス状態復元</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">「雪回転」</font><font color="#cc0000">を</font><font color="#660099">画面更新時実行</font>。<br><font color="#cc0099">ここまで</font>。<br><font color="maroon">「雪回転」</font><font color="#cc0000">を</font><font color="#660099">画面更新時実行</font>。</blockquote>

https://n3s.nadesi.com/id.php?2908

　ちょっとくるくるひらひらしてるっぽい？
　伸縮を0にして一旦見えなくなると、そこを軸にして回転してるように見える説😅
　変換マトリクスの行列式の意味が分かる賢い人は、もっとかっこよくひらめかすことが出来るのかも知れませんが、とりあえずこんなところで。

# 完成させます

　回転の向きと伸縮の向きはランダムにして動作のバリエーションを増やします。
　画面いっぱいに降らせるようにして、背景の空をムダにグラデーションにしてみました。
　が！　ムダに動作が重くなってしまったので、グラデーションの描画は一回で良いよう背景用のキャンバスを用意する始末💧

　先ほどはオブジェクトプロパティ構文の「$」を使いましたが、今回は「.」を使ってみましたよ。入力のしやすさや見やすさで、どっちでも好きな方を使えばＯＫです。
　ワタシは個人的にｖ１やじゃばすくりぷとさんと一緒な「.」のほうが気に入っています✨

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

https://n3s.nadesi.com/id.php?2909

　降っています！　ひらひらと舞っていますよ～🎶

# おわります
　キャンバスにお絵かきするだけじゃなく、それが動かせると楽しいですね！

　アドベントカレンダー始まりました。
　皆さんどうかご参加下さい～🙇‍♀️