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

p5.js Coding Questions
4

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)

// 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

// 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 
//