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

edited January 2015 in Questions about Code

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?

Tagged:

Comments

  • B is allways 0 in your code...

  • :|

    ...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.

  • 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);
        }
      }
    }
    
  • edited January 2015

    @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...

  • edited January 2015

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

  • @ 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...

  • edited February 2015

    @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)

  • 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();
    }
    
  • @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...

  • @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));
          }
    
    
        }
    
  • @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();
    }
    
  • i agree... but at the beginning the question was "a rainbow"...

  • edited February 2015

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

Sign In or Register to comment.