# How do I lerp() colors on a curve? (non linear interpolation)

**URL:** https://discourse.processing.org/t/how-do-i-lerp-colors-on-a-curve-non-linear-interpolation/24815
**Category:** Coding Questions
**Created:** [October 22, 2020, 10:50am UTC](https://discourse.processing.org/t/how-do-i-lerp-colors-on-a-curve-non-linear-interpolation/24815 "2020-10-22T10:50:02Z")
**Posts on this page:** 1
**Showing post:** 4

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [October 22, 2020, 8:26pm UTC](https://discourse.processing.org/t/how-do-i-lerp-colors-on-a-curve-non-linear-interpolation/24815/4 "2020-10-22T20:26:52Z")

</div>

and here is the idea of a sin function going into lerpColor

(by the way, since y gets bigger when you go downwards (!) on the screen, the values might be upside down. So when the sin curve is higher, its y-value is lower)

```auto
// Test to set a color from a sin function 

// ---------------------------------------------------------------------------------------------

void setup() {
  size(1500, 900);
  final int STANDARD_DISTANCE=100;
}

void draw() {
  background(#24B41D);

  // show text 
  fill(0); 
  text("\n"
    +"Demo for using sin function as amt for lerp color - move mouse left and right \n", 
    14, 14);

  // show sin
  for (int i=0; i <=360; i++) {
    float result2 = sin(radians(i));
    noStroke(); 
    fill(255);
    ellipse(map(i, 0, 360, 0, width), result2*120+width/2, 
      12, 12);
  }

  // show color rect 
  testlerpColor();
}

// -------------------------------------------------------------------------------

void testlerpColor() {
  // now it gets interesting 

  // mouseX to lerpColor 
  // mouseX -> angle : 
  float angle=map(mouseX, 0, width, 
    0, TWO_PI);
  // angle -> sin 
  float result = sin(angle); // that's the formula 
  // sin -> amt 
  float amt = map( result, -1, 1, 0, 1); 

  // amt -> lerp color: RED BLUE amt 
  fill( lerpColor( color(255, 0, 0), color(0, 0, 255), amt ) ); 
  rect (100, 100, 66, 66);

  fill(255);
  text ("amt: "
    + amt
    + "\n" 
    + nf( amt, 1, 2), 
    100, 180);
}//func 
//

```

* * *

**And a square function**

```auto
// Test to set a color from function 

// ---------------------------------------------------------------------------------------------

void setup() {
  size(1500, 900);
  final int STANDARD_DISTANCE=100;
}

void draw() {
  background(#24B41D);

  // show text 
  fill(0); 
  text("\n"
    +"Demo for using sin function as amt for lerp color - move mouse left and right \n", 
    14, 14);

  // show sin
  for (int i=0; i <= 5; i++) {
    float result2 = i*i;
    noStroke(); 
    fill(255);
    ellipse(map(i, 0, 5, 0, width), result2*10 + 10, 
      12, 12);
  }

  // show color rect 
  testlerpColor();
}

// -------------------------------------------------------------------------------

void testlerpColor() {
  // now it gets interesting 

  // mouseX to lerpColor 
  // mouseX -> xValue : 
  float xValue=map(mouseX, 0, width, 
    0, 5);
  // xValue ->  
  float result = xValue*xValue; // that's the formula 
  // -> amt 
  float amt = map( result, 0, 25, 0, 1); 

  // amt -> lerp color: RED BLUE amt 
  fill( lerpColor( color(255, 0, 0), color(0, 0, 255), amt ) ); 
  rect (100, 100, 66, 66);

  fill(255);
  text ("amt: "
    + amt
    + "\n" 
    + nf( amt, 1, 2), 
    100, 180);
}//func 
//

```

---

_[View the full topic](https://discourse.processing.org/t/how-do-i-lerp-colors-on-a-curve-non-linear-interpolation/24815)._