みなさんこんにちは!おさかなです!
今回は「Falling Sand」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・p5.jsの学習をしたい方
・JacaScriptでアニメーションを作成したい方
・砂のアニメーションを作ってみたい方
「Falling Sand」って何?
「Falling Sand」とは、Jason McGheeさんが作成した「砂が落下するアニメーション」が作れるチュートリアルのことです。言語は「JavaScript」で、「p5.js」というライブラリが使用されています!(おもしろい!)


実際に使ってみよう!
それでは早速サイトにアクセスしましょう!

こんな感じで「砂」が落ちてくるアニメーションを作れます!(わくわく…!)

(ピラミッドみたい〜!)

ピクセルを描画しよう!
まずは、画面にピクセルを描画するプログラムを記述します。
今回は、JavaScriptで電子アートが作れるライブラリの「p5.js」が使われているようです!(おー!)

マウスを「左クリック」したときに、砂を配置する処理を書きます。

また、砂の「彩度・明度」をランダムにすることで、自然な砂っぽさを実現します!(いいね)

さらに、gridの反復処理をします。

ここまでプログラムを作成すると、左クリックしたときに砂が出現するようになります…!(おお!)

重力をつけよう!
ピクセルの描画はできましたが、このままでは「砂」っぽくありません。
なので「重力」をつけて、砂がこぼれ落ちるアニメーションにしていきます!(よし!)

重力はつきましたが、まだぎこちない感じです…。


(こまめに休憩…🍵)
重力を固定しよう!
より現実世界の砂の動きに近づけるため、重力を固定するプログラムを書きます。

すると…こんな感じで、少し砂っぽくなりました!(わーい!)

沈降挙動
さらに現実の砂の動きに近づけるためには、まっすぐ落ちるだけでは不十分です。
if文を用いて、もしスペースがあれば「左右」にも流れていくようにしてみましょう〜!(はい!)

先ほどよりも、自然な感じで積もりました〜!(もりもり!)

最後の仕上げをしよう!
ほとんど完成ですが、最後の仕上げです!
現状「砂が1粒ずつこぼれ落ちている」状態なので、1回のクリックで「複数の砂」が出現するようにします。

ついに完成ですー!(おめでとう🌸)
みなさんも是非、砂のアニメーション作りを試してみてはいかがでしょうか!?


こぼれ落ちる…🍵お茶あああ!

拭いて拭いて。笑
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
