[p5js]p5.scribble.jsが楽しい！！
processingの2024年アドベントカレンダー2日目の記事になります。
今回はp5.scribble.jsと呼ばれる手書き風な図形が簡単に描けるライブラリが非常に楽しいので作例とともに機能紹介したいと思います。
p5.scribble.jsって何？
processingのhandyライブラリのような手書き風な図形を簡単に書くことができるライブラリになります。
使い方は以下のようにp5.scribble.jsを変数として呼び出して関数を実行します。
function setup() {
canvas = createCanvas(500, 500, WEBGL);
sb = new Scribble(); // p5.scribble.jsを呼び出す
background(210);
strokeWeight(3);
}
function draw() {
const nw = 100;
stroke("#77b09b");
sb.roughness = 4;
sb.scribbleRect(0, 0, nw, nw); // 四角を描く関数
noLoop();
}
実際に実行するとこんな感じになります。
p5.js editor上で手軽に触れるサンプルを用意したのでぜひこちらをコピーしてお試しください。
様々な関数が用意されている
p5.scribble.jsでは様々な図形を描く関数が用意されています。
- scribbleLine
p5.jsでいうline関数と同じ形で線を引くことができる関数です。
引数も同じでscribbleLine( x1, y1, x2, y2 )となります。
以下作例です。
- scribbleCurve
p5.jsでいうcurve関数と同じようにカーブを描くことができる関数です。関数の違いとして、curve関数はx1,y1/x3,y3がコントロール点でx2,y2/x4,y4がアンカーポイントでしたが、この関数ではx1,y1/x2,y2がコントロール点でx3,y3/x4,y4がアンカーポイントとなっています。
以下作例です。
- scribbleRect
四角を描く関数です。p5.jsのrect関数とパラメータは同じになります。
ただ角を丸くしたい場合は後述するscribbleRoundedRectを使用します。
以下作例です。
-
scribbleRoundedRect
-
scribbleEllipse
円を描くことができる関数です。
基本的に書き方はellipse関数と同じになりますがelllipse関数と違ってhパラメータは省略できないのと、オプションのdetailパラメータはありません。
以下作例です。
- scribbleFilling
今までは図形の関数でしたがこちらの関数はハッチングを描くことができます。
scribble.scribbleFilling( xCoords, yCoords, gap, angle );
xCoordsとyCoordsはそれぞれxとy座標の配列のことで、時計周りにハッチングしたい図形の値を入れます。gapは線と線のスペースの強度で、angleはハッチングの向きになります。
配列をうまく活用することで6角形のハッチングも描くことができます。
手書き風の強度を変えることができる
以下の四つのパラメータが存在します。
scribble.bowing = yourValue; // 線の曲がり具合を変える
scribble.roughness = yourValue; // 線の粗さを変える
scribble.maxOffset = yourValue; // 最大オフセットの設定
scribble.numEllipseSteps = yourValue; // 楕円を描くためにどのくらいの曲線が使用されるかを定義
yourValueには適当な値(0.1とか10だとか)を代入できます。
[おまけ]シェーダーを重ねてみる
p5.jsにはcreateShader関数とshader関数というシェーダーを付け加える機能が存在します。今回はおまけとしてこちらの機能を使ってp5.scribble.jsで作ったオブジェクトをさらに加工する遊びを行っていきます。
p5.jsではcreateCanvasをしてcanvasを作成する際に変数として画面全体を持つことができます。
このcanvasをシェーダーに渡すことでcanvas全体にシェーダーをかけることが可能になります。
canvas = createCanvas(500, 500, WEBGL); // これができる
// scribbleの処理
sb.scribbleRect(0, 0, 100, 100);
// canvasに直接シェーダーをかけられる
const theShader1 = createShader(shader1.vs, shader1.fs);
shader(theShader1);
theShader1.setUniform(`u_tex`, canvas);
theShader1.setUniform(`u_time`, frameCount / 35);
theShader1.setUniform("u_resolution", [width, height]);
image(canvas, 0, 0);
この機能を使って図形にシェーダーを重ねることで元々歪んでいた図形にさらに歪みを重ねるといった遊びも可能になります。
参考資料
sampleとしてわかりやすいと思ったコード
Discussion