今回の内容
p5.js のリポジトリのリリース情報を見ていて気になった新機能「p5.strands」を試した際のメモです。
お試しの結果
先に、今回のお試しの結果を掲載します。内容は、「マテリアルにシェーダーを使った描画」になります。
「p5.strands」を見かけた経緯
今回試した「p5.strands」を見かけた背景は、p5.js Web Editor でも標準設定となった p5.js の 2.x系の情報を久しぶりに追いかけたことです。
p5.js の 2.x系の内容については、2025年の 4月ごろに少し見てみたり、以下の記事を書いたりしていたことがありました。
●p5.js の新バージョン v2.0.0 のメモ（1.x から 2.x へのアップデート） - Qiita
https://qiita.com/youtoy/items/d9f26b3ad3f18e381035
しかし、その後は長らく p5.js の 2.x系の情報を見てない状態が続いていた状況でした。そのような中、p5.js Web Editor のライブラリの標準設定が 1.x系から 2.x系に切り替わっていた状況も出てきて、p5.js の 2.x系の情報を見ていくことにしました。
新機能「p5.strands」のお試し
お試しの際に元にしたコード
今回試した新機能「p5.strands」を実装したコードについて、その元になったコードは、以下の「release-v2.3.0」の部分に掲載されていたものを用いています。
●Releases · processing/p5.js
https://github.com/processing/p5.js/releases#release-v2.3.0
具体的には、以下の箇所のコードです。
とてもシンプルですが、シェーダーをマテリアルにした実行例の画像が良い感じだったので、これを動かしてみたくなりました。
実装したコード
今回用いたコードは、上記のコードにほんの少しだけ手を加えたものです。
具体的には以下のコードです。これを、p5.js Web Editor の sketch.js として用いました。
let myShader;
function setup() {
createCanvas(800, 600, WEBGL);
myShader = buildMaterialShader(myShaderBuilder);
}
function myShaderBuilder() {
finalColor.begin();
let coord = finalColor.texCoord;
finalColor.set(noise(coord.x, coord.y));
finalColor.end();
}
function draw() {
stroke(255);
background("#aaeeff");
shader(myShader);
orbitControl();
rotateX(frameCount * 0.015);
rotateY(frameCount * 0.02);
box(200);
}
なお、上記を動作させる際には、p5.js のバージョンにご注意ください。
ちなみに記事執筆時点では、新規にプロジェクトを作成した場合はバージョンが以下となるので、問題はないです。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@2.3.2/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5.sound@0.4.1/dist/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<script src="sketch.js"></script>
</body>
</html>
その他
以下は、公式ドキュメントの「p5.strands」に関するページです。
●p5.strands: Introduction to Shaders
https://p5js.org/tutorials/intro-to-p5-strands/
別途、こちらも見ていければと思います。