Merge pull request #17 from HashLips/dev

HashLips · web-flow · commit e4c2fe47329b · 2021-09-16T21:33:13.000+02:00
Added blending modes
diff --git a/README.md b/README.md
@@ -101,6 +101,60 @@ const layerConfigurations = [
 
 Then optionally, update your `format` size, ie the outputted image size, and the `growEditionSizeTo` on each `layerConfigurations` object, which is the amount of variation outputted.
 
+If you want to play around with different blending modes, you can add a `blend: MODE.colorBurn` field to the layersOrder object. If you need a layers to have a different opacity then you can add the `opacity: 0.7` field to the layersOrder object as well. Both the `blend: MODE.colorBurn` and `opacity: 0.7` can be addes on the same layer if you want to.
+
+Here is an example on how you can play around with both filter fields:
+
+```js
+const layerConfigurations = [
+  {
+    growEditionSizeTo: 5,
+    layersOrder: [
+      { name: "Background" },
+      { name: "Eyeball" },
+      { name: "Eye color", blend: MODE.colorBurn },
+      { name: "Iris" },
+      { name: "Shine" },
+      { name: "Bottom lid", blend: MODE.overlay, opacity: 0.7 },
+      { name: "Top lid", opacity: 0.7 },
+    ],
+  },
+];
+```
+
+Here is a list of the different blending modes that you can optionally use.
+
+```js
+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",
+};
+```
+
 When you are all ready, run the following command and your outputted art will be in the `build` directory:
 
 ```sh
@@ -136,7 +190,28 @@ The program will output all the images in the `build` directory along with the m
 }
 ```
 
-That's it, you're done. Hope you create some awesome artworks with this code 👄.
+That's it, you're done.
+
+### Printing rarity data (Experimental feature)
+
+To see the percentages of each attribute across your collection, run:
+
+```sh
+node rarityData.js
+```
+
+The output will look something like this:
+
+```sh
+Trait type: Bottom lid
+{ trait: 'High', chance: '20', occurrence: '40' }
+{ trait: 'Low', chance: '40', occurrence: '60' }
+{ trait: 'Middle', chance: '40', occurrence: '0' }
+
+Trait type: Top lid
+{ trait: 'High', chance: '30', occurrence: '20' }
+{ trait: 'Low', chance: '20', occurrence: '40' }
+{ trait: 'Middle', chance: '50', occurrence: '40' }
+```
 
-### Printing rarity data
-To see the percentages of each attribute across your collection, run `node rarityData.js`
+Hope you create some awesome artworks with this code 👄
diff --git a/package.json b/package.json
@@ -21,7 +21,6 @@
   "author": "Daniel Eugene Botha (HashLips)",
   "license": "MIT",
   "dependencies": {
-    "all": "^0.0.0",
     "canvas": "^2.8.0",
     "sha1": "^1.1.1"
   }
diff --git a/rarityData.js b/rarityData.js
@@ -1,92 +1,84 @@
-'use strict';
+"use strict";
 
-const fs = require('fs');
+const fs = require("fs");
 const path = require("path");
 const isLocal = typeof process.pkg === "undefined";
 const basePath = isLocal ? process.cwd() : path.dirname(process.execPath);
 const layersDir = `${basePath}/layers`;
 
-const {
-  layerConfigurations
-} = require("./src/config.js");
+const { layerConfigurations } = require("./src/config.js");
 
-const {
-  getElements
-} = require("./src/main.js");
+const { getElements } = require("./src/main.js");
 
 // read json data
-let rawdata = fs.readFileSync('build/_metadata.json');
+let rawdata = fs.readFileSync("build/_metadata.json");
 let data = JSON.parse(rawdata);
 let editionSize = data.length;
 
 let rarityData = [];
 
 // intialize layers to chart
 layerConfigurations.forEach((config) => {
-	let layers = config.layersOrder;
+  let layers = config.layersOrder;
 
-	layers.forEach((layer) => {
+  layers.forEach((layer) => {
+    // get elements for each layer
+    let elementsForLayer = [];
+    let elements = getElements(`${layersDir}/${layer.name}/`);
+    elements.forEach((element) => {
+      // just get name and weight for each element
+      let rarityDataElement = {
+        trait: element.name,
+        chance: element.weight.toFixed(0),
+        occurrence: 0, // initialize at 0
+      };
+      elementsForLayer.push(rarityDataElement);
+    });
 
-		// get elements for each layer
-		let elementsForLayer = [];
-		let elements = getElements(`${layersDir}/${layer.name}/`);
-		elements.forEach((element) => {
-			// just get name and weight for each element
-			let rarityDataElement = {
-				trait: element.name,
-				chance: element.weight.toFixed(2),
-				occurrence: 0 // initialize at 0
-			}
-			elementsForLayer.push(rarityDataElement)
-		});
-
-		// don't include duplicate layers
-		if (!rarityData.includes(layer.name))
-		{
-			// add elements for each layer to chart
-			rarityData[layer.name] = elementsForLayer;
-		}
-	});
+    // don't include duplicate layers
+    if (!rarityData.includes(layer.name)) {
+      // add elements for each layer to chart
+      rarityData[layer.name] = elementsForLayer;
+    }
+  });
 });
 
 // fill up rarity chart with occurrences from metadata
 data.forEach((element) => {
-	let attributes = element.attributes;
+  let attributes = element.attributes;
 
-	attributes.forEach((attribute) => {
-		let traitType = attribute.trait_type;
-		let value = attribute.value;
+  attributes.forEach((attribute) => {
+    let traitType = attribute.trait_type;
+    let value = attribute.value;
 
-		let rarityDataTraits = rarityData[traitType];
-		rarityDataTraits.forEach((rarityDataTrait) => {
-			if (rarityDataTrait.trait == value){
-				// keep track of occurrences
-				rarityDataTrait.occurrence++;
-			}
-		});
-	});
+    let rarityDataTraits = rarityData[traitType];
+    rarityDataTraits.forEach((rarityDataTrait) => {
+      if (rarityDataTrait.trait == value) {
+        // keep track of occurrences
+        rarityDataTrait.occurrence++;
+      }
+    });
+  });
 });
 
 // convert occurrences to percentages
 for (var layer in rarityData) {
-	for (var attribute in rarityData[layer])
-	{
-		// convert to percentage
-		rarityData[layer][attribute].occurrence = 
-			(rarityData[layer][attribute].occurrence / editionSize) * 100;
+  for (var attribute in rarityData[layer]) {
+    // convert to percentage
+    rarityData[layer][attribute].occurrence =
+      (rarityData[layer][attribute].occurrence / editionSize) * 100;
 
-		// show two decimal places in percent
-		rarityData[layer][attribute].occurrence =
-			rarityData[layer][attribute].occurrence.toFixed(2);
-	}
+    // show two decimal places in percent
+    rarityData[layer][attribute].occurrence =
+      rarityData[layer][attribute].occurrence.toFixed(0);
+  }
 }
 
 // print out rarity data
 for (var layer in rarityData) {
-	console.log(`Trait type: ${layer}`)
-	for (var trait in rarityData[layer])
-	{
-		console.log(rarityData[layer][trait])
-	}
-	console.log()
-}
+  console.log(`Trait type: ${layer}`);
+  for (var trait in rarityData[layer]) {
+    console.log(rarityData[layer][trait]);
+  }
+  console.log();
+}
diff --git a/src/blendMode.js b/src/blendMode.js
@@ -0,0 +1,32 @@
+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",
+};
+
+module.exports = {
+  MODE,
+};
diff --git a/src/config.js b/src/config.js
@@ -1,10 +1,11 @@
+const { MODE } = require("./blendMode.js");
 const description =
   "This is the description of your NFT project, remember to replace this";
 const baseUri = "https://hashlips/nft";
 
 const layerConfigurations = [
   {
-    growEditionSizeTo: 20,
+    growEditionSizeTo: 5,
     layersOrder: [
       { name: "Background" },
       { name: "Eyeball" },
diff --git a/src/main.js b/src/main.js
@@ -71,6 +71,9 @@ const layersSetup = (layersOrder) => {
     id: index,
     name: layerObj.name,
     elements: getElements(`${layersDir}/${layerObj.name}/`),
+    blendMode:
+      layerObj["blend"] != undefined ? layerObj["blend"] : "source-over",
+    opacity: layerObj["opacity"] != undefined ? layerObj["opacity"] : 1,
   }));
   return layers;
 };
@@ -124,9 +127,11 @@ const loadLayerImg = async (_layer) => {
   });
 };
 
-const drawElement = (_element) => {
-  ctx.drawImage(_element.loadedImage, 0, 0, format.width, format.height);
-  addAttributes(_element);
+const drawElement = (_renderObject) => {
+  ctx.globalAlpha = _renderObject.layer.opacity;
+  ctx.globalCompositeOperation = _renderObject.layer.blendMode;
+  ctx.drawImage(_renderObject.loadedImage, 0, 0, format.width, format.height);
+  addAttributes(_renderObject);
 };
 
 const constructLayerToDna = (_dna = [], _layers = []) => {
@@ -136,6 +141,8 @@ const constructLayerToDna = (_dna = [], _layers = []) => {
     );
     return {
       name: layer.name,
+      blendMode: layer.blendMode,
+      opacity: layer.opacity,
       selectedElement: selectedElement,
     };
   });
@@ -176,7 +183,11 @@ const writeMetaData = (_data) => {
 const saveMetaDataSingleFile = (_editionCount) => {
   fs.writeFileSync(
     `${buildDir}/${_editionCount}.json`,
-    JSON.stringify(metadataList.find((meta) => meta.edition == _editionCount))
+    JSON.stringify(
+      metadataList.find((meta) => meta.edition == _editionCount),
+      null,
+      2
+    )
   );
 };
 
@@ -200,13 +211,13 @@ const startCreating = async () => {
           loadedElements.push(loadLayerImg(layer));
         });
 
-        await Promise.all(loadedElements).then((elementArray) => {
+        await Promise.all(loadedElements).then((renderObjectArray) => {
           ctx.clearRect(0, 0, format.width, format.height);
           if (background.generate) {
             drawBackground();
           }
-          elementArray.forEach((element) => {
-            drawElement(element);
+          renderObjectArray.forEach((renderObject) => {
+            drawElement(renderObject);
           });
           saveImage(editionCount);
           addMetadata(newDna, editionCount);
@@ -232,7 +243,7 @@ const startCreating = async () => {
     }
     layerConfigIndex++;
   }
-  writeMetaData(JSON.stringify(metadataList));
+  writeMetaData(JSON.stringify(metadataList, null, 2));
 };
 
 module.exports = { startCreating, buildSetup, getElements };

Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,6 @@`
`21`	`21`	`"author": "Daniel Eugene Botha (HashLips)",`
`22`	`22`	`"license": "MIT",`
`23`	`23`	`"dependencies": {`
`24`		`- "all": "^0.0.0",`
`25`	`24`	`"canvas": "^2.8.0",`
`26`	`25`	`"sha1": "^1.1.1"`
`27`	`26`	`}`