hashlips / generative-art-opensource Goto Github PK
View Code? Open in Web Editor NEWCreate generative art by using the canvas api and node js, feel free to contribute to this repo with new ideas.
License: MIT License
Create generative art by using the canvas api and node js, feel free to contribute to this repo with new ideas.
License: MIT License
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 :( )
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.
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
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.
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
${_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>
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.
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!
I
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?
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?
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?
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?
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 👍
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.
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?
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
do you have a plan for a gif encoder?
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!
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'
}
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.
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?
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?
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?
I'm getting the following error after changing 'editionSize' variable to 100 in 'config.js' -
Create your NFT collection
##################
creating NFT 1 of 100
node --trace-warnings ...
to show where the warning was created)--unhandled-rejections=strict
(see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)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?
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!
Anyone know the reason for why this is happening? "Cannot read property 'percent' of undefined"
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
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,
Hi i am not sure what i am missing.. Any help will be really appreciated
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?
This occurs when switching out HashLips's test layers for my own. Any help will be appreciated
generative-art-opensource/index.js
Line 154 in 721b03d
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) =>
_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
);
Hey, is there a any option to generate 3d models with this or any other solution?
Anyone know the reason for why this is happening? "Cannot read property 'percent' of undefined"
Will this produce duplicates and if so how do I stop this? Thanks
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!
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
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.
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.