chooblarin’s blog

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

December 02, 2023

  • #p5.js
  • #JavaScript
  • #GLSL

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

p5.jsが進化している

p5.jsProcessing を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とウェブカメラを使って楽しんだ様子をご覧いただけると嬉しいです。

1. ポスタリゼーション

ポスタリゼーションとは色の階調を減らす処理のことです。デモはこちらです。

2. モザイク

五角形や六角形などのおしゃれなモザイク効果です。デモはこちら↓から。

こちらはボロノイのモザイクです。(デモはこちら

3. 窓ガラスの雨粒

最後に窓ガラスの雨粒のような効果です。シェーダーのコードはShadertoyのこちらから拝借しました。デモはこちらです。

おわりに

それでは皆さん、素敵な年末をお過ごし下さい。明日、3日目は@ujikawa1026の「マネージャーはなぜ忙しいのか。3年間やって少し分かってきたこと。」です。