p5.jsとShaderの画像エフェクト

この記事はフラー株式会社 Advent Calendar 2023 の2日目の記事です。1日目は@furusaxの「カバレッジ計測ツール octocov に関するTips」でした。

p5.jsが進化している

p5.jsはProcessing をJavaScriptにポーティングしたライブラリで、ブラウザ上でビジュアルアートやインタラクティブなメディアをつくることができます。

ここ1,2年のp5.jsを取り巻くコミュニティの活動や開発がとても活発であることに最近になって気がつきました。特にWebGL関連で大きなアップデートがあり、3Dグラフィクス周辺公式ドキュメントやExampleが充実しているのを見つけてテンションが上がってしまいました。私はここ数年、WebGLやGLSLの勉強を再開したり辞めたりを繰り返しているのですが、p5.jsのShaderサンプルを眺めていたらマイブームが再燃したのでブログに書こうと思います。

シェーダーの勉強

私のシェーダーの勉強は以下の素晴らしい仕事に支えられています。大変感謝します。

ウェブカメラの画像をリアルタイムに加工処理

ウェブカメラへのアクセスがお手軽に実装できるのはp5.jsの魅力のひとつです。ウェブカメラでキャプチャした画像をシェーダーで加工するプログラムをたった数行で書くことができます。

公式サンプル： https://p5js.org/examples/3d-shader-using-webcam.html
p5.js Web Editor： https://editor.p5js.org/p5/sketches/3D:_shader_using_webcam

余談ですが、p5.js Web Editorの開発も活発に改善がリリースされています。モバイル端末でも意外と快適に使用できるので、今すぐクリエイティブコーディングを始めることができます。ここからは、今回私がp5.js Web Editorとウェブカメラを使って楽しんだ様子をご覧いただけると嬉しいです。