みなさんこんにちは！おさかなです！
今回は「Falling Sand」について、書いていこうと思います！
それでは、レッツゴー！！！！！
・p5.jsの学習をしたい方
・JacaScriptでアニメーションを作成したい方
・砂のアニメーションを作ってみたい方
「Falling Sand」って何？
「Falling Sand」とは、Jason McGheeさんが作成した「砂が落下するアニメーション」が作れるチュートリアルのことです。言語は「JavaScript」で、「p5.js」というライブラリが使用されています！(おもしろい！)
実際に使ってみよう！
それでは早速サイトにアクセスしましょう！
こんな感じで「砂」が落ちてくるアニメーションを作れます！(わくわく…！)
(ピラミッドみたい〜！)
ピクセルを描画しよう！
まずは、画面にピクセルを描画するプログラムを記述します。
今回は、JavaScriptで電子アートが作れるライブラリの「p5.js」が使われているようです！(おー！)
マウスを「左クリック」したときに、砂を配置する処理を書きます。
また、砂の「彩度・明度」をランダムにすることで、自然な砂っぽさを実現します！(いいね)
さらに、gridの反復処理をします。
ここまでプログラムを作成すると、左クリックしたときに砂が出現するようになります…！(おお！)
重力をつけよう！
ピクセルの描画はできましたが、このままでは「砂」っぽくありません。
なので「重力」をつけて、砂がこぼれ落ちるアニメーションにしていきます！(よし！)
重力はつきましたが、まだぎこちない感じです…。
(こまめに休憩…🍵)
重力を固定しよう！
より現実世界の砂の動きに近づけるため、重力を固定するプログラムを書きます。
すると…こんな感じで、少し砂っぽくなりました！(わーい！)
沈降挙動
さらに現実の砂の動きに近づけるためには、まっすぐ落ちるだけでは不十分です。
if文を用いて、もしスペースがあれば「左右」にも流れていくようにしてみましょう〜！(はい！)
先ほどよりも、自然な感じで積もりました〜！(もりもり！)
最後の仕上げをしよう！
ほとんど完成ですが、最後の仕上げです！
現状「砂が1粒ずつこぼれ落ちている」状態なので、1回のクリックで「複数の砂」が出現するようにします。
ついに完成ですー！(おめでとう🌸)
みなさんも是非、砂のアニメーション作りを試してみてはいかがでしょうか！？
こぼれ落ちる…🍵お茶あああ！
拭いて拭いて。笑
これで全ての操作は完了です。(やった～！)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました！
