# lerpColor not working on Processing but working on CodePen

**URL:** <https://discourse.processing.org/t/lerpcolor-not-working-on-processing-but-working-on-codepen/17729>\
**Category:** Coding Questions\
**Created:** [February 11, 2020, 1:27pm UTC](https://discourse.processing.org/t/lerpcolor-not-working-on-processing-but-working-on-codepen/17729 "2020-02-11T13:27:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pandoma](https://avatars.discourse-cdn.com/v4/letter/p/dbc845/32.png) [@Pandoma](https://discourse.processing.org/u/Pandoma)\
**Post date:** [February 11, 2020, 1:27pm UTC](https://discourse.processing.org/t/lerpcolor-not-working-on-processing-but-working-on-codepen/17729/1 "2020-02-11T13:27:07Z")

</div>

I have tried the following code on Processing 3.5.3 and CodePen ([https://codepen.io/KevinWorkman/pen/vXZmvB?editors=1000](https://codepen.io/KevinWorkman/pen/vXZmvB?editors=1000) - paste code within it.)

Problem - Apparently the lerpColor does not work with Processing but work online with CodePen, even though it is the same code.

```auto
void setup(){
  size(900,700); //Set canvas size
}

void draw(){
  color fromColor = color(119, 242, 232);
  color toColor = color(105, 79, 255);
  color newBackColor = lerpColor(fromColor, toColor, mouseX/width);
  background(newBackColor);
}

```

I have no idea what is the problem and can’t seem to google out a solution, thx 🙂

---

<div class="post-metadata">

**Author:** ![black](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/black/32/477_2.png) [@black](https://discourse.processing.org/u/black)\
**Post date:** [February 11, 2020, 3:01pm UTC](https://discourse.processing.org/t/lerpcolor-not-working-on-processing-but-working-on-codepen/17729/2 "2020-02-11T15:01:40Z")

</div>

```auto
color fromColor,toColor,newBackColor;
void setup(){
  size(900,700); //Set canvas size 
  fromColor = color(119, 242, 232);
  toColor = color(105, 79, 255);
}

void draw(){
  background(newBackColor);
  float val = map(mouseX,0,width,0,1);
  newBackColor = lerpColor(fromColor, toColor, val);
  println(val);
}

```

---

<div class="post-metadata">

**Author:** ![Pandoma](https://avatars.discourse-cdn.com/v4/letter/p/dbc845/32.png) [@Pandoma](https://discourse.processing.org/u/Pandoma)\
**Post date:** [February 11, 2020, 3:17pm UTC](https://discourse.processing.org/t/lerpcolor-not-working-on-processing-but-working-on-codepen/17729/3 "2020-02-11T15:17:23Z")

</div>

It works, thank you very much.

I still don’t know how you did it, but it’s amazing. If possible mate, help point out the flaws of my code thx 🙂

---

<div class="post-metadata">

**Author:** ![black](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/black/32/477_2.png) [@black](https://discourse.processing.org/u/black)\
**Post date:** [February 11, 2020, 3:18pm UTC](https://discourse.processing.org/t/lerpcolor-not-working-on-processing-but-working-on-codepen/17729/4 "2020-02-11T15:18:55Z")

</div>

> [@black](#):
>
> float val = map(mouseX,0,width,0,1);

I have modified this line of the code. That’s it.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [February 11, 2020, 11:49pm UTC](https://discourse.processing.org/t/lerpcolor-not-working-on-processing-but-working-on-codepen/17729/5 "2020-02-11T23:49:27Z")

</div>

> [@Pandoma](#):
>
> mouseX/width

This is [integer division](https://www.cs.umd.edu/~clin/MoreJava/Intro/expr-int-div.html) in Java – probably not so in the CodePen, which I believe is using ProcessingJS / JavaScript.

To test it, open a new sketch and type:

```auto
void draw(){
  println(mouseX, width, mouseX/width);
}

```

Wiggle the mouse around. See what is happening? 99/100 is still 0 in integer division.

**However** , we can make either of those a floating point number, then division will give you a value between 0.0 and 1.0, which is what you want. So, you could write any one of these lines:

```auto
float amt = (float)mouseX/width;
float amt = float(mouseX)/width;
float amt = mouseX/float(width);
float amt = mouseX/(float)width;
float amt = mouseX * 1.0/width;
float amt = mouseX/(1.0 * width);

```

…and any of those lines would work with:

```auto
color newBackColor = lerpColor(fromColor, toColor, amt);

```