hashlips/generative-art-opensource

Create generative art by using the canvas api and node js, feel free to contribute to this repo with new ideas.

Welcome to HashLips 👄

Important: There is a new repo for this code. https://github.com/HashLips/hashlips_art_engine

All the code in these repos was created and explained by HashLips on the main YouTube channel.

To find out more please visit:

📺 YouTube

👄 Discord

💬 Telegram

🐦 Twitter

ℹ️ Website

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 install 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, as well as the metadata to use for NFT marketplaces.

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. Default: This is an NFT made by the coolest generative code.
• 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. Default: 1
• editionSize: - number (int) to end edition at. Default: 10
• editionDnaPrefix: - value (number or string) that indicates which dna from an edition is used there. I.e. dna 0 from to independent batches in the same edition may differ, and can be differentiated using this. Default: 0
• rarityWeights: - allows to provide rarity categories and how many of each type to include in an edition. Default: 1 super_rare, 4 rare, 5 original
• 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 the example input content of this repository 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. Use the existing addLayers calls as guidance for how to add layers. This can either only use the name of the layer and will use default positioning (x=0, y=0) and sizes (width=configured width, height=configure height), or positioning and sizes can be provided for more flexibility.

Allowing different rarities for certain rarity/layer combinations

It is possible to provide a percentage at which e.g. a rare item would contain a rare vs. common part in a given layer. This can be done via the addRarityPercentForLayer that can be found in the config.js as well. This allows for more fine grained control over how much randomness there should be during the generation process, and allows a combination of common and rare parts.

Development suggestions

• Preferably use VSCode with the prettifier plugin for a consistent coding style (or equivalent js formatting rules)

generative-art-opensource's Issues

Generate traits randomly

Hello, I downloaded this code and can't figure out how to make the script go through each trait randomly. It seems to go through each individual trait one by one, starting from the top. Then it matches that trait with every possibility, then to the next. I would like to have it randomly cycle through different traits. I think this would also help a lot with the issue I and others are having where it keeps trying the same traits over and over again and not completing more than a certain amount. Thanks for any help.

Outputting Gifs instead of PNGs

Was thinking that if I changed the file output to .gif it would work (see code below) but haven't had any luck.

const saveImage = (_editionCount) => {
fs.writeFileSync(
./output/${_editionCount}.gif,
canvas.toBuffer("image/gif")
);
};

Any advice?

Race condition possible. Layers will not be drawn in order back to front

generative-art-opensource/index.js

Line 154 in 721b03d

loadedElements.push(loadLayerImg(layer));

One of the most important features should be the order of the layers. Layer orders should be maintaned and should start all the way from the back (background) to the front (maybe some face traits).

I'm wondering if the async nature of loadLayerImg will cause race conditions here.

The awaire Promise.all line will make the program wait for all loadLayerImg funtions but I believe it does not gurantee that they will be executed in order. e.g. if loading layer 1 takes a long time vs loading layer 2, could this cause layer 2 to be drawn before layer 1?

let results = constructLayerToDna(newDna, races, race);
let loadedElements = []; //promise array
results.forEach((layer) => {
loadedElements.push(loadLayerImg(layer));
});

await Promise.all(loadedElements).then((elementArray) =>

SVG advice

I am using SVGs for each element but when generate the SVGs metadata is correct but the output files are the same as the first generated nft like all .svg files in the output folder look the same but with different metadata.

any advice on this?

How can I use it without defining rarities?

I managed to use V1 to use the code without rarities defined, but I believe the metadata is not outputting properly. I don't want any attribute to be rarer than the other, but I need to define my properties on the metadata, that's the only problem with V1, I can output every image just like I want with it.

Baseimage uri

Hi everyone i am wanting to store my images and metadata on ipfs for persistence is there a way to make this program generate the baseimgeuri as an ipfs cid and store this in the metadata?

addRarityPercentForLayer

Hey, so I'm kind of a noob at this... Can someone explain this part of the code please and how I am supposed to adjust the percentages for each layer (and just overall how this part works)?

addRarityPercentForLayer('super_rare', 'ball', { 'super_rare': 33, 'rare': 33, 'original': 33 });
addRarityPercentForLayer('super_rare', 'eye color', { 'super_rare': 50, 'rare': 25, 'original': 25 });
addRarityPercentForLayer('original', 'eye color', { 'super_rare': 50, 'rare': 25, 'original': 25 });

Thank you!

Dynamically load Layers

Yo, i thought i'd contribute to the project since i was messing with dynamically loading of the layers..

const layers = [];

const setLayers = () => {
  return (
    fs
    .readdirSync(`${dir}/gen_${gen}/`)
    // .filter((item) => !/(^|\/)\.[^\/\.]/g.test(item))
    .map((folder, i) => {
      layers.push({
        id: i + 1,
        gen: gen,
        name: folder,
        location: `${dir}/gen_${gen}/${folder}/`,
        elements: getElements(`${dir}/gen_${gen}/${folder}/`),
        position: { x: 0, y: 0 },
        size: { width: width, height: height },
      })
    })
  );
};

Note that I'm not an experience coder, but it works well. (obviously its edited for my project).
That also remind me, mixing different layers (generations) would be a cool tutorial! Keep it up.

Program is not running

Hi i am not sure what i am missing.. Any help will be really appreciated

Having issues running program

I

Cant run program

How do I upload all my pngs to OpenSea? And how do I make it so it automatically enters the attributes?

TypeError: Cannot read property 'x' of undefined

_element.layer.position.x,
                        ^

TypeError: Cannot read property 'x' of undefined

the problem is in this const:

const drawElement = (_element) => {
ctx.drawImage(
_element.loadedImage,
_element.layer.position.x,
_element.layer.position.y,
_element.layer.size.width,
_element.layer.size.height
);

How do I publish the art onto mainnet?

And am I able to use the Lazy Mint feature that Opensea offers when I mass upload or is it going to make me pay gas/transaction fees?

Suggestions for rarity percentage for layer

So I've got 6 layers and the code was producing over 1000 images but now is producing less due to some changes that I've made to the rarity percentages ...

addRarityPercentForLayer('original', 'accessory', { 'super_rare': 0, 'very_rare': 0, 'rare': 0 , 'original': 100 });
addRarityPercentForLayer('rare', 'accessory', { 'super_rare': 0, 'very_rare': 0, 'rare': 50, 'original': 50 });
addRarityPercentForLayer('very_rare', 'accessory', { 'super_rare': 0, 'very_rare': 40, 'rare': 40, 'original': 20 });
addRarityPercentForLayer('super_rare', 'accessory', { 'super_rare': 50, 'very_rare': 20, 'rare': 10, 'original': 20 });

Can someone suggest what percentage I could assign to each one for the above please and suggest how I should distribute the percentages for the other layers too? It gets a bit confusing with a lot of layers lol

Always crashes on last NFT saying its generating a duplicate however i know there are more options as say i got to 100 it crashes at 99 and if at 5000 it crashes at 4999

Error while running Node.Js

Hey,

i tried to follow your video & steps. when i try "node index.js" i get this error
dyld: lazy symbol binding failed: Symbol not found: ____chkstk_darwin

can you tell me how to Fix this ??

i use a iMac (Late 2012) , with macOS High Sierra (10.13.6)

the other video (Generative Art) i was able to do it and works perfectly. This one gives the darwin error. Pls let me know how to fix it

Duplicates

Hey, the new update is awesome, great work!
but I think the DNA system is not working properly or I really misunderstood its function.

shouldn't the DNA option be to create DNA number based on the layers and when the layers are equal in order that DNA detects that the same image was created? The main problem here is having equal images on the final result, not on meta.

Here it has generated undefined DNAs even with repeated images (I did a test with few layers to better understand the code) and still doesn't work as a method to avoid duplicates in output. It means the possibility of randomizing and create SAME arts in output is still the same.

2 editions here with the same config on meta and the same image on the final result.

{ "dna": 5605108099, "edition": 3, "date": 1629915675761, "attributes": [ { "name": "black", "rarity": "common" }, { "name": "body 1", "rarity": "epic", "color": "red" }, { "name": "eyes1", "rarity": "common" }, { "name": "boca1", "rarity": "common" }, { "name": "no", "rarity": "common" } ] }, { "dna": 8624242866, "edition": 4, "date": 1629915675912, "attributes": [ { "name": "black", "rarity": "common" }, { "name": "body 1", "rarity": "epic", "color": "red" }, { "name": "eyes1", "rarity": "common" }, { "name": "boca1", "rarity": "common" }, { "name": "no", "rarity": "common" } ] },

do you have any approach to solve this?

Always fails on number 6

I always get an error as it attempts to produce the 6th NFT with this error even when changing number to produce 100 instead of 10, is there a fix for this? Thanks

creating NFT 6 of 10

• rarity: rare
• dna: --01-00----00--
  C:\Users\this_\OneDrive\Desktop\generative-art-opensource-main\index.js:75
  const image = await loadImage(${_layer.selectedElement.path});
  ^

TypeError: Cannot read property 'path' of undefined
at C:\Users\this_\OneDrive\Desktop\generative-art-opensource-main\index.js:75:61
at new Promise ()
at loadLayerImg (C:\Users\this_\OneDrive\Desktop\generative-art-opensource-main\index.js:74:10)
at C:\Users\this_\OneDrive\Desktop\generative-art-opensource-main\index.js:215:27
at Array.forEach ()
at startCreating (C:\Users\this_\OneDrive\Desktop\generative-art-opensource-main\index.js:214:13)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
PS C:\Users\this_\OneDrive\Desktop\generative-art-opensource-main>

different rarities for different layers

Hello,

im trying to give different layers different percentage/weight of rarity is this even possible.
if i understand correctly at the moment you can only give the same rarity "classes" (example: layer 1 has rare and original but layer 2 to has super rare, rare and original) to any layers if you dont you get an exception at index.js line 119 because he cant find the different rarities in the other layer element and cant access length.

Is my understanding correct or im just stupid and dont get it ?
i hope this question isnt to stupid.

Best regard Hawxkz,

how to edit addRarityPercentForLayer to create images without a certain layer

I'm trying to find a way to edit this part of the code to allow some images to be created that do not include any layers from my 'accessory' folder:

addRarityPercentForLayer('original', 'accessory', { 'super_rare': 10, 'rare': 30, 'original': 70 });
addRarityPercentForLayer('rare', 'accessory', { 'super_rare': 0, 'rare': 100, 'original': 0 });
addRarityPercentForLayer('super rare', 'accessory', { 'super_rare': 60, 'rare': 40, 'original': 0 });

Currently, if I run the code with the above; every single image that is created seems to have the accessory layer but I would want some images not to have this layer - any suggestions?

Thanks!

Rarity generation

Is there a way to only pull one rare or super rare image from a random layer when compiling a rare or super rare image?

Metadata Outputs

Hey HashLips, thanks for the new contents and helping out the community.

would it be possible to make metadata easier to manipulate for non-programmers like me? (similar to v1 branch)

I think writing attributes with "name"+"filename" in only one attributes string is pretty bad, even to cross data in mongodb and check or display rarity on dapps, so, a option for

As projects demand different specs, or different blockchains use different metatags, it would be nice to have something like that in the code instead of only the "full atributtesList" on attributtes: in generateMetadata

const generateMetadata = (_dna, _edition, _attributesList) => {
  let dateTime = Date.now();
   let tempMetadata = {
    dna: _dna.join(""),
    name: `Project Name #${_edition}`,
     description: description,
     edition: _edition,
    date: dateTime,
     **_layer1name: _filename:**
     **_layer2name: _filename:**
     **_layer3name: _filename:**
     **_layer4name: _filename:**
     **_layer5name: _filename:**
   };
   return tempMetadata;
};

or even were

 **_layer1name: _filename:**

is
_layer1name: _rarity:

if we can use this to commit or uncommit in code what we wanna use in the project would be awesome
A new update in this regard could make the tool much more versatile for new users

also implementing here the option to export the individual metatag of each generated image would also be a good thing.

Thanks again for the effort and congratulations on the last videos.

gif encoder

do you have a plan for a gif encoder?

"Cannot read property 'percent' of undefined"

Anyone know the reason for why this is happening? "Cannot read property 'percent' of undefined"

How do I change the names to be "Crypto Thing #1" but the number aligns with the copy it is

Stacking artworks

This issue is also found in the first version of the program .

The first edition of the image is clean. However, when it come to the 2nd edition of the image, the 1st edition can still be seen beneath the 2nd edition.

How do we fix it?

Can't generate more thank 10 NFT in edition.

I'm getting the following error after changing 'editionSize' variable to 100 in 'config.js' -

Create your NFT collection
##################

start creating NFTs.

creating NFT 1 of 100

• rarity: undefined
  (node:16612) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'length' of undefined
  at /Users/gukha/Desktop/IdeaProjects/generative-art-opensource/index.js:133:77
  at Array.forEach ()
  at createDna (/Users/gukha/Desktop/IdeaProjects/generative-art-opensource/index.js:132:11)
  at startCreating (/Users/gukha/Desktop/IdeaProjects/generative-art-opensource/index.js:200:18)
  at Object. (/Users/gukha/Desktop/IdeaProjects/generative-art-opensource/index.js:249:1)
  at Module._compile (internal/modules/cjs/loader.js:1072:14)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
  at Module.load (internal/modules/cjs/loader.js:937:32)
  at Function.Module._load (internal/modules/cjs/loader.js:778:12)
  at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
  (Use node --trace-warnings ... to show where the warning was created)
  (node:16612) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
  (node:16612) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Metadata trait_type

How do you include the attribute trait_type in the metadata? currently, only the name of the layer element shows up and not the name of the layer. This removes the ability to add property tags to the nft when minting.

Generate single metadata for each images

Greetings! first, thanks for your work, you are the best :)
I would like to use the main version, instead of v3, because thanks to the commit of caiaga, it is possible to choose the percentage of the trait.
But I would also like to be able to generate a single metadata for each images.
I tried to copy the code from v3, but it didn't work

const saveMetaDataSingleFile = (_editionCount) => {
  fs.writeFileSync(
    `./output/${_editionCount}.json`,
    JSON.stringify(metadataList.find((meta) => meta.edition == _editionCount))
  );
};

saveMetaDataSingleFile(editionCount);

error

[m@march generative-art-opensource-main]$ node index.js
##################
# Generative Art
# - Create your NFT collection
##################

start creating NFTs.
-----------------
creating NFT 1 of 10
- rarity: original
use random rarity super_rare
- dna: 05-00-02-02-02-02
node:internal/errors:464
    ErrorCaptureStackTrace(err);
    ^

TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined
    at Object.writeFileSync (node:fs:2146:5)
    at saveMetaDataSingleFile (/home/m/Downloads/generative-art-opensource-main/index.js:175:6)
    at /home/m/Downloads/generative-art-opensource-main/index.js:253:7
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async startCreating (/home/m/Downloads/generative-art-opensource-main/index.js:237:5) {
  code: 'ERR_INVALID_ARG_TYPE'
}

Doesn’t randomise as well as the 1st project

Hello, I'm encountering an issue with this updated where the program always chooses the same traits to match with each other. The 1st version of this code actually did it really well.
Here's an example of the issue I'm encountering;
The eyes folder has 10 traits.
The mouth folder has 10 traits.
The program will always match eye#2 with mouth#2.

How do I fix it where the program will match eye#2 with mouth#1-10?

Current code can't produce over 19 permutations

I'm trying to figure out why but in your last tutorial is the code up to date, the startCreating method gets stuck in an infinite loop if you set anything higher than ten, there are obviously way more permutations than that.
I didnt make any code changes just ran node index.js 100 and it will stick at 19 forever.

V2 (Code generative art Update 3 on YT) "Path" undefined

I'm getting an issue when trying to run the program. I followed along on the YouTube video "Code generative art UPDATE3" Also did update 1 and update 2.

I don't want/need to go any further than v2 as it works with the rarities I need for my collection.

When I run the "node index.js" I get the following error:

1
super_rare
[]
(node:16916) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'path' of undefined

I'm assuming the issue is in the "const LoadLayerImag" section but I can't see whats wrong with it. I have even copied the code straight from github for V2 and I still get the error. Below is what I have:

const loadLayerImg = async (_layer) => {
  return new Promise(async (resolve) => {
    const image = await loadImage(`${_layer.selectedElement.path}`);
    resolve({ layer: _layer, loadedImage: image });
  });
};

I'm not sure what I missed. Is this referencing back to something else?

"Cannot read property 'percent' of undefined"

Anyone know the reason for why this is happening? "Cannot read property 'percent' of undefined"

Cannot read property 'layers' of undefined

This occurs when switching out HashLips's test layers for my own. Any help will be appreciated

Conditional/exclusion layer combinations

I would like to setup a conditional appearance of some layers based on specific combinations:

const layers = [
addLayer('layer1', { x: 0, y: 0 }, { width: width, height: height }),
addLayer('layer2'),
addLayer('layer3'),
addLayer('layer4') or addLayer('layer5')
if addLayer('layer5') then addLayer('layer6')

Is it possible something like this?

Running program issues

Any help will be really appreciated

Use attribute only once with no repeats through race

What if I have a race that is super limited with an attribute that should only occur once (eg, I have 10 backgrounds and I don't want any duplicates). How would I set up the weighting of each background image so that each background only shows up one time in the collection? Right now I have all the weights of all ten images set to the same number but that doesnt work. What's the correct way to do this? Thanks!

while loop break

when set :
const startEditionFrom = 1;
const endEditionAt = 25;
const editionSize = 25;
const rarityWeights = [
{
value: "super_rare",
from: 1,
to: 2,
},
{
value: "rare",
from: 3, // this should start from 3
to: 5,
},
{
value: "original",
from: 6, // this should start from 6
to: editionSize,
},
];

or default one that are in repo when hits 19th element the code bug and stop there so when bug comes I get 18 images without metadata cause breaking the loop to stop it. any help with this ? (plus saw one more guy have same issue like me :( )

Symbol not found: ____chkstk_darwin

Hi all,

After installing nodejs 14.17.6, installing npm & truffle, I wrote node index.js and the following came up. I'm also running OSX El Capital on a Macbook Air early 2015.

I've tried reinstalling and installing everything many times but as I am new to this, I don't know what this means or what I'm meant to do to fix it. Any help would be appreciated!

My-Air:generative-art-opensource-3 your_user$ node index.js
dyld: lazy symbol binding failed: Symbol not found: ____chkstk_darwin
  Referenced from: /Users/your_user/Documents/NFT/generative-art-opensource-3/node_modules/canvas/build/Release/libpixman-1.0.40.0.dylib
  Expected in: /usr/lib/libSystem.B.dylib

dyld: Symbol not found: ____chkstk_darwin
  Referenced from: /Users/your_user/Documents/NFT/generative-art-opensource-3/node_modules/canvas/build/Release/libpixman-1.0.40.0.dylib
  Expected in: /usr/lib/libSystem.B.dylib

Overlapping layers...

My layers overlap (eg: facemask and cigarette). I'm pretty sure I need to write an IF statement in index.js file. Anyone achieved to fix this? Thanks!

Larger Number OF Options

I have been following along with your videos, I seem to hit a problem with the exports. I have currently 15 backgrounds can multiple backgrounds have the same weighting? Or is 1.5 a possible weighting?

When running 100 outputs, some of the backgrounds are missing completely

Duplicated DNA issue

While running the code i am getting this

Anybody knows what might be the issue?

What am I missing? :-(

Error: Cannot find module 'C:\Users\User...\generative-art-opensource-3\index.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
at Function.Module._load (internal/modules/cjs/loader.js:745:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
at internal/main/run_main_module.js:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}

I've tried:
npm install
npm install truffle -g
npm install truffle -p
yarn add all

3d models

Hey, is there a any option to generate 3d models with this or any other solution?

Duplicates

Will this produce duplicates and if so how do I stop this? Thanks

Give this error when i wrote node index.js.

I changed all folders and codes with my folders. I tried much things but i receive this error. I would glad it if you could help. Good works!

How can we stop returning 'Empty' traits???

Hi guys,

I'm totally new to this level of coding so am super grateful to have found this and put together a 10k collection :)

I'm just wondering what code would be required to completely omit a trait from the metadata if the trait value is "None" for example?

At the moment I have 13 traits with 297 attributes but editions that should only have 7 traits for example, still have 13 traits with 6 of them reading "None"

I could easily delete them if using one metadata file but that's not really an option using the server method with individual JSON files.

Thanks in advance for any help 👍

How do I make it so that it randomizes the rarity for each layer? For example, one character could have a rare body with original hair and a super rare attribute instead of everything being the same rarity.

Issues with amount of variations

So I'm having some issues. In a couple of my folders such as backgrounds, I have a good amount of different backgrounds with 15 just in backgrounds alone. I also have a few more folders with different items with similar amounts.

I struggled with the weight percentages... None are rarer than the other so I was going to put them all the same. However, in the video, he said not to do that so I put them all with like ".00" from each either. For example color one is 5.45, color 2 is 5.46, and so on making sure they added up to 100.

I did a test run and just did 10 editions. It pumped out 8 very quickly but then gets stuck and never returns anymore. When you look at the 8 it created they all are very close to the same using the same variations of the top couple backgrounds as well as the top couple other variant items.

Do I need to do this differently? Is this a limitation and should I just reduce my amount of variations?

Thanks for any help.