# Reading / Writing HSB values
**URL:** https://discourse.processing.org/t/reading-writing-hsb-values/20710
**Category:** Coding Questions
**Created:** [May 10, 2020, 12:55pm UTC](https://discourse.processing.org/t/reading-writing-hsb-values/20710 "2020-05-10T12:55:52Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@IRIGIMA](https://discourse.processing.org/u/IRIGIMA)
#### Post date: [May 10, 2020, 12:55pm UTC](https://discourse.processing.org/t/reading-writing-hsb-values/20710/1 "2020-05-10T12:55:52Z")
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.
```auto
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);
}
}
}
}
```
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [May 10, 2020, 3:01pm UTC](https://discourse.processing.org/t/reading-writing-hsb-values/20710/3 "2020-05-10T15:01:36Z")
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**
>
> ```auto
> 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();
> }
>
> ```
It may still need work!
`:)`
---
### Author:  [@SomeOne](https://discourse.processing.org/u/SomeOne)
#### Post date: [May 10, 2020, 3:10pm UTC](https://discourse.processing.org/t/reading-writing-hsb-values/20710/4 "2020-05-10T15:10:10Z")
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().
---
### Author:  [@IRIGIMA](https://discourse.processing.org/u/IRIGIMA)
#### Post date: [May 10, 2020, 3:13pm UTC](https://discourse.processing.org/t/reading-writing-hsb-values/20710/5 "2020-05-10T15:13:22Z")
I’m lost! Lol.
All I need to do is read and write HSB values.
My head hurts!!
---
### Author:  [@IRIGIMA](https://discourse.processing.org/u/IRIGIMA)
#### Post date: [May 10, 2020, 3:20pm UTC](https://discourse.processing.org/t/reading-writing-hsb-values/20710/6 "2020-05-10T15:20:07Z")
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. !!
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [May 10, 2020, 3:26pm UTC](https://discourse.processing.org/t/reading-writing-hsb-values/20710/7 "2020-05-10T15:26:08Z")
You got it!
Have fun.
`:) `
---
### Author:  [@SomeOne](https://discourse.processing.org/u/SomeOne)
#### Post date: [May 10, 2020, 3:29pm UTC](https://discourse.processing.org/t/reading-writing-hsb-values/20710/8 "2020-05-10T15:29:36Z")
Why don’t you drop PGraphics part it’s kinda unnecessary. An you could trim down the code a bit further like this:
```auto
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);
}
}
}
}
```
---
### Author:  [@IRIGIMA](https://discourse.processing.org/u/IRIGIMA)
#### Post date: [May 10, 2020, 3:33pm UTC](https://discourse.processing.org/t/reading-writing-hsb-values/20710/9 "2020-05-10T15:33:51Z")
This is because the final code needs to render on a massive resolution for quality outputs.
---
### Author:  [@SomeOne](https://discourse.processing.org/u/SomeOne)
#### Post date: [May 10, 2020, 3:34pm UTC](https://discourse.processing.org/t/reading-writing-hsb-values/20710/10 "2020-05-10T15:34:38Z")
> 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 😁 You can mostly ignore the code I posted, but have a look at it. There are a few things might help you along.
---
### Author:  [@IRIGIMA](https://discourse.processing.org/u/IRIGIMA)
#### Post date: [May 10, 2020, 9:34pm UTC](https://discourse.processing.org/t/reading-writing-hsb-values/20710/11 "2020-05-10T21:34:36Z")
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](https://developer.apple.com/library/archive/documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/dq_images/dq_images.html#//apple_ref/doc/uid/TP30001066-CH212-CJBIJEFG)