Reading / Writing HSB values

Processing Coding Questions
1

Using the below code, trying to read the HSB values from PGraphics screen.
Reading is from random areas.
As a test, am currently writing back read values expecting no change.
Running code shows change as should show unaltered output.

What’s wrong??
Please help and any suggestions appreciated.

Thank you.


PGraphics pg;
  
// Size for pg
// high res 20000 X 10000
int wid = 500;
int hei = 500;

void setup() { 
  
  // Size for pg
  pg = createGraphics(500, 500);
  // size for display
  size(500, 500);
  
  pg.beginDraw(); 
  frameRate(60);
  pg.colorMode(RGB);
  pg.background(50,50,50);
  pg.colorMode(HSB);
  pg.endDraw(); 
  pg.loadPixels(); 
  pg.updatePixels();
  image(pg, 0, 0);
}

  void draw() {
  
  for (int i = 0; i < 1; i++) {
    pg.loadPixels();
  drawrect();
    pg.updatePixels();
  }
  
  image(pg, 0, 0);

}

void drawrect() {
  
  
  int pixel;
  
  int x =int(random(wid));
  int y =int(random(hei));
  int w =int(random(150));
  int h =int(random(150));
 
 
  for (int px = 0; px < w; px++) { 
    for (int py = 0; py < h; py++) { 
      
      pixel=(x+px) + ((y+py)*wid);
      
      // get background HSB
      if (pixel < wid*(hei-1)){
        
          float hue2=hue(pg.pixels[pixel]);
          float sat2=saturation(pg.pixels[pixel]);
          float bri2=brightness(pg.pixels[pixel]);
       
       float c=color(hue2,sat2,bri2);

        pg.pixels[pixel] = color(hue2,sat2,bri2); 
      }
      
    }
  }
}
3

Hello,

This was my morning exercise.

I created 2 PG graphics to work through your code and copied from pg1 to pg2; different backgrounds and locations.

I tried to keep the “spirit” of your code so you could understand how I worked through this.

I did have to use colorMode(HSB) in the main sketch window to use HSB variables.

Code 
PGraphics pg1, pg2;
  
// Size for pg1 and pg2
int wid = 400;
int hei = 400;

void setup() 
  { 
  // Size for pg
  pg1 = createGraphics(200, 200);
  pg2 = createGraphics(200, 200);
  
  // size for display
  size(400, 400);
  
  //frameRate(60);
  
  pg1.beginDraw(); 
  pg1.colorMode(RGB);
  pg1.background(0);
  pg1.endDraw(); 
  
  //Test;
  //pg1.loadPixels(); 
  //pg1.updatePixels();
  //image(pg1, 0, 0);
    
  pg2.beginDraw(); 
  pg2.colorMode(RGB);
  pg2.background(255);
  pg2.endDraw(); 
  
  //Test;
  //pg2.loadPixels(); 
  //pg2.updatePixels();
  //image(pg2, 200, 200);
  //noLoop();
  }

void draw() 
  { 
  if (frameCount%30 == 0)
    {
    drawrect();    
    }
  
  image(pg1, 0, 0);
  image(pg2, 200, 200);
  }

void drawrect() 
  {
  int pixel;
  
  wid = 200;
  hei = 200;
  
  int x = int(random(wid));
  int y = int(random(hei));
  int w = int(random(50));
  int h = int(random(50));
 
  //pg1 graphic  
  pg1.beginDraw();
  pg1.loadPixels();
  pg1.colorMode(HSB, 100);
  
  colorMode(HSB, 100);     // I was using colors in the main graphics renderer
  float hue1 = random(100);
  float sat1 = 100;
  float bri1 = 100;
  
  for (int px = 0; px < w; px++) 
    { 
    for (int py = 0; py < h; py++) 
      { 
      pixel=(x+px) + ((y+py)*wid);
      if (pixel < wid*(hei-1))
        {                
        pg1.pixels[pixel] = color(hue1, sat1, bri1); //colorMode(HSB, 100);           
        }    
      }
    }
  pg1.updatePixels();  
  pg1.endDraw();   
  
// pg2 graphic  
  pg2.beginDraw();
  pg2.loadPixels();
  pg1.loadPixels();
  for (int px = 0; px < w; px++) 
    { 
    for (int py = 0; py < h; py++) 
      { 
      pixel=(x+px) + ((y+py)*wid);
      
      // get background HSB
      if (pixel < wid*(hei-1))
        {       
        float hue2 = hue(pg1.pixels[pixel]);
        float sat2 = saturation(pg1.pixels[pixel]);
        float bri2 = brightness(pg1.pixels[pixel]);         
        pg2.pixels[pixel] = color(hue2, sat2, bri2);           
        }    
      }
    }
  pg2.updatePixels();  
  pg2.endDraw();     
  }

image

It may still need work!

:)

4

You set HSB-mode to pg with pg.colorMode(HSB); So the external graphics is in HSB-mode, but processing display is not. Then in drawrect you read HSB values and color is in RGB-mode.

To get rid of changes you need to set processing display to HSB mode with command colorMode(HSB);. A good place for it is just at the end of setup().

5

I’m lost! Lol.

All I need to do is read and write HSB values.
My head hurts!!

1 Like
6

GOT IT !!!

Understand now.
Pg was ok, but when copying to screen - that was in RGB so outputted an interpretation of H=R , S=G, B=B

So screen mode needs to match pg mode.
(I think??)

A very big thanks to you both for input.
Appreciated. !!

2 Likes
7

You got it!

Have fun.

:)

8

Why don’t you drop PGraphics part it’s kinda unnecessary. An you could trim down the code a bit further like this:

void setup() { 
  // size for display
  size(500, 500);
  // set color to RGB(50, 50, 50)
  background(50);
  // set color mode to HSB
  colorMode(HSB);
}

//Draw is run repeatedly
void draw() {  
  loadPixels();
  drawrect();
  updatePixels();
}

void drawrect() {  
  int pixel;
  
  int x =int(random(width));
  int y =int(random(height));
  int w =int(random(150));
  int h =int(random(150));
 
  for (int px = 0; px < w; px++) { 
    for (int py = 0; py < h; py++) { 
      
      pixel=(x+px) + ((y+py)*width);
      // get  HSB
      if (pixel < width*height-1){
        //Get hue, saturation and brightness
        float hue2=hue(pixels[pixel]);
        float sat2=saturation(pixels[pixel]);
        float bri2=brightness(pixels[pixel]);
 
        pixels[pixel] = color(hue2,sat2,bri2); 
      }
    }
  }
}
9

This is because the final code needs to render on a massive resolution for quality outputs.

10

Understand now.
Pg was ok, but when copying to screen - that was in RGB so outputted an interpretation of H=R , S=G, B=B

Well done. I though problem was elsewhere and accidentally solved the problem :grin: You can mostly ignore the code I posted, but have a look at it. There are a few things might help you along.

11

Now trying to work out the Saturation filter:

https://developer.apple.com/library/archive/documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/dq_images/dq_images.html#//apple_ref/doc/uid/TP30001066-CH212-CJBIJEFG

1 Like