# How to I make something darker?

**URL:** <https://discourse.processing.org/t/how-to-i-make-something-darker/2326>\
**Category:** Coding Questions\
**Created:** [August 3, 2018, 2:45am UTC](https://discourse.processing.org/t/how-to-i-make-something-darker/2326 "2018-08-03T02:45:02Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![MNLHMBS](https://avatars.discourse-cdn.com/v4/letter/m/ec9cab/32.png) [@MNLHMBS](https://discourse.processing.org/u/MNLHMBS)\
**Post date:** [August 3, 2018, 2:45am UTC](https://discourse.processing.org/t/how-to-i-make-something-darker/2326/1 "2018-08-03T02:45:02Z")

</div>

I have this code that switches a square from white to black when the mouse is clicked:  
int value = 255;

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

void mouseClicked() {  
if (value == 255) {  
value = 0;  
} else {  
value = 255;  
}  
}  
What I want to do is make the square become gradually more black with each click instead of switching between white and black. Then when the value reaches 0 the next click will rest it to 255. How would I go about this?

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [August 3, 2018, 2:51am UTC](https://discourse.processing.org/t/how-to-i-make-something-darker/2326/2 "2018-08-03T02:51:17Z")

</div>

Generally speaking, you want to do three things:

First, you want to store the state of your sketch (in your case, the color of the square) in variables at the top of your sketch. You’re already doing this with your `value` variable. (Side note: maybe pick a more descriptive variable name, like `squareColor` so it’s easier to think about.)

Second, you want to use that variable in the `draw()` function to draw your scene. You’re already doing this as well.

Finally, you want to **change that variable over time.** This is the part that’s missing. You can gradually change a variable over time by using its previous value to calculate a new value. It could be as simple as this:

```auto
value = value + 10;

```

or

```auto
value = value - 10;

```

Shameless self-promotion: [here](http://happycoding.io/tutorials/processing/animation) is a tutorial on animation in Processing.

---

<div class="post-metadata">

**Author:** ![MNLHMBS](https://avatars.discourse-cdn.com/v4/letter/m/ec9cab/32.png) [@MNLHMBS](https://discourse.processing.org/u/MNLHMBS)\
**Post date:** [August 3, 2018, 3:14am UTC](https://discourse.processing.org/t/how-to-i-make-something-darker/2326/3 "2018-08-03T03:14:42Z")

</div>

Ok so now i have this which makes it get more black with each click, but after the first time it will just go from white to yellow. I just want it to cycle between white and black. What am I missing?

int value = 255;

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

void mouseClicked() {  
if (value == 255) {  
value = value - 30;  
} else {  
value = value - 50;  
}  
}

---

<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:** [August 3, 2018, 3:17am UTC](https://discourse.processing.org/t/how-to-i-make-something-darker/2326/4 "2018-08-03T03:17:41Z")

</div>

Your `mousePressed()` function doesn’t need to change the color - it needs to remember that the color needs to be changing.

You can change the color in `draw()`… but only do it if the color needs to be changing.

---

<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:** [August 3, 2018, 6:20am UTC](https://discourse.processing.org/t/how-to-i-make-something-darker/2326/5 "2018-08-03T06:20:43Z")

</div>

To understand why it becomes yellow, add a `println()` line at the end of your `mouseClicked()` function and watch your console.

```auto
int value = 255;

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

void mouseClicked() {
  if (value == 255) {
    value = value - 30;
  } else {
    value = value - 50;
  }

  println(value);
}

```

As you can see, your variable `value` is taking negative values. If you want to use the `fill()` function with only one parameter to get shades of grey, you need to give a value between 0 and 255. See the documentation:  
[https://processing.org/reference/fill\_.html](https://processing.org/reference/fill_.html)

To avoid that you need to add another condition in your `mouseclicked()` function to check if the value is negative and if so put it back to 0 or 255 or wathever.

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [August 3, 2018, 9:05am UTC](https://discourse.processing.org/t/how-to-i-make-something-darker/2326/7 "2018-08-03T09:05:01Z")

</div>

> [@MNLHMBS](#):
>
> but after the first time it will just go from white to yellow.

Ah, yes, welcome to the stupid way that `color` is implemented in Processing. You could stop it going yellow by making `value` a `float` instead (don’t!). Under the hood, `color` is just an `int` so Java has no way to understand the difference between `fill()` with `int` and `fill()` with `color` - hence hacks, weirdness and yellow!

As @jb4x says, you probably want to add something to the end of `mouseClicked()` along the lines of -

```auto
if (value < 0) {
  value = 255;
}

```