# Speed in which Brightness changes defined by mouseX

**URL:** <https://discourse.processing.org/t/speed-in-which-brightness-changes-defined-by-mousex/29007>\
**Category:** Coding Questions\
**Created:** [March 31, 2021, 9:59am UTC](https://discourse.processing.org/t/speed-in-which-brightness-changes-defined-by-mousex/29007 "2021-03-31T09:59:28Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![p\_a](https://avatars.discourse-cdn.com/v4/letter/p/919ad9/32.png) [@p\_a](https://discourse.processing.org/u/p_a)\
**Post date:** [March 31, 2021, 9:59am UTC](https://discourse.processing.org/t/speed-in-which-brightness-changes-defined-by-mousex/29007/1 "2021-03-31T09:59:28Z")

</div>

Hi,  
I made the brightness (HSB Mode) of an ellipse change up and down between 0 and 100  
BUT I want to change the speed in which the brightness changes defined by mouseX.

Here is my code so far, I just don’t know how to use “speed” accuratly. It somehow should add to the steps I guess but clearly the problem is, it adds up more and more, if I do something like step+=speed

```auto
float bri = 0; //brightness
float step = 1; //Steps

void setup()
{

  size(200, 200);
  frameRate(24);
  colorMode(HSB, 360, 100, 100, 100);
}

void draw()
{

  background(0, 0, 0);

  //Speed in which brightness should change
  float speed = map(mouseX, 0, 200, 1, 3);

  //brightness goes up and down
  if (bri > 100 || bri < 0) {
    step *= -1;
  }

  bri += step;

  //drawing ellipse
  fill(100, 100, bri);
  ellipse(width/2, height/2, 50, 50);
}

```

Thanks in advance!

---

<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:** [March 31, 2021, 10:26am UTC](https://discourse.processing.org/t/speed-in-which-brightness-changes-defined-by-mousex/29007/2 "2021-03-31T10:26:29Z")

</div>

As your code is now, the brightness you use (`bri`) changes every frame by the amount of `step`.

And that’s okay! The value of `step` is either `1` or `-1`. Thus the brightness goes up and down by 1 each frame.

But you want it to go faster. So you need it to not change by `step`, but by the calculated amount `speed`.

It might seem like a good idea to just change your code so that `bri` changes by the amount of `speed` every frame. That is, do this:

```auto
bri += speed;

```

But that isn’t going to work! Can you see why?

That’s right - `speed` is always positive - and so the value in `bri` only goes up, and not up and down.

Instead, think about a way that you could use both `step` and `speed` together to get the effect you want. Imagine that you’re running up and down some stairs. If you’re going up, `step` is 1. If you’re running down, `step` is -1. And you do one step at a time.

But you don’t want to always just do one step on the stairs! You want to go faster sometimes. Thus, you need to make use of `speed` as well!

If you’re skipping up the stairs three at a time, you’re stepping in the positive direction (step is 1), and doing three steps at a time (speed is 3). How does this situation change if you’re going down the stairs instead? Your speed is still 3, three steps at a time, but your direction - step - has changed to -1.

Now, what is `step * speed` ??!? That’s the value you really want to use, isn’t it?

```auto
bri += ( step * speed );

```

---

<div class="post-metadata">

**Author:** ![p\_a](https://avatars.discourse-cdn.com/v4/letter/p/919ad9/32.png) [@p\_a](https://discourse.processing.org/u/p_a)\
**Post date:** [March 31, 2021, 10:59am UTC](https://discourse.processing.org/t/speed-in-which-brightness-changes-defined-by-mousex/29007/3 "2021-03-31T10:59:34Z")

</div>

Thank you very much! I was so focused on some much more difficult solutions, that I couldn’t come up with this easy one! Thanks a lot!