先人の作品を模倣
何かを表現したいと考え、絵を描こうとします。その前に絵に対する造詣を深めるために美術館巡りをします。それと同様にプログラミングにおいても先人の優れた作品に触れることが習得への近道になることがあります。
この回ではp5.jsという優れたライブラリーをそっくり使って、コンピューター版万華鏡を描画します。
p5.jsとは
Lauren McCarthy氏はプログラマでない人たち（アーティスト、教育者、初心者）がJavaScriptを簡単に利用できるようにするためにライブラリとしてp5.jsを開発して世に公開しました。
ここでは、開発の経緯や歴史についてはこれ以上、深入りしません。McCarthy氏はGitHubにおいてp5.jsのこと以下のように説明しています。
ソフトウエアのスケッチブックを目指しているp5.jsは描画に関する一式の機能をすべて備えています。さらに、描画するカンバスには制限がありません。ブラウザのページ全体をスケッチに使えます。このため、p5.jsはアドオンのライブラリを持っています。アドオンによって、テキストやインプット、動画やウェブカメラ、音声などのHTML5のオブジェクトを扱えます。
p5.jsを導入する
p5.jsはかなり大きな山と言っても過言ではありません。プログラミングの初歩者にとっては高い垣根です。ここでは中味はともかく、高級電卓を使う感覚で進めてまいります。
ためになるサイトを参照して動作環境を作ります。
上記のサイトを参考にしてp5.jsを導入します。
p5.jsでコードを書く
夏休みの課題として、いきなりコードを書くのは難儀です。ここでは先人のコードをそのまま参照させてもらいました。ねらったような動作が得られたら次へのステップを考えましょう。
p5.jsはクレジット（出版物，新聞記事，テレビ番組などに使用された著作物等の出所を明示する行為）すれば非商業目的で再利用することができます。
コンピューター版万華鏡
下の図をクリックすると別枠でコンピューター版万華鏡の実行画面が現れます。従来のようにHTMLコードを埋め込んでも期待した動作にはなりません。当ライブラリーはローカル環境で実行するのを前提にしているのでしょうか。htmlファイルをアップロードしてリンクを貼って実行しています。
新しい画面でマウスとキーボードにより万華鏡の描画に変化を付けられます。
- マウスクリック： カンバスの背景色を「黒」「白」のいずれかに切替
- スペースキー： 残像・ぼやけを変更
- 「H」キー： ステージの回転を止める（停止時に押すと再開）
- 「P」キー： 画面イメージをPNG画像として保存
- 「←」ボタン： このページに戻る
サンプルコード
<!DOCTYPE html> <html> <body> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Psychedelic Kaleidoscope 3 for p5.js</title> </head> <script src="https://infosmith.biz/scripts/035-kaleidoscope/libraries/p5.min.js"></script> <script src="https://infosmith.biz/scripts/035-kaleidoscope/sketch.js"></script> </body> </html>
サンプルコードの解説
- ①～⑧行、htmlで記述、ヘッダー、タイトル情報。
- ⑨行、p5.jsライブラリーから冗長度を省いたファイル。
- ⑩行、制御ソースコード、初期化時に1回動作するsetup関数とフレーム起動タイミングで毎回起動するdraw関数を含む制御処理コード。
- ⑪～⑫行、タグを閉じる要素。
ひとこと
ソースコードはすべて公開されているものばかりです。まずはサイケデリックな描画が出現することです。先人のコードを眺めて自分の引き出しを豊かにしましょう。
魅力的な万華鏡にするには
- タイトルを付ける。
- 重厚なBGMを流す。
- BGMの参照を明記する。
- 円筒万華鏡を模す。
- キーボードでも背景色を反転できる。
- メニューを表示する。
- 参照した著作物のクレジットを表示する。
- 著作権表記とバージョン情報を付記する。
上記は次回以降にクリアすべき課題と考えています。