参考 https://note.com/standenglish/
フォルダのルートに移動し、yarnがインストールされている場合は、このコマンドを実行します。
yarn install
また、nodeがインストールされている場合は、このコマンドを実行することもできます。
npm install
layers」ディレクトリにフォルダを作成し、その中に全てのレイヤーアセットを追加してください。アセット名は、ファイル名にレアリティのウェイトが付いていれば何でもOKです。例えば、example element#70.png
のように。オプションとして、デリミタ #
を src/config.js
ファイル内の変数 rarityDelimiter
で好きなものに変更することができます。
全てのレイヤーを配置したら、src/config.js
に移動して layerConfigurations
オブジェクトの layersOrder
配列を更新し、レイヤーフォルダー名を後ろのレイヤーから前のレイヤーへ順番に並べてください。
例:_ ポートレートデザインを作成する場合、背景、頭、口、目、眼鏡、そしてヘッドウェアの順で作成します。
const layerConfigurations = [
{
growEditionSizeTo: 100,
layersOrder: [
{ name: "Head" },
{ name: "Mouth" },
{ name: "Eyes" },
{ name: "Eyeswear" },
{ name: "Headwear" },
],
},
];
各レイヤーオブジェクトの name
は、画像が格納されているフォルダ名(/layers/
内)を表します。
オプションとして、複数の異なる layerConfigurations
をコレクションに追加することができます。各設定はユニークで、異なるレイヤーオーダーを持つことができ、同じレイヤーを使用したり、新しいレイヤーを導入したりすることができます。これは、アーティストが自分のニーズに合わせてコレクションを微調整する際に、柔軟性を与えます。
例:ポートレートデザインを作成する場合、背景、頭、口、目、眼鏡、そしてヘッドウェアがあり、新しいレースを作成したり、単純にレイヤーの順番を変えたり、新しいレイヤーを追加する場合、layerConfigurations
と layersOrder
は次のようになります。
const layerConfigurations = [
{
// Creates up to 50 artworks
growEditionSizeTo: 50,
layersOrder: [
{ name: "Background" },
{ name: "Head" },
{ name: "Mouth" },
{ name: "Eyes" },
{ name: "Eyeswear" },
{ name: "Headwear" },
],
},
{
// Creates an additional 100 artworks
growEditionSizeTo: 150,
layersOrder: [
{ name: "Background" },
{ name: "Head" },
{ name: "Eyes" },
{ name: "Mouth" },
{ name: "Eyeswear" },
{ name: "Headwear" },
{ name: "AlienHeadwear" },
],
},
];
出力される画像サイズである format
サイズと、出力されるバリエーション量である各 layerConfigurations
オブジェクトの growEditionSizeTo
を更新してください。
コンフィグ.jsファイル内の変数
shuffleLayerConfigurationsを true に設定すると、画像を保存する
layerConfigurations` の順序を混ぜることができます。デフォルトではfalseになっており、すべての画像が数値順に保存されます。
もし、画像を生成するときに何が起こっているのかをデバッグするためにログを残したい場合は、config.js
ファイル内の変数 debugLogs
をtrueに設定することができます。デフォルトでは false になっているので、一般的なログしか見えません。
もし、異なるブレンドモードで遊びたい場合は、 blend.MODE.colorBurn
フィールドを追加してください。MODE.colorBurn` フィールドを追加することができます。
もし、レイヤーの不透明度を変えたい場合は、laysOrder options
オブジェクトに opacity: 0.7
フィールドを追加することができます。
DNAの一意性チェックでレイヤーを無視させたい場合は、options
オブジェクトに bypassDNA: true
を設定します。これは、例えば Background
レイヤーを形質として考慮しない一方で、残りの形質がユニークであることを確認する効果があります。レイヤーは最終的な画像に含まれます。
別のメタデータ属性名を使用するには、displayName: "Awesome Eye Color"
を options
オブジェクトに追加します。すべてのオプションはオプションであり、必要であれば同じレイヤーに追加することができます。
以下は、両方のフィルターフィールドを使った場合の例です。
const layerConfigurations = [
{
growEditionSizeTo: 5,
layersOrder: [
{ name: "Background" , {
options: {
bypassDNA: false;
}
}},
{ name: "Eyeball" },
{
name: "Eye color",
options: {
blend: MODE.destinationIn,
opacity: 0.2,
displayName: "Awesome Eye Color",
},
},
{ name: "Iris" },
{ name: "Shine" },
{ name: "Bottom lid", options: { blend: MODE.overlay, opacity: 0.7 } },
{ name: "Top lid" },
],
},
];
オプションで使用できるブレンドモードの一覧はこちらです。
const MODE = {
sourceOver: "source-over",
sourceIn: "source-in",
sourceOut: "source-out",
sourceAtop: "source-out",
destinationOver: "destination-over",
destinationIn: "destination-in",
destinationOut: "destination-out",
destinationAtop: "destination-atop",
lighter: "lighter",
copy: "copy",
xor: "xor",
multiply: "multiply",
screen: "screen",
overlay: "overlay",
darken: "darken",
lighten: "lighten",
colorDodge: "color-dodge",
colorBurn: "color-burn",
hardLight: "hard-light",
softLight: "soft-light",
difference: "difference",
exclusion: "exclusion",
hue: "hue",
saturation: "saturation",
color: "color",
luminosity: "luminosity",
};
準備ができたら、以下のコマンドを実行すると、出力されたアートは build/images
ディレクトリに、json は build/json
ディレクトリに置かれます。
npm run build
or
node index.js
Tこのプログラムは、build/images
ディレクトリにあるすべての画像を、build/json
ディレクトリにあるメタデータファイルとともに出力します。各コレクションは _metadata.json
ファイルを持ち、これは build/json
ディレクトリにあるコレクションのすべてのメタデータから構成されます。また、build/json
フォルダには、各画像ファイルを表す全てのシングルjsonファイルが格納されます。画像のシングルjsonファイルは、以下のようなものになります。
{
"dna": "d956cdf4e460508b5ff90c21974124f68d6edc34",
"name": "#1",
"description": "This is the description of your NFT project",
"image": "https://hashlips/nft/1.png",
"edition": 1,
"date": 1731990799975,
"attributes": [
{ "trait_type": "Background", "value": "Black" },
{ "trait_type": "Eyeball", "value": "Red" },
{ "trait_type": "Eye color", "value": "Yellow" },
{ "trait_type": "Iris", "value": "Small" },
{ "trait_type": "Shine", "value": "Shapes" },
{ "trait_type": "Bottom lid", "value": "Low" },
{ "trait_type": "Top lid", "value": "Middle" }
],
"compiler": "HashLips Art Engine"
}
また、config.js
ファイル内の extraMetadata
オブジェクト変数に、追加したい項目 (key: value) のペアを追加すれば、各メタデータ・ファイルに余分なメタデータを追加することができます。
const extraMetadata = {
creator: "Daniel Eugene Botha",
};
余分なメタデータが必要ない場合は、単にオブジェクトを空にしてください。デフォルトでは空です。
const extraMetadata = {};
コレクションを実行した後で、baseUri と description を更新したくなるかもしれません。baseUri と description を更新するには、単に以下を実行します。
npm run update_info
コレクションのプレビュー画像コラージュを作成し、実行します。
npm run preview
画像をピクセル画像に変換するためには、変換したい画像のリストが必要です。そこで、まずジェネレーターを実行します。 そして、このコマンドを実行するだけです。
npm run pixelate
すべての画像は /build/pixel_images
ディレクトリに出力されます。
もし、ピクセル化の比率を変更したい場合は、 src/config.js
ファイルにある pixelFormat
オブジェクトの ratio プロパティを更新してください。左側の数字が小さいほど、画像のピクセル化が強くなります。
const pixelFormat = {
ratio: 5 / 128,
};
コレクション全体の各属性のパーセンテージを見るには、以下を実行します。
npm run rarity
このような出力になります。
Trait type: Top lid
{
trait: 'High',
chance: '30',
occurrence: '3 in 20 editions (15.00 %)'
}
{
trait: 'Low',
chance: '20',
occurrence: '3 in 20 editions (15.00 %)'
}
{
trait: 'Middle',
chance: '50',
occurrence: '14 in 20 editions (70.00 %)'
}