Generating 0-255 3 times... double or triple loop?

Im sure this is another time I'm over complicating things, or just making myself loopy.

With just vanilla javascript, i want to make this code output an array of every rgb color code, (im using 25 instead of 255 just for sanity)

var a = [];
    for( var i = 0; i < 25; i++ ) {
for( var j = 0; j < 4; j++ ) {
     a.push(i)
      console.log('rgb('+a+')');
    }
}

the above outputs this 25 times: rgb(0,0,0,1,1,1,2,2,2,3,3,3,4,4,4,5,5,5,6.... so on ...25,25,25)

Then i tried this, or something like th开发者_开发技巧is, i lost what i had planned to show as example i think lol.

var a = [];
for( var j = 0; j < 4; j++ ) {
    for( var i = 0; i < 25; i++ ) {
     a.push(i)
      console.log('rgb('+a+')');
    }
    for( var k = 0; k < 4; k++ ) {
      console.log('rgb('+a+')');
    }
}

either way. everything i've tried doesn't do what i want. i've tried to create a function too, still kinda lost in it.

ok, so this is another version i created, almost does it again, but not quite right:

var n = [];
for( var i = 0; i < 25; i++ ) {
    n.push(i);
}

var a = [];
n.forEach( function() { 
    for(j = 0; j<3;j++) { 
        var b = j
    }
    return a.push(n); 
});
console.log(a);

outputs 25 arrays with arrays 0-25;

i know it's something to do with arrays of arrays. thats the where i fail always, foreach loops and arrays have always been my downfall.

You use three loops:

// READ THE BELOW BEFORE YOU RUN THIS
var r, g, b, rarray, garray, barray;
rarray = [];
for (r = 0; r < 256; ++r) {
    garray = [];
    rarray.push(garray);
    for (g = 0; g < 256; ++g) {
        barray = [];
        garray.push(barray);
        for (b = 0; b < 256; ++b) {
          barray.push({r: r, g: g, b: b});
        }
    }
}

That produces an array (rarray) of arrays (each garray), each of which in turn contains an array (each barray) of objects. Each object has an r, g, and b value.

Note that as selbie points out, you'll end up with a total of 256 * 256 * 256 = 16,777,216 entries spread across the various arrays. You'll have 256 * 256 = 65,536 barrays and 256 garrays. In all, that's 1 + 256 + (256 * 256) + (256 * 256 * 256) = 16,843,009 objects. Since all of these objects (including the arrays) are actually key=value maps, each entry will have a key portion and a value portion, and so just the references to those will be four bytes each. Then there's the actual key data for the array entries (1-3 characters = 2-6 bytes minimum) and the key data for each of our 16M final objects (which have three keys each, r, b, and g). Plus some other overhead. The details will vary a lot by JavaScript environment, but we're probably talking no less than (waves hands) 32-64 bytes per entry, for a total in memory of ~538MB-1076MB. Now, that's not a lot by modern computer standards, but it's a lot for a web page. :-) I used Chrome to do it, and it took ~1GB (did it in about 4 seconds — gotta love Chrome). In contrast, after several minutes and >2GB of RAM use, I gave up on Firefox. I wouldn't go near this in IE with a barge-pole.

Live example (using only 0..4 rather than 0..255).

If you want EVERY color, then then question may be moot. This is because if you want EVERY color (range 0-255 for R, G, and B), then that is 256*256*256 possible combinations. That's 16 million colors! Do you really want to print them all out or put them all in an array?

Or did you really mean to say, "all grey scale colors from rgb(0,0,0) to rgb(255,255,255) " ?

In any case, here's some code that will print out every color in increments of 16 instead of 1. This will print out a more manageable 4K colors. If you really, really, wanted EVERY color, change "var step" inside the DumpColors function from 16 to 1. But you've been warned.

function color(r, g, b) {
    this.red = r;
    this.green = g;
    this.blue = b;
}


function DumpColors() {

    var r, g, b;    
    var col;
    var a = [];
    var step = 16;

    for (b = 0; b <= 255; b += step) {

        for (g = 0; g <= 255; g += step) {

            for (r = 0; r <=255; r += step) {

                col = new color(r,g,b);
                a.push(col);

                try {
                    console.log("rgb(" + r + "," + g + "," + b + ")" );
                }
                catch(err) {
                     ;
                }
            }
        }
    }

    return a;
}