# Want to change value to color
**URL:** https://discourse.processing.org/t/want-to-change-value-to-color/4935
**Category:** Coding Questions
**Created:** [October 27, 2018, 5:34pm UTC](https://discourse.processing.org/t/want-to-change-value-to-color/4935 "2018-10-27T17:34:12Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@anna\_mei](https://discourse.processing.org/u/anna_mei)
#### Post date: [October 27, 2018, 5:34pm UTC](https://discourse.processing.org/t/want-to-change-value-to-color/4935/1 "2018-10-27T17:34:12Z")
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:
```auto
int value = 0;
void draw() {
fill(value);
rect(25, 25, 50, 50);
}
void mouseClicked() {
if (value == 0) {
value = 255;
} else {
value = 0;
}
}
```
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [October 27, 2018, 5:46pm UTC](https://discourse.processing.org/t/want-to-change-value-to-color/4935/2 "2018-10-27T17:46:24Z")
[OpenProcessing.org/sketch/473642](http://OpenProcessing.org/sketch/473642)
---
### Author:  [@Architector\_4](https://discourse.processing.org/u/Architector_4)
#### Post date: [October 27, 2018, 5:49pm UTC](https://discourse.processing.org/t/want-to-change-value-to-color/4935/3 "2018-10-27T17:49:31Z")
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:
```auto
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;
}
}
```
---
### Author:  [@anna\_mei](https://discourse.processing.org/u/anna_mei)
#### Post date: [October 27, 2018, 5:57pm UTC](https://discourse.processing.org/t/want-to-change-value-to-color/4935/4 "2018-10-27T17:57:01Z")
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.
---
### Author:  [@anna\_mei](https://discourse.processing.org/u/anna_mei)
#### Post date: [October 27, 2018, 6:05pm UTC](https://discourse.processing.org/t/want-to-change-value-to-color/4935/5 "2018-10-27T18:05:46Z")
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 :).
---
### Author:  [@Architector\_4](https://discourse.processing.org/u/Architector_4)
#### Post date: [October 27, 2018, 6:21pm UTC](https://discourse.processing.org/t/want-to-change-value-to-color/4935/6 "2018-10-27T18:21:59Z")
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:
```auto
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;
}
}
```