#p5js のライブラリ「p5.brush」の仕様を少しずつ紐解いていく：ブラシについて【完走賞ゲット-5】

※ Qiita の完走賞をゲットするための条件は「単一／複数のカレンダーに投稿した記事が合計25」です

この記事は、「完走賞ゲットのため小ネタ 25記事を投稿しようとチャレンジ v2 Advent Calendar 2023」の 5日目の記事です。

今回の内容

今回の記事の内容は、以下の記事でもとりあげた「p5.brush」に関する記事です。

●p5.js でステキな表現がいろいろできそうな p5.brush のメモ #JavaScript - Qiita
　https://qiita.com/youtoy/items/acb172de834a6dd91784

この p5.brush は様々な機能を搭載していて、以下の公式リファレンスを見ていくと多くの情報があるので、それを少しずつ紐解いてくというのができればと思います。
今回の内容は、その中でも「p5.brush のブラシ」について見ていきます。

●acamposuribe/p5.brush: Unlock custom brushes, natural fill effects and intuitive hatching in p5.js
　https://github.com/acamposuribe/p5.brush#reference

やってみた内容

今回の技術の話に入っていく前に、やってみた内容の動画を先に紹介してみます。

以下では、キー押下をトリガーに、ブラシを切り替えて円を描画しています（あと、brush.circle() の第三引数を true にしたもの、false にしたもののそれぞれを同時に描画しています）。
また、キャンバスの上のところに h3要素を使って、何のブラシが選択されたかを表示するようにしました。

p5.brush のブラシ

p5.brush のブラシでは、ブラシを指定することができます。

公式リファレンス内で「デフォルトで用意されたブラシ」という記載があり、11種類のブラシがあるようです。

テキストで抜き出すと、以下のとおりです。

Default Brushes: The library includes a default set of 11 brushes: 2B, HB, 2H, cpencil, pen, rotring, spray, marker, marker2, charcoal, and hatch_brush (for clean hatching).

ブラシのリストを取得

公式の「Example 1 - Brush Rain」で使われていた処理でもありますが、上記のブラシをリストで取り出す方法があります。

具体的には、 brush.box() を使います。

ブラシを指定して使ってみた事例

上で掲載していた動画のものを試す前に、最初に p5.brush を試した時に、ブラシの情報を見かけて気になっていました。

ちなみに、自分の最初のお試しでは、公式の「Example 1 - Brush Rain」では全ブラシがランダムに選択されて使われるという処理になっていたのを、「"spray", "hatch_brush"」の 2つのどちらかをランダムに選ぶようなものをやっていました。

今回は、シンプルな内容でブラシを切り替えるということを試してみます。

簡単なプログラムでブラシを試す

それでは、シンプルな描画でブラシを使い比べてみます。

上で掲載した動画に関し、描画処理のために p5.js Web Editor上で書いたプログラムは、以下のとおりです。

let palette = ["#4E5BA6", "#80DDF2", "#F25749", "#3B8C4F", "#F2C335"];

let availableBrushes, selectedBrush;
let h3;

function setup() {
  createCanvas(650, 500, WEBGL).position(0, 60);
  background(245);

  availableBrushes = brush.box();

  h3 = createElement("h3", "ブラシ: ");
  h3.position(20, 5);
}

function keyPressed() {
  background(245);

  selectedBrush = random(availableBrushes);
  brush.set(selectedBrush, random(palette), 5);
  brush.circle(0, 0, width * 0.1, true);
  brush.circle(0, 0, width * 0.1, false);
  brush.reDraw();

  h3.html(`ブラシ: ${selectedBrush}`);
}

availableBrushes = brush.box(); のところで取得したブラシのリストを、 selectedBrush = random(availableBrushes) の処理で 1つランダムに取り出しています。

あと、以下の部分の第四引数は、仕様で r (Boolean): Optional. When true, applies a hand-drawn style to the circle. と書かれていたものを、 true／false の両方で試してみたという感じです。

  brush.circle(0, 0, width * 0.1, true);
  brush.circle(0, 0, width * 0.1, false);

それと brush.reDraw(); については、とりあえず、必要そうだったので入れてみたという感じで、詳細は調査中です。

当初はこれを入れてなかったのですが、その状態だと keyPressed() のイベント発生時に描画が行われませんでした。そして、リファレンスを読んでいたら、以下のあたりが関連しそうかもしれないと思って、処理を加えてみました（そうしたら、無事に描画が行われるようになりました）。

まだ自分がよく分かってない部分があるので、詳細を見ていければと思います。

おわりに

今回、p5.brush のブラシの仕様の一部を見てみてり、試してみたりしました。
まだ、上記の内容だけではブラシの仕様を全て追えてない状態なので、引き続き、見ていければと思っています。

とりあえず、次はブラシ以外のところをみていきつつ、どこかのタイミングでブラシ話の続きを扱う感じにできればと思っています。