【p5.js】「砂」のアニメーション作成【Falling Sand】とは?

テクノロジー
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「Falling Sand」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・p5.jsの学習をしたい方
・JacaScriptでアニメーションを作成したい方
・砂のアニメーションを作ってみたい方

「Falling Sand」って何?

Falling Sand」とは、Jason McGheeさんが作成した「砂が落下するアニメーション」が作れるチュートリアルのことです。言語は「JavaScript」で、「p5.js」というライブラリが使用されています!(おもしろい!)

Falling Sand
Making a falling sand simulator
【Ubuntu】映画マトリックスの画面を再現!【cmatrixコマンド】とは?
みなさんこんにちは!おさかなです!今回は「cmatrix」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・映画マトリックスが好きな方・緑色の文字が流れる画面が好きな方・Linuxジョークコ...

実際に使ってみよう!

それでは早速サイトにアクセスしましょう!

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

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

ピクセルを描画しよう!

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

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

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

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

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

重力をつけよう!

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

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

【Wordle】隠されたパスワードを解き明かせ!【Passwordle】とは?
みなさんこんにちは!おさかなです!今回は「Passwordle」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・パスワード解析したい方・ハッカー気分を味わいたい方・Wordleで遊びたい方...

(こまめに休憩…🍵)

重力を固定しよう!

より現実世界の砂の動きに近づけるため、重力を固定するプログラムを書きます。

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

沈降挙動

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

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

最後の仕上げをしよう!

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

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

https://amzn.to/3N7qxrK
おさかな
おさかな

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

ナビまる
ナビまる

拭いて拭いて。笑

これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました!

【共起語も!】文章解析フリーソフト【AIテキストマイニング】とは?
みなさんこんにちは!おさかなです!今回は「AIテキストマイニング」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・テキストマイニングをしたい方・マイニングツール・フリーソフトを探している方...
おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。紆余曲折あり、現在はライターとして活動中。IT技術、サブカルチャーから、シナリオまで色々書きます。
SAOのユウキが好きです!

おさかなをフォローする
タイトルとURLをコピーしました