mousePressed + Fade In + Fade Out

Hello!

I'm building a small installation with some old POS touchscreen monitors.
The concept is simple : blue background is visible at any point there is no touch interaction of the screen. Once something touches the screen, "alphavalue" starts going up and showing the video loop that is constantly playing. When the user stops touching the screen, I want it to fade out the same way it fade in, instead of just "cutting" as it's happening now. It will start to count down from the current "alphavalue" all the way to the original one.

Any advice would be great! Here is my code:


int alphavalue;
int starttime;
int delaytime = 9255;
int curtime;
 
float count_up;
float count_down;
float calc_alpha;

import processing.video.*;

Movie movie;
 
void setup(){
  size(640, 480);
  movie = new Movie(this, "TEST_0.mov");
  movie.loop();
}

void movieEvent(Movie movie)
{
  movie.read();
}
 
void draw()
{
  image(movie, 0, 0);
  tint(0, 0, 255, alphavalue);
 
  if(mousePressed) {
 
    if (millis() - starttime < delaytime) {
      count_up = (millis() - starttime);      // timer count (difference from time first mousePressed occurs and the total runtime of sketch)
      count_down = delaytime - count_up; // countdown since started (mousePressed())
 
     
         if (mouseButton == LEFT) {
          calc_alpha = 255 / (delaytime / count_up); // fade-in, calculate alpha value vs. duration
          alphavalue = ceil(calc_alpha); // ceil rounds UP and returns the closest integer value
         }
     
      if (alphavalue == 0) { count_down = 0; count_up = delaytime;}     //some precision is lost from float to int, so i reset the counters..
   
  }
  else {
    background(0, 0, 255, alphavalue);
}
 
}
 
}
void mousePressed() {
    starttime = millis(); 
}

void mouseReleased() {
  redraw();
}