# Math with Colors

**URL:** <https://discourse.processing.org/t/math-with-colors/3847>\
**Category:** Coding Questions\
**Created:** [September 26, 2018, 3:27am UTC](https://discourse.processing.org/t/math-with-colors/3847 "2018-09-26T03:27:28Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Turbo012](https://avatars.discourse-cdn.com/v4/letter/t/e9bcb4/32.png) [@Turbo012](https://discourse.processing.org/u/Turbo012)\
**Post date:** [September 26, 2018, 3:27am UTC](https://discourse.processing.org/t/math-with-colors/3847/1 "2018-09-26T03:27:29Z")

</div>

I was wondering if there’s a way to use addition or subtraction on the hex values for color to go up or go down a value.

I tested out a sketch but the colors are limited telling me there’s a loop around with only a specific set of colors.  
Here is the code snippet I was testing it on.

```auto
int penColor = 0xFFCCFFAA;
color c = #006699;
int grad = 1;

void setup() {
  size(1280, 800);
  stroke(c);
  background(192, 64, 0);
}

void draw() {
  line(width/2, height/2, mouseX, mouseY);
  println ("Color: " + c);
  
  c += grad;
  stroke(c);
  
  /*
  if (penColor == 0x000000) {
    grad = 1;
  }
  if (penColor == 0xFFFFFF) {
    grad = -1;
  }
  */
}

void mousePressed() {
  background(192, 64, 0);
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 26, 2018, 6:20am UTC](https://discourse.processing.org/t/math-with-colors/3847/2 "2018-09-26T06:20:58Z")

</div>

in the RGB space it is more easy?

```auto
color c = color(255, 204, 0);
int Rcol = 255,Gcol = 204, Bcol = 0;
int grad =1;

void setup() {
  size(1280, 800);
  stroke(c);
  background(192, 64, 0);
}

void draw() {
  line(width/2, height/2, mouseX, mouseY);

  Rcol -= grad;
  Gcol -= grad;
  Bcol += grad;
  c = color(Rcol, Gcol, Bcol);
  stroke(c);
  
}

void mousePressed() {
  background(192, 64, 0);
  Rcol=255;
  Gcol=204;
  Bcol=0; 
}

```

ok, but to do it forever need check on color limit 0 || 255

```auto
color linec = color(255, 204, 0);
color bgc = color(192, 64, 0);
float Rcol = 255, Gcol = 204, Bcol = 0;
float grad = 0.3;

void setup() {
  size(1280, 800);
  stroke(linec);
  background(bgc);
}

void color_change() {
  Rcol -= grad; if ( Rcol < 0 ) { Rcol = 255; }
  Gcol -= grad; if ( Gcol < 0 ) { Gcol = 255; }
  Bcol += grad; if ( Bcol > 255 ) { Bcol = 0; }
  linec = color(Rcol, Gcol, Bcol);
  stroke(linec);  
}

void draw() {
  color_change();
  line(width/2, height/2, mouseX, mouseY);
}

void mousePressed() { // RESET
  background(bgc);
  Rcol=255;
  Gcol=204;
  Bcol=0;
}

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [September 26, 2018, 6:25am UTC](https://discourse.processing.org/t/math-with-colors/3847/3 "2018-09-26T06:25:37Z")

</div>

As the above post might have gotten you to realize, a color is just a number, and the low-bits of that number are the amount of blue in it. So adding 1 constantly to the number makes it change, yes, but it cycles from no blue to full blue before the green values even change by 1! And the red values, being higher bits still, hardly change at all!

You would be much better off if you have three amounts of change - one for red, one for green, and one for blue, that all change at different amounts (0.1, 0.3, 0.5 would be pretty).

You might also look into using `colorMode(HSB, ...);`

---

<div class="post-metadata">

**Author:** ![monkstone](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/monkstone/32/64_2.png) [@monkstone](https://discourse.processing.org/u/monkstone)\
**Post date:** [September 26, 2018, 6:42am UTC](https://discourse.processing.org/t/math-with-colors/3847/4 "2018-09-26T06:42:11Z")

</div>

You would be even better of using HSB mode, then you can map say the mouseX position to the hue say and or mouseY to the brightness (I am jumping ahead assuming that you are planning to the mouseX and mouseY for something).

```java
float hue = 0;
float sat = 255;
float bright = 255;

void setup(){
  size(250, 250);
  colorMode(HSB);
}

void draw(){
  background(hue, sat, bright);
}

void mousePressed(){
  hue = mouseX;
  bright = mouseY;
}

```

Or as TFGuy suggested the hexadecimal values of colors can be manipulate directly using bitwise operations

```java
int a = c >>24&osxFF;
int r = c >>16*&oxFF;
int g = c >> 8 & oxFF;
int b= c & oxFF;
c = (a<<24)|(r<<16)|(g<<8)| b

```

where a = alpha, r = red, g = green, b = blue; and c is the color a 32-bit integer.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 26, 2018, 11:15pm UTC](https://discourse.processing.org/t/math-with-colors/3847/5 "2018-09-26T23:15:49Z")

</div>

@Turbo012 +1 for HSB Mode.

If you are not familiar with hue / saturation / brightness color space, see the end of the Processing color tutorial, and the reference entry for colorMode.

- [https://processing.org/tutorials/color/](https://processing.org/tutorials/color/)
- [https://processing.org/reference/colorMode\_.html](https://processing.org/reference/colorMode_.html)

When people think of color math, many think of moving up and down a rainbow – and that is changing hue values at 100% saturation and brightness. Trying to manipulate RGB components simultaneously to achieve similar effects can be unnecessarily hard.

---

<div class="post-metadata">

**Author:** ![Turbo012](https://avatars.discourse-cdn.com/v4/letter/t/e9bcb4/32.png) [@Turbo012](https://discourse.processing.org/u/Turbo012)\
**Post date:** [September 27, 2018, 7:01am UTC](https://discourse.processing.org/t/math-with-colors/3847/6 "2018-09-27T07:01:39Z")

</div>

Thank you for the reply. I did some tinkering and this is what I came up with. I will need to test out HSB mode. Is there a good color range pattern or algorithm that goes through all the colors like the rainbow? I assumed going through the colors in hex with be something similar.

```auto
int penColor = #000000;
int grad = #010000;

void setup() {
  size(1280, 800);
  stroke(penColor);
  background(192, 64, 0);
  randomSeed(0);
}

void draw() {
  int r = int(random(0, 5));
  switch(r) {
    case 0:
    grad = #000001;
    break;
    
    case 1:
    grad = #000010;
    break;
    
    case 2:
    grad = #000100;
    break;
    
    case 3:
    grad = #001000;
    break;
    
    case 4:
    grad = #010000;
    break;
    
    case 5:
    grad = #100000;
    break;
  }
  
  penColor += grad;
  stroke(penColor);
  line(width/2, height/2, mouseX, mouseY);
  println ("Color: " + penColor);
}

void mousePressed() {
  if (mouseButton == RIGHT)
    saveFrame("output.png");
    else
    
  background(192, 64, 0);
}

```

---

<div class="post-metadata">

**Author:** ![Turbo012](https://avatars.discourse-cdn.com/v4/letter/t/e9bcb4/32.png) [@Turbo012](https://discourse.processing.org/u/Turbo012)\
**Post date:** [September 27, 2018, 7:04am UTC](https://discourse.processing.org/t/math-with-colors/3847/7 "2018-09-27T07:04:08Z")

</div>

Thank you for your input. It works better than what I had in mind. I hoping if there’s a way so this colors transition better.

---

<div class="post-metadata">

**Author:** ![Turbo012](https://avatars.discourse-cdn.com/v4/letter/t/e9bcb4/32.png) [@Turbo012](https://discourse.processing.org/u/Turbo012)\
**Post date:** [September 27, 2018, 7:07am UTC](https://discourse.processing.org/t/math-with-colors/3847/9 "2018-09-27T07:07:14Z")

</div>

That’s exactly what was happening. I will try that out too.

---

<div class="post-metadata">

**Author:** ![Turbo012](https://avatars.discourse-cdn.com/v4/letter/t/e9bcb4/32.png) [@Turbo012](https://discourse.processing.org/u/Turbo012)\
**Post date:** [September 27, 2018, 7:15am UTC](https://discourse.processing.org/t/math-with-colors/3847/10 "2018-09-27T07:15:44Z")

</div>

Thanks, I agree this color change is more pretty. I am still looking for more range of colors though.

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [September 27, 2018, 7:25am UTC](https://discourse.processing.org/t/math-with-colors/3847/11 "2018-09-27T07:25:06Z")

</div>

Hi Turbo012,

If you are interesting in playing with colors, I really advise you to read [this post](http://jamie-wong.com/post/color/) by Jamie Wong.

You can also go check [this one](https://www.alanzucconi.com/2015/09/30/colour-sorting/) by Alan Zucconi on sorting colors.

And finally I would also recommand that you check out [the nature of light series](https://www.alanzucconi.com/2015/09/30/colour-sorting/), at least the first 3 parts, still by Alan Zucconi.

Cheers 😉

---

<div class="post-metadata">

**Author:** ![Turbo012](https://avatars.discourse-cdn.com/v4/letter/t/e9bcb4/32.png) [@Turbo012](https://discourse.processing.org/u/Turbo012)\
**Post date:** [September 27, 2018, 7:57am UTC](https://discourse.processing.org/t/math-with-colors/3847/12 "2018-09-27T07:57:59Z")

</div>

Thank you. I played around with the HSB mode and this is what I got.

```auto
int maxColor = 255;
float hue = maxColor;
float sat = maxColor;
float bright = maxColor;
int scale = 4;
int widthWin = 1280;
int heightWin = 800;

void setup() {
  //size(width, height);
  surface.setSize(widthWin, heightWin);
  colorMode(HSB);
  background(192, 64, 0);
}

void draw() {
  stroke((mouseX/float(widthWin))*maxColor, sat, (mouseY/float(heightWin))*maxColor);
  line(width/2, height/2, mouseX, mouseY);
  println ("Color: " + (mouseX/float(widthWin))*maxColor + " , " + sat, " , " + (mouseY/float(heightWin))*maxColor);
}

void mousePressed() {
  if (mouseButton == CENTER) {
  background(192, 64, 0);
  }
}

void mouseDragged() {
  if (mouseButton == LEFT) {
    sat--;
    if (sat < 0) sat = 0;
  } else if (mouseButton == RIGHT) {
    sat++;
    if (sat > 255) sat = 255;
  }
}

```

---

<div class="post-metadata">

**Author:** ![Turbo012](https://avatars.discourse-cdn.com/v4/letter/t/e9bcb4/32.png) [@Turbo012](https://discourse.processing.org/u/Turbo012)\
**Post date:** [September 27, 2018, 7:58am UTC](https://discourse.processing.org/t/math-with-colors/3847/13 "2018-09-27T07:58:38Z")

</div>

Thank you, I will try that out.

---

<div class="post-metadata">

**Author:** ![Turbo012](https://avatars.discourse-cdn.com/v4/letter/t/e9bcb4/32.png) [@Turbo012](https://discourse.processing.org/u/Turbo012)\
**Post date:** [September 27, 2018, 8:02am UTC](https://discourse.processing.org/t/math-with-colors/3847/14 "2018-09-27T08:02:18Z")

</div>

Wow! That’s a wealth of information! Thank you, I will take some time in to reading them.

---

<div class="post-metadata">

**Author:** ![Turbo012](https://avatars.discourse-cdn.com/v4/letter/t/e9bcb4/32.png) [@Turbo012](https://discourse.processing.org/u/Turbo012)\
**Post date:** [September 27, 2018, 8:08am UTC](https://discourse.processing.org/t/math-with-colors/3847/15 "2018-09-27T08:08:59Z")

</div>

I believe this is the end result of the color test. It turned out pretty well. Thank you everyone.

```auto
int maxColor = 255;
float hue = maxColor;
float sat = maxColor;
float bright = maxColor;
int scale = 4;
int widthWin = 1280;
int heightWin = 800;
int penColor = 0;
int grad = 1;

void setup() {
  //size(width, height);
  surface.setSize(widthWin, heightWin);
  colorMode(HSB);
  background(192, 64, 0);
}

void draw() {
  stroke(penColor, sat, maxColor);
  line(width/2, height/2, mouseX, mouseY);
  println ("Color: " + (mouseX/float(widthWin))*maxColor + " , " + sat, " , " + (mouseY/float(heightWin))*maxColor);
  penColor += grad;
  if (penColor > 255) {
    penColor = 255;
    grad = -1;
  } else if (penColor < 0) {
    penColor = 0;
    grad = 1;
  }
}

void mousePressed() {
  if (mouseButton == CENTER) {
  background(192, 64, 0);
  }
}

void mouseDragged() {
  if (mouseButton == LEFT) {
    sat--;
    if (sat < 0) sat = 0;
  } else if (mouseButton == RIGHT) {
    sat++;
    if (sat > 255) sat = 255;
  }
}

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 27, 2018, 11:07am UTC](https://discourse.processing.org/t/math-with-colors/3847/16 "2018-09-27T11:07:44Z")

</div>

Glad it worked out for you!

> [@Turbo012](#):
>
> I hoping if there’s a way so this colors transition better.

If you want transitions between two specific colors, check out lerpColor():

- [lerpColor() / Reference / Processing.org](https://processing.org/reference/lerpColor_.html)