プログラミング言語のヘッダー

「p5.js」というJavaScriptのライブラリを使用しています。現在よく使われているプログラミング言語をグラフィカルに表現しようと製作しました。

プロトタイプからの製作

最初からこのプログラムを製作しようとしていたわけではありませんでした。元々は、「プログラミング言語」について初心者向けにまとめていた記事で左の画像を使用していました。

プログラミングと聞くと、「黒い画面に白い文字の羅列」、「システム」、「ソフトウェア」などを連想してしまいがちです。(否定しているわけではないです。)それらは「難しそうだ」と思い、プログラミング自体を敬遠する人は少なくありません。

プログラミングに親しんでもらうため、心を開いてもらうために「このような表現ができる」という一例を示しました。

製作過程

今回の製作は、フォント、及び画像といった外部メディアファイルを使用しました。

フォントは、主要なプログラミング言語の文字列を複数描画する必要があったこと、及びフォントの描画座標は少し特殊な仕様であることから、これらの情報をまとめるクラスが必要でした。(JavaScriptでは、疑似クラスと言われているそうです。)

stringDataクラスとfontManagerクラス

stringDataクラス

Python、C++のような文字列を「文字列のデータ(“Python”)」と「文字数(6)」とをまとめたオブジェクトとして扱う。最終的に、座標を指定して描画する必要があったので、文字数を管理する必要があります。

fontManagerクラス

p5.jsでフォントを扱うには、「フォントのデータを持つインスタンス」、「フォントの大きさ」、「文字列」の情報が必要なので、それらをまとめるために定義しました。「文字列」の情報はstringDataクラスの動的配列です。

fontManagerクラスは、このプログラムで唯一のクラスとして扱います。

事前にプログラミング言語を登録する形になっているので、動的配列に毎回追加する必要があると思います。すべての言語を紹介するという目的であれば、プログラミング言語をまとめているページからデータ解析をして、CSV出力したものをp5.jsで読み込むというような感じになると思います。

Pythonか何かと組み合わせて実装したいと思います。

fontDrawerクラス

p5.jsのフォントを描画する関数であるtext関数は、左下の座標を指定する仕様になっています。これは、同じように矩形を描画するrect関数に比べると、少し変わった仕様です。

フォントの大きさと文字数からちょうど中央に描画するために、それらの計算と描画をまとめて管理するfontDrawerクラスを定義しました。

このフォントは、「次第に大きくなって透明になっていく」というアニメーションをさせるために、透明度や大きさを更新するupdateメソッドと描画のためのdrawメソッドを用意しました。

同じようなアニメーションの円も別のクラスとして定義しています。

これで、別にグローバルな動的配列を用意して、「一定時間経った時に追加」、又は「クリックしたときに追加」という処理を実装すれば、完成となります。

今回は、仕様が関数ごとに違っていたり、さまざな情報を一括で管理する必要がありました。それらを使用目的ごとにオブジェクトとしてまとめるために、多数のクラスを定義しました。

しかし、文字列の追加が手動であったり、動的配列の管理が甘いのか、途中で一瞬消えたりするなどの課題がまだ残っています。それらのことも踏まえて、コードでアニメーションを作ったり、データの追加、及び削除に対して柔軟に対応できるプログラムを次回は製作したいと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Fill out this field
Fill out this field
有効なメールアドレスを入力してください。