Merge pull request #9 from caiaga/main

adding readme, logs, some improvements

Author: HashLips

README.md

@@ -1,2 +1,36 @@
 # generative-art-opensource
 Create generative art by using the canvas api and node js, feel free to contribute to this repo with new ideas.
+
+# Project Setup
+- install `node.js` on your local system (https://nodejs.org/en/)
+- clone the repository to your local system `[email protected]:HashLips/generative-art-opensource.git`
+- run `yarn add all` to install dependencies
+
+# How to use
+## Run the code
+1. Run `node index.js`
+2. Open the `./output` folder to find your generated images to use as NFTs
+
+## Adjust the provided configuration and resources
+### Configuration file
+The file `./input/config.js` contains the following properties that can be adjusted to your preference in order to change the behavior of the NFT generation procedure:
+- width: - of your image in pixels. Default: `1000px`
+- height: - of your image in pixels. Default: `1000px`
+- dir: - where image parts are stored. Default: `./input`
+- description: - of your generated NFT
+- baseImageUri: - URL base to access your NFTs from. This will be used by platforms to find your image resource. This expects the image to be accessible by it's id like `${baseImageUri}/${id}`.
+- startEditionFrom: - number (int) to start naming NFTs from.
+- editionSize: - number (int) to end edition at.
+- rarityWeights: - allows to provide rarity categories and how many of each type to include in an edition.
+- layers: list of layers that should be used to render the image. See next section for detail.
+
+### Image layers 
+The image layers are different parts that make up a full image by overlaying on top of each other. E.g. in this example we start with the eyeball and layer features like the eye lids or iris on top to create the completed and unique eye, which we can then use as part of our NFT collection.
+To ensure uniqueness, we want to add various features and multiple options for each of them in order to allow enough permutations for the amount of unique images we require.
+
+To start, copy the layers/features and their images in a flat hierarchy at a directory of your choice (by default we expect them in `./input/`). The features should contain options for each rarity that is provided via the config file.
+
+After adding the layers, adjust them accordingly in the `config.js` by providing the directory path, positioning and sizes.
+
+# Development suggestions
+- Preferably use VSCode with the prettifier plugin for a consistent coding style (or equivalent js formatting rules)

index.js

@@ -8,23 +8,21 @@ const {
   baseImageUri,
   editionSize,
   startEditionFrom,
-  endEditionAt,
   rarityWeights,
 } = require("./input/config.js");
 const console = require("console");
 const canvas = createCanvas(width, height);
 const ctx = canvas.getContext("2d");
-var metadataList = [];
-var attributesList = [];
-var dnaList = [];
 
+// saves the generated image to the output folder, using the edition count as the name
 const saveImage = (_editionCount) => {
   fs.writeFileSync(
     `./output/${_editionCount}.png`,
     canvas.toBuffer("image/png")
   );
 };
 
+// adds a signature to the top left corner of the canvas
 const signImage = (_sig) => {
   ctx.fillStyle = "#000000";
   ctx.font = "bold 30pt Courier";
@@ -33,6 +31,7 @@ const signImage = (_sig) => {
   ctx.fillText(_sig, 40, 40);
 };
 
+// generate a random color hue
 const genColor = () => {
   let hue = Math.floor(Math.random() * 360);
   let pastel = `hsl(${hue}, 100%, 85%)`;
@@ -44,7 +43,8 @@ const drawBackground = () => {
   ctx.fillRect(0, 0, width, height);
 };
 
-const addMetadata = (_dna, _edition) => {
+// add metadata for individual nft edition
+const generateMetadata = (_dna, _edition, _attributesList) => {
   let dateTime = Date.now();
   let tempMetadata = {
     dna: _dna.join(""),
@@ -53,20 +53,23 @@ const addMetadata = (_dna, _edition) => {
     image: `${baseImageUri}/${_edition}`,
     edition: _edition,
     date: dateTime,
-    attributes: attributesList,
+    attributes: _attributesList,
   };
-  metadataList.push(tempMetadata);
-  attributesList = [];
+  return tempMetadata;
 };
 
-const addAttributes = (_element) => {
+// prepare attributes for the given element to be used as metadata
+const getAttributeForElement = (_element) => {
   let selectedElement = _element.layer.selectedElement;
-  attributesList.push({
+  let attribute = {
     name: selectedElement.name,
     rarity: selectedElement.rarity,
-  });
+  };
+  return attribute;
 };
 
+// loads an image from the layer path
+// returns the image in a format usable by canvas
 const loadLayerImg = async (_layer) => {
   return new Promise(async (resolve) => {
     const image = await loadImage(`${_layer.selectedElement.path}`);
@@ -82,9 +85,11 @@ const drawElement = (_element) => {
     _element.layer.size.width,
     _element.layer.size.height
   );
-  addAttributes(_element);
 };
 
+// check the configured layer to find information required for rendering the layer
+// this maps the layer information to the generated dna and prepares it for
+// drawing on a canvas
 const constructLayerToDna = (_dna = [], _layers = [], _rarity) => {
   let mappedDnaToLayers = _layers.map((layer, index) => {
     let selectedElement = layer.elements[_rarity][_dna[index]];
@@ -99,24 +104,15 @@ const constructLayerToDna = (_dna = [], _layers = [], _rarity) => {
   return mappedDnaToLayers;
 };
 
-const getRarity = (_editionCount) => {
-  let rarity = "";
-  rarityWeights.forEach((rarityWeight) => {
-    if (
-      _editionCount >= rarityWeight.from &&
-      _editionCount <= rarityWeight.to
-    ) {
-      rarity = rarityWeight.value;
-    }
-  });
-  return rarity;
-};
-
+// check if the given dna is contained within the given dnaList 
+// return true if it is, indicating that this dna is already in use and should be recalculated
 const isDnaUnique = (_DnaList = [], _dna = []) => {
   let foundDna = _DnaList.find((i) => i.join("") === _dna.join(""));
   return foundDna == undefined ? true : false;
 };
 
+// create a dna based on the available layers for the given rarity
+// use a random part for each layer
 const createDna = (_layers, _rarity) => {
   let randNum = [];
   _layers.forEach((layer) => {
@@ -126,48 +122,107 @@ const createDna = (_layers, _rarity) => {
   return randNum;
 };
 
+// holds which rarity should be used for which image in edition
+let rarityForEdition;
+// get the rarity for the image by edition number that should be generated
+const getRarity = (_editionCount) => {
+  if (!rarityForEdition) {
+    // prepare array to iterate over
+    rarityForEdition = [];
+    rarityWeights.forEach((rarityWeight) => {
+      for (let i = rarityWeight.from; i <= rarityWeight.to; i++) {
+        rarityForEdition.push(rarityWeight.value);
+      }
+    });
+  }
+  return rarityForEdition[editionSize - _editionCount];
+};
+
 const writeMetaData = (_data) => {
   fs.writeFileSync("./output/_metadata.json", _data);
 };
 
+// holds which dna has already been used during generation
+let dnaListByRarity = {};
+// holds metadata for all NFTs
+let metadataList = [];
+// Create generative art by using the canvas api
 const startCreating = async () => {
+  console.log('##################');
+  console.log('# Generative Art');
+  console.log('# - Create your NFT collection');
+  console.log('##################');
+
+  console.log();
+  console.log('start creating NFTs.')
+
+  // clear meta data from previous run
   writeMetaData("");
+
+  // prepare dnaList object
+  rarityWeights.forEach((rarityWeight) => {
+    dnaListByRarity[rarityWeight.value] = [];
+  });
+
+  // create NFTs from startEditionFrom to editionSize
   let editionCount = startEditionFrom;
-  while (editionCount <= endEditionAt) {
-    console.log(editionCount);
+  while (editionCount <= editionSize) {
+    console.log('-----------------')
+    console.log('creating NFT %d of %d', editionCount, editionSize);
 
+    // get rarity from to config to create NFT as
     let rarity = getRarity(editionCount);
-    console.log(rarity);
+    console.log('- rarity: ' + rarity);
 
+    // calculate the NFT dna by getting a random part for each layer/feature 
+    // based on the ones available for the given rarity to use during generation
     let newDna = createDna(layers, rarity);
-    console.log(dnaList);
-
-    if (isDnaUnique(dnaList, newDna)) {
-      let results = constructLayerToDna(newDna, layers, rarity);
-      let loadedElements = []; //promise array
-
-      results.forEach((layer) => {
-        loadedElements.push(loadLayerImg(layer));
-      });
-
-      await Promise.all(loadedElements).then((elementArray) => {
-        ctx.clearRect(0, 0, width, height);
-        drawBackground();
-        elementArray.forEach((element) => {
-          drawElement(element);
-        });
-        signImage(`#${editionCount}`);
-        saveImage(editionCount);
-        addMetadata(newDna, editionCount);
-        console.log(`Created edition: ${editionCount} with DNA: ${newDna}`);
-      });
-      dnaList.push(newDna);
-      editionCount++;
-    } else {
-      console.log("DNA exists!");
+    while (!isDnaUnique(dnaListByRarity[rarity], newDna)) {
+      // recalculate dna as this has been used before.
+      console.log('found duplicate DNA ' + newDna.join('-') + ', recalculate...');
+      newDna = createDna(layers, rarity);
     }
+    console.log('- dna: ' + newDna.join('-'));
+
+    // propagate information about required layer contained within config into a mapping object
+    // = prepare for drawing
+    let results = constructLayerToDna(newDna, layers, rarity);
+    let loadedElements = [];
+
+    // load all images to be used by canvas
+    results.forEach((layer) => {
+      loadedElements.push(loadLayerImg(layer));
+    });
+
+    // elements are loaded asynchronously
+    // -> await for all to be available before drawing the image
+    await Promise.all(loadedElements).then((elementArray) => {
+      // create empty image
+      ctx.clearRect(0, 0, width, height);
+      // draw a random background color
+      drawBackground();
+      // store information about each layer to add it as meta information
+      let attributesList = [];
+      // draw each layer
+      elementArray.forEach((element) => {
+        drawElement(element);
+        attributesList.push(getAttributeForElement(element));
+      });
+      // add an image signature as the edition count to the top left of the image
+      signImage(`#${editionCount}`);
+      // write the image to the output directory
+      saveImage(editionCount);
+      let nftMetadata = generateMetadata(newDna, editionCount, attributesList);
+      metadataList.push(nftMetadata)
+      console.log('- metadata: ' + JSON.stringify(nftMetadata));
+      console.log('- edition ' + editionCount + ' created.');
+      console.log();
+    });
+    dnaListByRarity[rarity].push(newDna);
+    editionCount++;
   }
   writeMetaData(JSON.stringify(metadataList));
 };
 
-startCreating();
+// Initiate code
+startCreating();

input/config.js

@@ -5,7 +5,6 @@ const dir = __dirname;
 const description = "This is an NFT made by the coolest generative code.";
 const baseImageUri = "https://hashlips/nft";
 const startEditionFrom = 1;
-const endEditionAt = 10;
 const editionSize = 10;
 const rarityWeights = [
   {
@@ -107,6 +106,5 @@ module.exports = {
   baseImageUri,
   editionSize,
   startEditionFrom,
-  endEditionAt,
   rarityWeights,
 };