I am trying to get ALL 16,777,216 RGB colors, and create each one onto a 64px * 64px png file. I actually do need them all at once to make a package. That means I would have 16,777,216 png files total after I complete this task.
I have tried to manually make the png's through Adobe Illustrator, but that would definitely take a very long time to complete. Just to show you an example of what I mean to make and what I have so far, this is what I made via Adobe Illustrator: around 130 artboards of a 64*64px solid color rectangle, each having different colors (sorry, i'm unable to post images yet)
Once I export them, it should turn out like this:
Like I mentioned above, the total number is very large, so I was hoping I could use Jimp to have it make them for me. This is what I have so far for making one solid color:
async function singleHex(num) {
/* to get a value of the next hex code (done in order from 000000 to ffffff).
num is an object like this {hex: '000000', index: 5, valIndex: 0}
where num.hex is the last hexcode used through the jimp npm,
index is the index of hex's value that is going to be changed,
valIndex is the index of val (which is defined within this function) that hex[index]'s value
is equal to.
For example: num = {hex: '000000', index: 5, valIndex: 0}, meaning the last color made through
Jimp was #000000, #00000**0** is going to be changed to (valIndex + 1).
*/
let val = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
if (num.hex[index] == 'F') { // ex. 00000F
if (num.index == 0) { // ex. FFFFFF
return console.log('complete');
}
num.hex[index] = '0'; // 000000
num.hex[index - 1] = val[valIndex + 1] // 000010
num.valIndex = 0;
num.index = num.index - 1;
}
else {
num.valIndex = num.valIndex + 1;
num.hex[index] = val[num.valIndex];
}
return num;
}
I'm not sure if this function would work, but on top of that, I would like help trying to use this function's result to be the color I use in Jimp's npm to make a 64*64px solid color png file and save, then go through that async function again.... and continue until it gets to {hex: 'FFFFFF', index: 0, valIndex: 15}. I hope this makes sense...
Thank you in advance!
If i understand correctly, this should do the trick:
const Jimp = require ('jimp');
// create a 64*64 image, with red=r green=g blue=b.
function createAndSave(r,g,b) {
return new Promise((resolve, reject) => {
// convert rgb values to a rgba color code
let colorInt = Jimp.rgbaToInt(r, g, b, 255);
// create new image filled with color(r,g,b);
new Jimp(64,64, colorInt, (err,image) => {
if (err) {
reject(err);
}
// name the file with color hex code. replace '0x' with '#' to have css color code.
let fileName = '0x'+('00000000'+new Number(colorInt).toString(16)).slice(-8,-2)+'.png';
// write on disk
image.write(fileName,(err,image) => {
if (err) {
reject(err);
}
//return fileName.
resolve(fileName);
});
})
});
}
//3 loops to rule them all
async function createAll(){
for (let r=0; r<256; r++) { // all reds
for (let g=0; g<256; g++) { // all greens
for (let b=0; b<256; b++) { // all blues
await createAndSave(r,g,b);
}
}
}
}
createAll();