Generativemasks を生成する JavaScript モジュールを作る

2021年10月17日日曜日

p5.js 作例

t f B! P L
Generativemasks の生成例

NFT アートの「Generativemasks」は、実行のたびに異なる色と模様が生成される、面白いタイプの NFT アートです。

👉 Read this article in English.

コードはオープンソースで、クリエイティブ・コモンズ BY-NC-SA 3.0 のライセンスに従うことで、自由に派生物を作ることが出来ます。

この派生物を作るのが面白そうだったので、私もやってみました。


すると、オリジナルのコードをそのままで使うと、いろいろと制約が多いことに気づきました。

  • キャンバスサイズを変えるとマスクの形状も変わる
  • randomSeed() の影響がコード全体に及ぶ
  • など

そこで、その制約を取り払うため、独立した JavaScript のモジュールを作成しました。サイズやカラーパレットを指定してやると、マスクを生成して p5.Graphics の形で返してくれるというものです。

これを使えばマスクの生成が簡単になり、生成したマスクをどう活用するかに神経を集中することができます。つまり、派生物の作成が超絶楽チンになるというわけです。

この JavaScript のモジュールを作例とともに紹介します。ぜひ、これを使って Generativemasks の派生物を作ってみてください。きっと楽しいですよ。

 

何を作ったか?

下記のように、Generativemasks のマスク生成の自由度を高めることができるコードです。

  • サイズ可変
  • カラーパレット指定可能(coolers URL 互換)
  • 背景有無指定可能
  • シャドー有無指定可能
  • テクスチャ有無指定可能

名前は Garg (Generates A Resembling Generativemasks)。「ギャーグ」とでも呼んでください。

Garg では Generativemasks とほぼ同じ形、模様のマスクを生成できますが、全く同じではありません。マスク生成のコードにも手を入れており、このモジュールが生成する画像はオリジナルの Generativemasks のそれと正確に同じにはなりません。

『オリジナルが欲しければ、オリジナルを使えばいいじゃない』という考え(開き直り)です。

 

実装例

サイズやカラーパレット、背景の有無を指定して自分好みの Generativemasks を生成する、Garg の機能をフルに使った Web アプリケーション「Generativemasks to Your Taste」を作りました。

Web アプリケーション「Generativemasks to Your Taste」の外観
「Generativemasks to Your Taste」 OpenProcessing 上で動かせます。

下記設定で生成すると、オリジナルの Generativemasks とほぼ同様のものを生成できます。

  • サイズ = 1600
  • カラーパレット指定なし
  • 背景あり
  • シャドーあり
  • テクスチャあり

 

その他の実装例

SYM さんの p5.pattern とのコラボ

SYM(@hyappy717) さん作のパターン生成ライブラリ p5.pattern を用いて Generativemasks の模様を描く Web アプリケーションです。Garg をいじって GargPattern というものを作り、それを使って作りました。

Web アプリケーション「Generativemasks meets p5.pattern」の外観
「Generativemasks meets p5.pattern」 OpenProcessing 上で動かせます。

 

実はこれをやりたくて Garg を作りました

マスクを高度に抽象化すると銘打って、"クリエイティブ・コーディングの定番「ノード・ガーデン」:応用編"という記事で書いた同じ色のノードを線で結ぶノード・ガーデンを Generativemasks に適用したものです。

Web アプリケーション「Generativemasks Abstractor」の外観
「Generativemasks Abstractor」 OpenProcessing 上で動かせます。

低レベルの抽象化だとこういう絵になります。

Web アプリケーション「Generativemasks Abstractor」の処理結果

 

'Garg' の使い方

シャドーあり、テクスチャなし、背景なしで、ID=37 のマスクを 480x480 サイズでキャンバスに描画するコード例です。


const gg = new Garg(true, false, false);
image(gg.createMask(37, 480), 0, 0);

Garg で生成したマスクの例

 

コンストラクタ

new Garg(s, t, b)

パラメータ

s boolean : true シャドーあり
t boolean : true テクスチャあり
b boolean : true 背景あり、 false 背景は透明

 

カラーパレットのチェック

メソッド

chkRgbStrings(s)

パラメータ

s String : カラーパレット

説明

カラーパレットの形式をチェックし、OK なら true、NG なら false を返します。

正しい形式であるには、RGB で RRGGBB-RRGGBB-RRGGBB の形、少なくとも 3色以上あることが必要です。隠し機能(隠してないけど)として、coolers の URL 形式そのままで使えます。
例:https://coolors.co/000000-14213d-fca311-e5e5e5-ffffff

 

マスクの生成

メソッド

createMask(i, s)

パラメータ

i Number : 生成する Generativemasks のマスク ID。オリジナルは 0 から 9999 ですが、Garg では 10000 以上も受け付けます。
s Number : 生成する画像のサイズ。必ず正方形を返すので、 s x s ピクセルの画像となります。

説明

マスクを生成し、p5.Graphics の形式で返します。

 

指定したカラーパレットの適用

メソッド

setPalette(p)

パラメータ

p String : カラーパレット

説明

与えられたカラーパレットを適用します。このカラーパレットでマスクを生成するには、createMask() の前にこのメソッドを実行することが必要です。

カラーパレットの形式については chkRgbStrings() の説明を参照ください。

 

ランダムなカラーパレットの適用

メソッド

setRandomPalette()

パラメータ

なし

説明

Garg に内蔵されたカラーパレットからランダムに選択したパレットを適用します。

 

Garg のコード

コードは OpenProcessing で公開していますので、参照ください。

 

謝辞

Garg を使って何か作っていただけると、とても嬉しいです。バグなど見つかりましたら Twitter で教えていただけるとありがたいです。

実は、JavaScript のモジュールを作るは初めてで、果たしてこの 'Garg' を「モジュール」と読んでよいのかも自信が無いところです。

最後に、Garg 作成の楽しい時間を私に与えてくださった、Generativemasks のコード公開にかかわった皆さん、オリジナルの Generativemasks 作者である takawo shunsuke (@takawo) さんに感謝申し上げます。ありがとうございました。

 

QooQ