How do I make the tint decrease after mouseX reaches a certain point ?

so I did this drawing of an eclipse and I added a tint that increases with mouseX but I would like it to decrease after mouseX reaches width/2. I tried my best with loops and stuff but I can't seam to figure out how I can make it to decrease. Any help is appreciated :)

 Sun ziSun;
Moon ziMoon;
PGraphics pg;
void setup(){
  size(200,200);
  ziSun = new Sun(width/2, height/2, 100);
  ziMoon = new Moon(90,20,100);
  pg = createGraphics(200,200);
}

void draw(){
  background(135,206,235);
  cloud();
  ziSun.hiu(color(184,134,11),1);
  ziSun.hiu(color(244,175,44),2);
  ziSun.hiu(color(255,215,0),1.5);
  ziSun.display();
  ziMoon.display();

  pg.beginDraw();
  pg.background(0,255);
  pg.endDraw();
  image(pg,0,0);

                  //HERE IS THE TINT PROBLEM
                  // lol just this line
  tint(0,mouseX);
}







void cloud(){
  float leftX = 45;
  float rightX = 200;
  fill(255);
    ellipse(rightX, 50, 126, 97);
    ellipse(rightX+50, 50, 70, 60);
    ellipse(rightX-50, 50, 70, 60);
    ellipse(leftX, 150, 126, 97);
    ellipse(leftX+62, 150, 70, 60);
    ellipse(leftX-62, 150, 70, 60);
}

class Moon{
  float size;
  float posx;
  float posy;

  Moon(float saz, float xpos, float ypos){
    size=saz;
    posx = xpos;
    posy = ypos;
  }

  void display(){
    fill(0);
    ellipse(mouseX,posy,size,size);
  }

}

class Sun{
  float posx;
  float posy;
  float size;
  color c;
  float thickness;
  Sun(float xpos, float ypos, float saz){
    posx = xpos;
    posy = ypos;
    size = saz;
  }

  void display(){
    noStroke();
    fill(244,175,44);
    ellipseMode(CENTER);
    ellipse(posx,posy,size,size);
  }

  void hiu(color cola, float strokewzn){
    c = cola;
    thickness = strokewzn;
    float[] lights = new float[10];
    for (int i=0; i<lights.length; i++){
    stroke(cola);
    strokeWeight(strokewzn);
    line(posx,posy,random(width),random(height));
    }
  }
}