p5.jsで動くゲーム風読み込み画面作ってみた

この記事は GMOアドマーケティング Advent Calendar 2021 24日目の記事です。 はじめに こんにちは、GMOアドマーケティングのR.Yです。 今回はp5.jsを使用して読み込みの長い画面でも退屈しないようなゲーム風読み込み画面を作成しましたのでその紹介です。 p5.jsとは p5.jsとはJavaをベースに作られた「Processing」と言う電子アートのプログラミング言語をJavaScriptで使用できるようにしたライブラリになります。p5.jsを使うことでブラウザ上で表示できるアニメーションを作成することができます。 サンプル 文字だけではわかりづらいと思うのでp5.jsによるアニメーションのサンプルを用意しました。以下が実際の表示とプログラムになります。※以降の動画は全て当社が作成したものになります。 sample.html <script src="https