Math with Colors

Processing Coding Questions
1

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.

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);
}
1 Like
2

in the RGB space it is more easy?

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

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;
}
1 Like
3

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, ...);

1 Like
4

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

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

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.

1 Like
5

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

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.

1 Like
6

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.

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);
}
7

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.

9

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

10

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

11

Hi Turbo012,

If you are interesting in playing with colors, I really advise you to read this post by Jamie Wong.

You can also go check this one by Alan Zucconi on sorting colors.

And finally I would also recommand that you check out the nature of light series, at least the first 3 parts, still by Alan Zucconi.

Cheers :wink:

2 Likes
12

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

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;
  }
}
13

Thank you, I will try that out.

14

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

1 Like
15

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

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;
  }
}
16

Glad it worked out for you!

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

1 Like