Want to change value to color

Processing Coding Questions
1

hi, I would like to alter the “value change” in this example from black -> white to green -> blue. I can not find a way to alter value into color. I want to animate a tear, that turns blue after I clicked the mouse. Could someone show me an example of changing color after clicking the mouse, please.

Here the example from the reference site:

int value = 0;

void draw() {
  fill(value);
  rect(25, 25, 50, 50);
}

void mouseClicked() {
  if (value == 0) {
    value = 255;
  } else {
    value = 0;
  }
}
2

OpenProcessing.org/sketch/473642

3 Likes
3

The problem is that you are using fill(value); where “value” can be only a single number. What you need to do is use fill(valueR, valueG, valueB); instead, to specify red, green and blue colors respectively. It will then switch to the color that is the added result of the red, green and blue colors.
Try this:

int valueR = 0;
int valueG = 0;
int valueB = 0;

void draw() {
fill(valueR, valueG, valueB);
rect(25, 25, 50, 50);
}

void mouseClicked() {
if(valueR==0 & valueG==0 & valueB==0){ //If current color is black
  valueR=valueG=valueB=255;  //Set all 3 values to same 255 color
} else
if(valueR==255 & valueG==255 & valueB==255){  //If current color is white
  valueR=0; valueG=255; valueB=0;
} else
if(valueR==0 & valueG==255 & valueB==0){  //If current color is green
  valueR=0; valueG=0; valueB=255;
} else
if(valueR==0 & valueG==0 & valueB==255){  //If current color is blue
  valueR=valueG=valueB=0;
}
}
2 Likes
4

wow, that is some advanced code from my noob perspective :D. thank you very much for the fast reply! the site you referred me to, looks amazing.

5

dear Architector_4,
thank you very much for your fast and detailed answer. Building on the piece of code you sent me, I think I will be able to develop the effect I inteded to :).

6

You’re welcome! Good luck!
Although, there is a way to make the code better, which is used in GoToLoop’s example, but isn’t that “advanced”. It would be to use an index value, and instead of choosing a color based on previous color, choose a color that is attributed to a specific index. Like this:

int valueR = 0;
int valueG = 0;
int valueB = 0;

int index=3;
//Since we start with black, we should set the
//index to the index of the black color.


void draw() {
fill(valueR, valueG, valueB);
rect(25, 25, 50, 50);
}

void mouseClicked() {
index = (index+1)%4;
//This will make index value increase by 1 on every click
//But as soon as it turns 4, it's reset back to 0
//So on clicks, the index changes like this: 0>1>2>3>0>1>2>3


if(index==0){
  valueR=valueG=valueB=255;  //Set all 3 values to same 255 color
} else
if(index==1){
  valueR=0; valueG=255; valueB=0;
} else
if(index==2){
  valueR=0; valueG=0; valueB=255;
} else
if(index==3){
  valueR=valueG=valueB=0;
}
}
2 Likes