p5.jsのWEBGLモードではGLSLを利用したshader記述することができます。 p5.jsでsetUniform()を用いることで、GLSLへp5.jsで宣言した値、変数を渡すことができます。

p5.jsとシェーダーで手書き風エフェクトを行います。 作例 ノイズエフェクト まとめ ソースコード 参考文献 作例 まず、作例を見ていきます。 この様な形でp5.jsで描いた図形にノイズエフェクトをシェーダー(GLSL)で適用します。 その効果で、線が手で書いた…

p5.jsで作った描画に対して、色や形を変えることができたら、表現の方法が物凄く広がるはずです。 p5.jsで描いたものをテクスチャとしてシェーダー（GLSL）で扱うことで、p5.jsで作ったものにポストエフェクトをすることができます。 作例 シェーダー（GLSL…

p5.jsで3D図形のBoxにシェーダーを適用させてみます。 Boxの法線 Boxの各面を塗り分ける まとめ 参考文献 Boxの法線 Box（立方体）は面を6面持つ3D図形です。 それぞれの面に対して垂直方向を表すのが法線になります。 6面の面はxyzの3方向に向いており、そ…

p5.jsで自作したShapeにシェーダーを適用していきます。 自作Shapeは前回の記事で扱った正多角形を使います。 gin-graphic.hatenablog.com 自作図形にシェーダー適用 textureModeの設定 テクスチャ座標の設定 正多角形（外周）へシェーダー適用 作例 参考文…

前回までフラグメントシェーダーを中心に、p5.js で書いた図形の描画を変化させてきました。 gin-graphic.hatenablog.com 今回は頂点シェーダー（バーテックスシェーダー）を利用して、図形の位置や形を変えてみます。 GLSLで図形の変形 図形の移動 図形の拡…

前回までは静止した描画を行ってきました。 gin-graphic.hatenablog.com 今回はp5.jsから変数を渡すことで、動的にGLSLでの描画を変化させ、動画を作りたいと思います。 シェーダー描画を動かす まとめ 参考文献 p5.jsでのシェーダー（GLSL）入門 シェーダー…

前回はp5.jsからシェーダーを呼び出して、画面全体にGLSLで描画を行いました。 gin-graphic.hatenablog.com 今回はシェーダーの適応範囲を変え、p5.jsで描画した図形を対象にしていきます。 シェーダーを図形に適用 図形を一色で塗りつぶす 図形内にGLSLで描…

この記事はp5.jsは知っている、使ったことがあるけど、シェーダーとかGLSLは扱ったことがないという人に向けて書いていきます。 p5.jsを知らないという方は、調べてみて下さい。 p5.jsはクリエイティブ・コーディング用のJavaScriptライブラリで、様々なコン…