p5.js v1.9.0の新機能を使ってみよう
2023/12/02
この記事はProcessing Advent Calendar 2023 - Adventarの2日目の記事です。
概要
p5.jsのv1.9.0が2023年11月29日にリリースされました。ちょうどAdvent Calendarの担当日の3日前の出来事でタイムリーなので取り扱ってみようかなと思います。今回も色々新しい機能が追加されているので、いくつか取り上げて紹介してみたいと思います。
Release v1.9.0 · processing/p5.js
draggable()
p5.Elementで表現されるHTML要素をドラッグ＆ドロップ可能にするメソッドです。p5.Elementのオブジェクトからdraggable()メソッドを呼び出すだけです。とても簡単。
こちらの例では、コンテナとなるDiv要素の中にヘッダーテキストやら、説明文やら、ボタンを配置しています。そしてDiv要素でdraggable()を呼び出すことでぐりぐり動かせるツールボックスの完成です。邪魔な時は別のところに動かして使いたいパネルUIとして使えそうですね。ぱっと見ドラッグ＆ドロップで操作できるとは分かりにくいので、そこはうまく表現してあげる必要がありそうです。
draggable()を使えば福笑いだって簡単にできます。なかなかクリック判定を実装するのは骨が折れたりするものなので、そこはブラウザの実装に任せてHTMLの機能を使って、表現に力を入れる、という使い方ができそうです。
imageLight()
画像をもとに光源を作成します。面白いですね。 画像を無限大の光る球体として、光源のシミュレーションをします。無限遠からの光のため、オブジェクトがどこにあっても光の当たり方は変わりません。 実験するためのスケッチを用意してみました。
背景に表示している画像をimageLight()に与えて光源を作成しています。なんとなく紅葉の色の光や水面の青さが箱に当たっているように見えるかと思います。そして、箱の一を動かしても光の当たり方は変わりません。
また、他の光源と併用でき、たとえば全方面からある色の光を均一に当てるambientLight()と組み合わせることもできます。
以下、本筋ではありませんがこのサンプルスケッチに関する解説です。
画像を描画する際にimageMode(CENTER)を呼び出していますが、これはimage()で画像を描画する際に指定する座標を画像の中央とするための命令です。WEBGLモードの場合、原点がキャンバスの上下左右中央に来ますので、x=0, y=0に画像を配置すれば画像が画面中央に配置されることになります。
WEBGLモードで混乱してしまう、という方には、きっとこちらの「Getting Started in WebGL」というセクションが役に立ちます。 learn | p5.js
orbitControl()を呼び出すことで3Dスケッチをマウスでぐりぐりできるようになります。マウスホイールでズームイン・ズームアウトもできます。
computeNormals(SMOOTH)
こちらもWEBGLモードの機能です。
モデルのシェーディング方式を変更するメソッドになっています。
p5.Geometryのオブジェクトから呼び出すことで、面の表現の仕方が変わります。
デフォルトとなっているcomputeNormals(FLAT)では元の頂点定義に忠実に面が描画されるのに対し、computeNormals(SMOOTH)を呼び出した場合は、頂点が滑らかに均されるように表現されます。
見にくいですが、右上のセレクトボックスから「FLAT」または「SMOOTH」を選択して違いを試してみてください。
その他
時間の都合で紹介できないアップデートもありますが、詳しくはリリースノートをご覧ください
Release v1.9.0 · processing/p5.js
蛇足
今回初めてp5.jsのコードベースにコントリビューションしました。 変更点は本当に些細で、関数に関する1文字のドキュメンテーションの修正です。 p5.jsの独自エディタの開発中、ライブラリのリファレンスのデータを整形しているときにエラーが発生し、Typoを発見しました。コントリビューションに関するガイドラインを読んで、Issueを立てて、プルリクを作ってみました。
色々楽しく使わせていただいているライブラリなので、ささやかながら貢献できてよかったです。今後も何かできそうなことがあればできればと思います。
コードを変更する意外にも、貢献の仕方は多様です。ご興味のある方は以下をご覧ください。