lerpColor not working on Processing but working on CodePen

Processing Coding Questions
1

I have tried the following code on Processing 3.5.3 and CodePen (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.

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 :slight_smile:

1 Like
2 
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);
}
1 Like
3

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 :slight_smile:

4

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

5

This is integer division in Java – probably not so in the CodePen, which I believe is using ProcessingJS / JavaScript.

To test it, open a new sketch and type:

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:

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:

color newBackColor = lerpColor(fromColor, toColor, amt);
1 Like