HashLips Art Engine Documentation

To run the generation engine, use npm run build or node index.js.

Output locations:

• Images: build/images
• Metadata JSON: build/json
• Collection summary: build/json/_metadata.json

Organize your assets into folders within the /layers/ directory. To assign rarity, append a weight to the filename using a delimiter (default is #), for example: example element#70.png.

You can customize the delimiter by changing the rarityDelimiter variable in src/config.js.

To use the HashLips Art Engine, ensure you have Node.js (v10.18.0) installed. You can install the project by cloning the repository and using either yarn or npm to install dependencies.

git clone https://github.com/HashLips/hashlips_art_engine.git

# If using yarn
yarn install

# Or if using npm
npm install

To export GIFs based on your layers, set export: true in the gif object within src/config.js. You can configure repeat, quality, and delay (in ms).

Note: repeat: -1 creates a single frame render, while repeat: 0 loops the GIF infinitely.

const gif = {
  export: true,
  repeat: 0,
  quality: 100,
  delay: 500,
};

To include custom key-value pairs in every metadata file, define an extraMetadata object in src/config.js.

const extraMetadata = {
  creator: "Daniel Eugene Botha",
};

In src/config.js, configure the layerConfigurations array. Each object defines a set of layers and the total number of artworks to generate using growEditionSizeTo. The layersOrder array specifies the order of layers from back to front. The name property must match the folder name in the /layers/ directory.

const layerConfigurations = [
  {
    growEditionSizeTo: 100,
    layersOrder: [
      { name: "Background" },
      { name: "Head" },
      { name: "Mouth" },
      { name: "Eyes" },
      { name: "Eyeswear" },
      { name: "Headwear" },
    ],
  },
];

When generating for Solana, use the solanaMetadata object to define on-chain attributes.

• symbol: The collection symbol.
• seller_fee_basis_points: The percentage taken from secondary market sales. Note that this is in basis points (e.g., 1000 equals 10%).
• external_url: A link to the project website or social media.
• creators: An array of objects containing the address and the share (percentage) for each creator.

const solanaMetadata = {
  symbol: "YC",
  seller_fee_basis_points: 1000, // 1000 = 10%
  external_url: "https://www.youtube.com/c/hashlipsnft",
  creators: [
    {
      address: "7fXNuer5sbZtaTEPhtJ5g5gNtuyRoKkvxdjEjEnPN4mC",
      share: 100,
    },
  ],
};

Use the layerConfigurations array to define how your collection is built.

• growEditionSizeTo: The total number of unique items to generate.
• layersOrder: An array of objects specifying the name of each layer. Layers are stacked in the order they appear in this array (the first item is the bottom-most layer).

Note: If you are using Solana, the collection index starts from 0 automatically.

const layerConfigurations = [
  {
    growEditionSizeTo: 5,
    layersOrder: [
      { name: "Background" },
      { name: "Eyeball" },
      { name: "Eye color" },
      { name: "Iris" },
      { name: "Shine" },
      { name: "Bottom lid" },
      { name: "Top lid" },
    ],
  },
];

The MODE object contains the following valid blending mode strings for the blend option:

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",
};