ColorMode(RGB) - fill background with all colors - where's the blue?

piethon

Hello,

I'm trying to create a background that has all of the colors, with color mode as RGB. I found Processing.org's colorMode page but can't seem to figure out why Blue isn't showing up?

void setup(){
 size(500,500);
 colorMode(RGB, 255);
}

void draw(){
 rainbowBG();
}

void rainbowBG() {
  noStroke();
  for (int i = 0; i <= width; i++) {
    for (int j = 0; j <= width; j++) {
      stroke(i, j, 0);
      point(i, j);
    }
  }
}

even if I change "i [and j] <= 255" it still doesn't show up...any ideas?

akenaton

B is allways 0 in your code...

piethon

:|

...wow. I was doing that way too much yesterday and I didn't even catch that. Sorry about such a silly question.

However, how can I get it to be the "rainbow" of colors I'm expecting? I changed it to stroke(i,j,j); and it added blue, but not the whole spectrum of colors.

I also revised it to

void rainbowBG() {
  noStroke();
  for (int i = 0; i <= width; i++) {
    for (int j = 0; j <= width; j++) {
      for (int x = 0; x <= width; x++) {
        stroke(i, j, x);
        point(i, j);
      }
    }
  }
}

To no avail. I just have trouble looking at loops - I wish I could go step by step to see what's happening. (kind of like in VB when you can view code and advance one line at a time with F8).

I will ponder this and report back if I find the solution - in the mean time any hints would be appreciated.

TfGuy44

void setup() {
  size(255, 255);
}

void draw() {
  float b = map(mouseX, 0, width, 0, 255);
  for (int x = 0; x <= width; x++) {
    for (int y = 0; y <= height; y++) {
      int r = x;
      int g = y;
      stroke(r, g, b);
      point(r, g);
    }
  }
}

akenaton

@piethon==

as for me your (last) code works, slowly but that is normal; the result is not a "rainbow" & that also is normal, reason is the nested loop: your first loop starts at 0, then (second loop) also to 0, then all values for blue, till 255, so the first value(i=0, j= 0) will be R= 0, G= 0, B = 255, pure blue; now second loop will be R= 0, G= 1, B, 255 and so on till R=0, G=255, B =255, that is i=0, j = 255, this the left down corner of the window (supposed to be 255 sized); now continue... when you are at the end of R (255), G will be also at 255 and Blue also:: result:: white, at i=255, j= 255...

asimes

The screen is far too small to see all of the colors. A 255 x 255 screen can see all of the combinations of two channels. In order to see the combinations of three channels you would need 16,581,375 pixels (255 x 255 x 255). Edit: The square root of 16,581,375 is about 4,072 so a 4,072 x 4,072 screen would be needed to see all the colors

The sketch below uses a 800 x 800 screen and skips a lot of colors because there are not enough pixels to see them all. Try making the 26 a 27 instead and see what happens, it will start to loop over the colors again:

void setup() {
  size(800, 800, P2D);
  noLoop();

  // When the screen is 800 x 800 this is 26
  println(0xffffff / (width * height));
}

void draw() {
  loadPixels();

  // Too large of a screen would be needed to see all the colors
  // Skip by 26 each time
  for (int i = 0; i < width*height; i++)
    pixels[i] = 0xff000000|(i*26);

  updatePixels();
}

Also pixels[] is much faster than point()

akenaton

@ asimes==

that is a rainbow???? not at all because you use hex and not rgb so i think that it s nececessary to create some color[()] before (well, skipping some of them because the complete spectrum is impossible to show in a size(800,600) or ... window) i ll try that to morrow! right: load pixels is more fast but it is not the problem...

asimes

@akenaton, using hexadecimal does not mean I am not using RGB, it is RGB. Hexadecimal is just a base 16 number system rather than decimal which is base 10. Using hexadecimal can be easier due to how Processing stores colors, they are stored like this:

Binary: AAAAAAAARRRRRRRRGGGGGGGGBBBBBBBB
Hexadecimal: AARRGGBB

The A's are alpha, they should all be 1 in binary or Fs in hexadecimal (F is 15). The R, G, and Bs make up all possible colors, hexadecimal is just a short hand to decimal. Here is an example:

void setup() {
  size(600, 200);
  noLoop();
}

void draw() {
  // Orange
  color a = color(255, 128, 64);
  println("a = "+a);

  fill(a);
  rect(0, 0, 200, 200);

  // The same orange
  color b = 0xffff8040;
  println("b = "+b+", which is "+hex(b)+"in hex");

  fill(b);
  rect(200, 0, 200, 200);

  // Also the same orange
  color c = -32704;
  println("c = "+c+" and a == b == c");

  fill(c);
  rect(400, 0, 200, 200);
}

Breaking down the hex notation above, I have 0xffff8040:
- The first two ff are for full alpha (255)
- The next two ff are for full red (255)
- The 80 is for half green (128)
- The 40 is for quarter blue (64)

asimes

Here, maybe what I was doing will make more sense like this, very similar to the first one I posted but it uses color(i, j, k):

void setup() {
  size(800, 800, P2D);
  noLoop();
}

void draw() {
  loadPixels();

  int loc = 0;
  for (int i = 0; i < 255; i++) {
    for (int j = 0; j < 255; j++) {

      // Using the 26 again
      for (int k = 0; k < 255; k += 26) {
        pixels[loc] = color(i, j, k);

        // Move the pixel location over
        // At some point it will be larger than width * height
        if (loc < (width*height)-1) loc++;
      }
    }
  }

  updatePixels();
}

akenaton

@asimes::: you are absolutely right about hex: but looking to the result which has nothing to see with rainbow gradient effect i stupidly thought that was the reason. Not at all: the reason is using pixels & loc : you get rows & cols, not gradient. With or without +26 the result is better with points. Of course the problem remains because the range values cannot be other than they are, that s why i persist to think that the best way is to create (coding) some array with colors...

akenaton

@asimes:: creating array from colors. could be better if respecting some chromatic wheel... But it looks like a rainbow! -Problem is that i cannot see anyway to make it bigger... Perhaps using lines...

    color coul;
    int i;
    int j ;
    int k;
    color[] rainbow;
    int upd = 0;
    boolean stop = false;
    int c = 0;
    void setup() {
      size(255, 255, P2D);
     //rainbow colors are== Violet, Indigo, Bleu, Vert, Jaune, Orangé, Rouge
      rainbow = new color[70000];
    //adding each color


      for (int r=0; r<10000; r++) {
        rainbow[c] = color(r*255/10000, 255, 0);
        c++;
      }

      for (int g=10000; g>0; g--) {
        rainbow[c] = color(255, g*255/10000, 0);
        c++;
      }

    for (int b=0; b<10000; b++) {
        rainbow[c]= color(255, 0, b*255/10000);
        c++;
      }


      for (int r=10000; r>0; r--) { 
        rainbow[c] = color(r*255/10000, 0, 255);
        c++;
      }
      for (int g=0; g<10000; g++) {
        rainbow[c] = color( 0, g*255/10000, 255);
        c++;
      }
      for (int b=10000; b>0; b--) {
        rainbow[c] = color(0, 255, b*255/1000);
        c++;
      }

      background(0);


    };

    void draw() {

     if(!stop){
      for ( i = 0; i < 255; i+=2) {

        for ( j = 0; j < 255; j+=2) {


          for ( k = 0; k < 255; k+=52) {

            update();

          }
        }
        if(i==254 ){
        stop = true;
        noLoop();
        break;
      }

      }

     }

    }
    void update(){
      color coul = rainbow[upd];
      strokeWeight(30);
      stroke(coul,150);

      if (i<=255){
      point (i,j);
      }else{
        stop = true;
      }
      //line(i,j,i+1, j+1);
      if(upd<c){
      upd++;
      }else{
     upd= int(random(c/150));
      }


    }

asimes

@akenaton, I think we have different goals here

What you have is something that looks like a rainbow, but it does not have an equal distribution of all RGB values. For example, the colors (128, 128, 128), (255, 64, 128), (192, 64, 128), etc. would never appear

I was not trying to make a rainbow, I was trying to display an equal distribution of all possible RGB values. Organizing that to look like a rainbow is a different problem. Because I can't show all of them, I skipped around by a small constant amount that isn't divisible by 256

I noticed earlier that some of my math was off, I should have been saying 256 instead of 255, but the general idea I had above still shows an equal distribution

Also, there is no particular advantage to using points() over pixels[], I use pixels[] because it is faster. Below is your sketch using pixels[]:

color[] rainbow;

void setup() {
  size(255, 255, P2D);
  noLoop();

  rainbow = new color[60000];
  int c = 0;

  // Starts as green, becomes yellow
  for (int r = 0; r < 10000; r++) {
    rainbow[c] = color(r*255/10000, 255, 0);
    c++;
  }

  // Starts as yellow, becomes red
  for (int g = 10000; g > 0; g--) {
    rainbow[c] = color(255, g*255/10000, 0);
    c++;
  }

  // Starts as red, becomes magenta
  for (int b = 0; b < 10000; b++) {
    rainbow[c]= color(255, 0, b*255/10000);
    c++;
  }

  // Starts as magenta, becomes blue
  for (int r = 10000; r > 0; r--) {
    rainbow[c] = color(r*255/10000, 0, 255);
    c++;
  }

  // Stars as blue, becomes cyan
  for (int g = 0; g < 10000; g++) {
    rainbow[c] = color(0, g*255/10000, 255);
    c++;
  }

  // Starts as cyan, becomes green
  for (int b = 10000; b > 0; b--) {
    rainbow[c] = color(0, 255, b*255/1000);
    c++;
  }
}

void draw() {
  loadPixels();

  int loc = 0;
  for (int i = 0; i < width; i++) {
    for (int j = 0; j < height; j++) {
      pixels[i+j*width] = rainbow[loc];

      loc++;
      if (loc >= rainbow.length-1) loc = 0;
    }
  }

  updatePixels();
}

akenaton

i agree... but at the beginning the question was "a rainbow"...

piethon

Wow, thanks for all of y'all's posts!