# HSB values are altered

**URL:** https://discourse.processing.org/t/hsb-values-are-altered/44953
**Category:** Processing
**Created:** [August 17, 2024, 4:59pm UTC](https://discourse.processing.org/t/hsb-values-are-altered/44953 "2024-08-17T16:59:33Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![Erik](https://avatars.discourse-cdn.com/v4/letter/e/b5ac83/32.png) [@Erik](https://discourse.processing.org/u/Erik)
#### Post date: [August 17, 2024, 4:59pm UTC](https://discourse.processing.org/t/hsb-values-are-altered/44953/1 "2024-08-17T16:59:33Z")

</div>

I want to use HSB colormode, and in setup I’ve added:

```auto
colorMode(HSB,360,100,100);

```

For some reason the colors in my code are not retained as HSB values and are therefore altered when i use fill() followed by rect(). I can only guess, but it appears that some sort of implicit color format conversion takes place somewhere against my will.

I realize this can be tricky to answer without seeing all my code, but is there a simple explanation for this?

I am using colorMode() once in setup(), and am only copying values without any other calculations of color values, so how can the colors be altered in this manner?

---

<div class="post-metadata">

### Author: ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)
#### Post date: [August 17, 2024, 5:20pm UTC](https://discourse.processing.org/t/hsb-values-are-altered/44953/2 "2024-08-17T17:20:30Z")

</div>

`colorMode` defines how the colour parameter in commands such as `fill`, `background` etc are to be _interpreted_. Internally all colours are stored as 32 bit integers using ARGB values.

---

<div class="post-metadata">

### Author: ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [August 17, 2024, 5:21pm UTC](https://discourse.processing.org/t/hsb-values-are-altered/44953/3 "2024-08-17T17:21:14Z")

</div>

Hi @Erik,

The color mode remains as long as no other color mode is set and processing internally is not changing this.  
Maybe you can demonstrate on a simple example how you are using color mode, fill, etc. and having such an odd behavior…

Cheers  
— mnse

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [August 18, 2024, 1:43am UTC](https://discourse.processing.org/t/hsb-values-are-altered/44953/4 "2024-08-18T01:43:44Z")

</div>

Hello @Erik,

Some resources here that may provide insight:

- [Color / Processing.org](https://processing.org/tutorials/color)
- [color / Reference / Processing.org](https://processing.org/reference/color_datatype.html)
- [colorMode() / Reference / Processing.org](https://processing.org/reference/colorMode_.html)
- [\>\> (right shift) / Reference / Processing.org](https://processing.org/reference/rightshift.html)
- [Color Gradients in Processing (v 2.0) | by Jeremy Behreandt | Medium](https://behreajj.medium.com/color-gradients-in-processing-v-2-0-e5c0b87cdfd2)

Source code:

- [processing/core/src/processing/core/PApplet.java at master · processing/processing · GitHub](https://github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java)
- [processing/core/src/processing/core/PGraphics.java at master · processing/processing · GitHub](https://github.com/processing/processing/blob/master/core/src/processing/core/PGraphics.java)

`:)`

---

<div class="post-metadata">

### Author: ![Erik](https://avatars.discourse-cdn.com/v4/letter/e/b5ac83/32.png) [@Erik](https://discourse.processing.org/u/Erik)
#### Post date: [August 18, 2024, 3:43pm UTC](https://discourse.processing.org/t/hsb-values-are-altered/44953/5 "2024-08-18T15:43:34Z")

</div>

> [@mnse](#):
>
> Maybe you can demonstrate on a simple example how you are using color mode, fill, etc. and having such an odd behavior…

Thanks for your feedback, here’s an example imitating my project. I’ve tried to make my example as short as possible:

TestPalette.pde:

```auto
void setup() {
    size(1080, 1080);
    colorMode(HSB,360,100,100);
    noStroke();

    drawColorSwatches();
}

void main() {  
}

```

Constants.pde:

```auto
final color red = color(0, 100, 100);
final color yellow = color(60, 100, 100);
final color green = color(120, 100, 100);
final color blue = color(240, 100, 100);

```

Palette.pde:

```auto
public class Palette {
    Palette() {         
        palette.add(red);
        palette.add(yellow);
        palette.add(green);
        palette.add(blue);
    }
    
    ArrayList<Integer> get() {
        return this.palette;
    }
    
    private ArrayList<Integer> palette = new ArrayList<>();
} 

```

DrawColorSwatches.pde:

```auto
void drawColorSwatches() {      
    Palette palette = new Palette();
    ArrayList<Integer> colors = palette.get();
    float swatchSize = width / (float)colors.size();
    
    for (int i = 0; i < colors.size(); i++) {
        color c = colors.get(i);
        fill(c);
        rect(i * swatchSize, 0, swatchSize, 50);
        
        // Display HSB values
        fill(0);
        text("H: " + hue(c) + "\nS: " + saturation(c) + "\nB: " + brightness(c), 
            i * swatchSize + 5, 60);
    }
}

```

---

<div class="post-metadata">

### Author: ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)
#### Post date: [August 18, 2024, 4:31pm UTC](https://discourse.processing.org/t/hsb-values-are-altered/44953/6 "2024-08-18T16:31:55Z")

</div>

> [@Erik](#):
>
> ```auto
> final color red = color(0, 100, 100);
> final color yellow = color(60, 100, 100);
> final color green = color(120, 100, 100);
> final color blue = color(240, 100, 100);
> 
> ```

These constants are declared outside setup or any other function so will be executed before the `setup()` function. This means before the `colorMode(HSB,360,100,100);` statemnent so uses the default `RGB` color mode.

---

<div class="post-metadata">

### Author: ![Erik](https://avatars.discourse-cdn.com/v4/letter/e/b5ac83/32.png) [@Erik](https://discourse.processing.org/u/Erik)
#### Post date: [August 18, 2024, 4:44pm UTC](https://discourse.processing.org/t/hsb-values-are-altered/44953/7 "2024-08-18T16:44:24Z")

</div>

OK thanks, that explains a lot!

Is there a way to predict the order of initialization in processing when using multiple files? Or is everything meant to be encapsulated in class definitions or methods, to be called in the desired order?

---

<div class="post-metadata">

### Author: ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)
#### Post date: [August 18, 2024, 4:54pm UTC](https://discourse.processing.org/t/hsb-values-are-altered/44953/8 "2024-08-18T16:54:03Z")

</div>

In Processing when using multiple pde tabs the files are all concatenated into a single file and the entire code is wrapped in a Java class named after the sketch name. This Java class is then compileed and instantiated.

So the answer to the question

> [@Erik](#):
>
> Is there a way to predict the order of initialization in processing when using multiple files?

is both yes and no. Although we can’t predict the order the files are concatenated we can predict the order that statements are executed when a Java class is instantiated. This is why I know that the color constants are initiated before the setup function is executed.

---

<div class="post-metadata">

### Author: ![Erik](https://avatars.discourse-cdn.com/v4/letter/e/b5ac83/32.png) [@Erik](https://discourse.processing.org/u/Erik)
#### Post date: [August 18, 2024, 5:04pm UTC](https://discourse.processing.org/t/hsb-values-are-altered/44953/9 "2024-08-18T17:04:01Z")

</div>

So, what would be a suitable project design in order to make sure that objects are instantiated in the desired order?

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [August 18, 2024, 6:35pm UTC](https://discourse.processing.org/t/hsb-values-are-altered/44953/10 "2024-08-18T18:35:32Z")

</div>

Take a look in this folder ( `%temp%/processing` ) to see the java code that Processing is generating:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/c/7cb65a29db7e1f9cf599b139a02feaf63cd62281.png)

This example will generate HSB color constants (stored as RGB) to use later in desired mode:

```auto
import java.awt.Color;

// Create color constants using colorMode(HSB, 360, 100, 100) values

// These are RGB colors but you want these to represent HSB colors:
// final color red = color(0, 100, 100);
// final color yellow = color(60, 100, 100);

//https://docs.oracle.com/en/java/javase/17/docs/api/java.desktop/java/awt/Color.html

// This will save colorMode(HSB, 360, 100, 100) values to RGB for use later with that mode:

final Color red_hsb = Color.getHSBColor(0/360.0, 100/100.0, 100/100.0);
final int red = red_hsb.getRGB();

final Color yellow_hsb = Color.getHSBColor(60/360.0, 100/100.0, 100/100.0);
final int yellow = yellow_hsb.getRGB();

final Color green_hsb = Color.getHSBColor(120/360.0, 100/100.0, 100/100.0);
final int green = green_hsb.getRGB();

void setup()
  {
  println(g.width, g.height);  
  size(150, 150);  
  colorMode(HSB, 360, 100, 100);  
  
  println(hex(red), hex(yellow), hex(green)); 
  
  fill(red);
  circle(30, 30, 30);
  
  fill(yellow);
  circle(60, 30, 30);  
  
  fill(green);
  circle(90, 30, 30);  
  }

void draw()
  {  
  }

```

Reference:

> **[Color (Java SE 17 & JDK 17)](https://docs.oracle.com/en/java/javase/17/docs/api/java.desktop/java/awt/Color.html)**
>
> declaration: module: java.desktop, package: java.awt, class: Color

`:)`

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [August 18, 2024, 8:17pm UTC](https://discourse.processing.org/t/hsb-values-are-altered/44953/11 "2024-08-18T20:17:19Z")

</div>

There are a few PApplet members which should only be accessed when **settings()** or **setup()** are called back, not before!

Fields like _width_ & _height_. And methods such as **sketchPath()** & **color()**.

If we need to access **color()** before **setup()**, besides @glv’s workaround using Java’s Color class, we can replace the former w/ #RRGGBB literals:

> **[color / Reference](https://processing.org/reference/color_datatype.html)**
>
> Datatype for storing color values. Colors may be assigned with get() and color() or they may be specified directly using hexadecimal notation such as #FFCC00 or 0xFFFFCC00.…

```auto
static final color[] PALETTE = {
  #FF0000, // red
  #00FF00, // lime
  #0000FF, // blue
  #FF00FF, // fuchsia
  #00FFFF // aqua
};

```

Notice my `PALETTE[]` array above doesn’t rely on method **color()** in order to populate its colors.

---

<div class="post-metadata">

### Author: ![Erik](https://avatars.discourse-cdn.com/v4/letter/e/b5ac83/32.png) [@Erik](https://discourse.processing.org/u/Erik)
#### Post date: [August 26, 2024, 10:47am UTC](https://discourse.processing.org/t/hsb-values-are-altered/44953/12 "2024-08-26T10:47:03Z")

</div>

Thanks for your feedback everyone! I’m defining color constants - among other constants - in a dedicated Constants.pde file. It appears to be the least complicated solution for now, and I hope it will work from now on.
