NFTのメタデータを基にHashLipsで画像を再作成する

ジェネラティブNFTの画像をHashLipsで作る際に以下のようなシーンがあります。

• 良い組み合わせができたけど、パーツ自体を修正したい。もう一度ビルドすると別の組み合わせになってしまう。
• どうしても狙った組み合わせが作りたい。

いずれも、用意したパーツを手動で組み合わせればできるといえばできますが、メタデータを基に再作成できれば良いのでは？ということで、コードを書いてみました。

リポジトリ

使い方

npmスクリプトに rebuild を追加しています。
実行すると、_metadata.jsonを基に画像と個別のメタデータを作成し直します。

$ npm run rebuild

例

棒人間のリポジトリを例に説明します。
https://github.com/two-pack/hashlips_art_engine/tree/example_stick_figure

とりあえず、1回ビルドしてみます。

$ npm run build

こんな感じで画像が生成されます。

目と口追加してみます（雑

これで再作成してみます。

$ npm run rebuild

こんな感じで新しいパーツを基に画像が再作成されています。下が再掲の変更前のものです。手足や胴体は変わってないですね。

続いて、_metadata.jsonを変更して任意の組み合わせを作るケースです。
1.pngのメタデータは以下のようになっています。

{
  "name": "Example: Stick Figure 1 #1",
  "description": "This is the first step in web3.",
  "image": "/1.png",
  "dna": "56ead44d633660346d1e8aae33a551c543922745",
  "edition": 1,
  "date": 1688874975277,
  "attributes": [
    {
      "trait_type": "Head",
      "value": "Red"
    },
    {
      "trait_type": "Body",
      "value": "Red"
    },
    {
      "trait_type": "Right Arm",
      "value": "Blue"
    },
    {
      "trait_type": "Right Leg",
      "value": "Red"
    }
  ],
  "compiler": "HashLips Art Engine"
}

右腕も赤にしてみることにして、Right ArmをRedに変更して、ついでに左腕と足も追加します。

  {
    "name": "Example: Stick Figure 1 #1",
    "description": "This is the first step in web3.",
    "image": "/1.png",
    "dna": "56ead44d633660346d1e8aae33a551c543922745",
    "edition": 1,
    "date": 1688874975277,
    "attributes": [
      {
        "trait_type": "Head",
        "value": "Red"
      },
      {
        "trait_type": "Body",
        "value": "Red"
      },
      {
        "trait_type": "Right Arm",
        "value": "Red"
      },
      {
        "trait_type": "Right Leg",
        "value": "Red"
      },      {
        "trait_type": "Left Arm",
        "value": "Red"
      },
      {
        "trait_type": "Left Leg",
        "value": "Red"
      }
    ],
    "compiler": "HashLips Art Engine"
  }

上記のように_metadata.jsonを変更して再作成をすると、はいこの通り！
個別のJSONファイルも書き換わっています。