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:

#000000 #000042 #000090

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!

CodePudding user response：

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();