Merge pull request #146 from HashLips/dev

Added gif export

README.md

@@ -260,6 +260,21 @@ const pixelFormat = {
 };
 ```
 
+### Generate pixelated images from collection
+
+In order to export gifs based on the layers created, you just need to set the export on the `gif` object in the `src/config.js` file to `true`. You can also play around with the `repeat`, `quality` and the `delay` of the exported gif.
+
+Setting the `repeat: -1` will produce a one time render and `repeat: 0` will loop forever.
+
+```js
+const gif = {
+  export: true,
+  repeat: 0,
+  quality: 100,
+  delay: 500,
+};
+```
+
 ### Printing rarity data (Experimental feature)
 
 To see the percentages of each attribute across your collection, run:

modules/HashlipsGiffer.js

@@ -0,0 +1,38 @@
+const GifEncoder = require("gif-encoder-2");
+const { writeFile } = require("fs");
+
+class HashLipsGiffer {
+  constructor(_canvas, _ctx, _fileName, _repeat, _quality, _delay) {
+    this.canvas = _canvas;
+    this.ctx = _ctx;
+    this.fileName = _fileName;
+    this.repeat = _repeat;
+    this.quality = _quality;
+    this.delay = _delay;
+    this.initGifEncoder();
+  }
+
+  initGifEncoder = () => {
+    this.gifEncoder = new GifEncoder(this.canvas.width, this.canvas.height);
+    this.gifEncoder.setQuality(this.quality);
+    this.gifEncoder.setRepeat(this.repeat);
+    this.gifEncoder.setDelay(this.delay);
+  };
+
+  start = () => {
+    this.gifEncoder.start();
+  };
+
+  add = () => {
+    this.gifEncoder.addFrame(this.ctx);
+  };
+
+  stop = () => {
+    this.gifEncoder.finish();
+    const buffer = this.gifEncoder.out.getData();
+    writeFile(this.fileName, buffer, (error) => {});
+    console.log(`Created gif at ${this.fileName}`);
+  };
+}
+
+module.exports = HashLipsGiffer;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hashlips_art_engine",
-  "version": "1.0.5",
+  "version": "1.0.9",
   "description": "HashLips Art Engine is a tool used to create multiple different instances of artworks based on provided layers.",
   "main": "index.js",
   "bin": "index.js",
@@ -23,6 +23,7 @@
   "license": "MIT",
   "dependencies": {
     "canvas": "^2.8.0",
+    "gif-encoder-2": "^1.0.5",
     "sha1": "^1.1.1"
   }
 }

src/config.js

@@ -14,7 +14,7 @@ const description = "Remember to replace this description";
 const baseUri = "ipfs://NewUriToReplace";
 
 const solanaMetadata = {
-  symbol: "NOC",
+  symbol: "YC",
   seller_fee_basis_points: 1000, // Define how much % you want from secondary market sales 1000 = 10%
   external_url: "https://www.youtube.com/c/hashlipsnft",
   creators: [
@@ -50,6 +50,13 @@ const format = {
   height: 512,
 };
 
+const gif = {
+  export: false,
+  repeat: 0,
+  quality: 100,
+  delay: 500,
+};
+
 const text = {
   only: false,
   color: "#ffffff",
@@ -104,4 +111,5 @@ module.exports = {
   namePrefix,
   network,
   solanaMetadata,
+  gif,
 };

src/main.js

@@ -27,13 +27,20 @@ const {
   namePrefix,
   network,
   solanaMetadata,
+  gif,
 } = require(path.join(basePath, "/src/config.js"));
 const canvas = createCanvas(format.width, format.height);
 const ctx = canvas.getContext("2d");
 var metadataList = [];
 var attributesList = [];
 var dnaList = new Set();
 const DNA_DELIMITER = "-";
+const HashlipsGiffer = require(path.join(
+  basePath,
+  "/modules/HashlipsGiffer.js"
+));
+
+let hashlipsGiffer = null;
 
 const buildSetup = () => {
   if (fs.existsSync(buildDir)) {
@@ -42,6 +49,9 @@ const buildSetup = () => {
   fs.mkdirSync(buildDir);
   fs.mkdirSync(path.join(buildDir, "/json"));
   fs.mkdirSync(path.join(buildDir, "/images"));
+  if (gif.export) {
+    fs.mkdirSync(path.join(buildDir, "/gifs"));
+  }
 };
 
 const getRarityWeight = (_str) => {
@@ -315,6 +325,17 @@ const startCreating = async () => {
         await Promise.all(loadedElements).then((renderObjectArray) => {
           debugLogs ? console.log("Clearing canvas") : null;
           ctx.clearRect(0, 0, format.width, format.height);
+          if (gif.export) {
+            hashlipsGiffer = new HashlipsGiffer(
+              canvas,
+              ctx,
+              `${buildDir}/gifs/${abstractedIndexes[0]}.gif`,
+              gif.repeat,
+              gif.quality,
+              gif.delay
+            );
+            hashlipsGiffer.start();
+          }
           if (background.generate) {
             drawBackground();
           }
@@ -324,7 +345,13 @@ const startCreating = async () => {
               index,
               layerConfigurations[layerConfigIndex].layersOrder.length
             );
+            if (gif.export) {
+              hashlipsGiffer.add();
+            }
           });
+          if (gif.export) {
+            hashlipsGiffer.stop();
+          }
           debugLogs
             ? console.log("Editions left to create: ", abstractedIndexes)
             : null;

yarn.lock

@@ -159,6 +159,11 @@ gauge@~2.7.3:
     strip-ansi "^3.0.1"
     wide-align "^1.1.0"
 
+gif-encoder-2@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/gif-encoder-2/-/gif-encoder-2-1.0.5.tgz#872ae04d8028de4a3417646ceb80dda88d6247b9"
+  integrity sha512-fsRAKbZuUoZ7FYGjpFElmflTkKwsn/CzAmL/xDl4558aTAgysIDCUF6AXWO8dmai/ApfZACbPVAM+vPezJXlFg==
+
 glob@^7.1.3:
   version "7.1.7"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"