Fade to black at irregular frequence, how to loop on the last fade ?!

lolonulu

Hello, I wrote this short code below. It compiles, but I don't know how to loop and re-initiate the same 3 fades again and again, any tip please?! Thanks a lot in advance. Best, L

int fadeStartTime;
int fadeDuration = 2000; // 3 seconds
int intervalTime=6000;
float f;

void setup() {
  size(1920, 1080);
  frameRate(25);
  fadeStartTime = millis();
  //f = fade(millis(), fadeStartTime, fadeDuration, 0, 255); //0->3secs = 0->255 alpha
}

void draw() {
  background(255);
  noStroke();

  int dur = millis()-fadeStartTime;

  // 1)TURKISH
  if ( millis() >=dur && dur <fadeStartTime+fadeDuration ) {
    f = fade(dur, fadeStartTime, fadeDuration, 255, 0); //0->3secs = 0->255 alpha : fade to black
  }  
  if ( dur >fadeStartTime+fadeDuration+ intervalTime && dur <fadeStartTime+fadeDuration+ intervalTime +fadeDuration ) {
    f = fade(dur, fadeStartTime+fadeDuration+ intervalTime, fadeStartTime+fadeDuration+ intervalTime+ fadeDuration, 0, 255);//8->10secs = 255->0 alpha : fade to black
  }  
  if (dur >fadeStartTime+fadeDuration*2+ intervalTime && dur < fadeStartTime+fadeDuration*3+ intervalTime ) { 
    f = fade(dur, fadeStartTime+fadeDuration*2+ intervalTime, fadeStartTime+fadeDuration*3+ intervalTime, 255, 0);//10->12secs = 0->255 alpha :fade to text

    // 2)FRENCH
  }  
  if (dur > fadeStartTime+fadeDuration*3+ intervalTime*2 && dur < fadeStartTime+fadeDuration*4+ intervalTime*2 ) { 
    f = fade(dur, fadeStartTime+fadeDuration*3+ intervalTime*2, fadeStartTime+fadeDuration*4+ intervalTime*2, 0, 255);//18->20secs = 255->0 alpha: fade to black
  }  
  if (dur > fadeStartTime+fadeDuration*4+ intervalTime*2 && dur < fadeStartTime+fadeDuration*5+ intervalTime*2 ) { 
    f = fade(dur, fadeStartTime+fadeDuration*4+ intervalTime*2, fadeStartTime+fadeDuration*5+ intervalTime*2, 255, 0);//20->22secs = 255->0 alpha: fade to text

    // 3)ALSACIAN
  } 
  if (dur > fadeStartTime+fadeDuration*5+ intervalTime*3 && dur < fadeStartTime+fadeDuration*6+ intervalTime*3 ) { 
    f = fade(dur, fadeStartTime+fadeDuration*5+ intervalTime*3, fadeStartTime+fadeDuration*6+ intervalTime*3, 0, 255);//28->30secs = 255->0 alpha: fade to black
  }  
  if (dur > fadeStartTime+fadeDuration*6+ intervalTime*3 && dur < fadeStartTime+fadeDuration*7+ intervalTime*3 ) { 
    f = fade(dur, fadeStartTime+fadeDuration*6+ intervalTime*3, fadeStartTime+fadeDuration*7+ intervalTime*3, 255, 0);//30->32secs = 255->0 alpha: fade to text
  } 
  fill(0, 0, 0, f);
  rect(0, 0, 1920, 1080);

  if (dur > fadeStartTime+fadeDuration*7+ intervalTime*3) {
    // HOW TO LOOP?
  }
}

float fade (float amt, float start1, float stop1, float start2, float stop2) {

  return constrain(
    map ( amt, start1, stop1, start2, stop2 ), 
    min(start2, stop2), 
    max(start2, stop2)
    );
}

jeremydouglass

I don't know how to loop and re-initiate the same 3 fades again and again, any tip please

Please explain clearly what you want the code to do. Do you want it to:

1. show turkish; fade
2. show french; fade
3. show alsacian; fade
4. start over?

Should this be a fade-out / fade-in, or a cross-fade? Should two different texts ever appear at the same time? Should each period of showing be the same duration, or different durations? EXPLAIN.

lolonulu

Hi Jeremy and thanks for answering my question...I would like to fade to black be tween each language, this is working, that each text will be screen during different Time, this should work too but after these 3 languages I' like to start over again(turkish, french and aksacian) and I don ' t find a way to do so. Thanks a lot for your help. Best, laurent

kfrajer

My attempt as a proof of concept and with room for improvement.

Kf

P.S. Notice your code is not properly working... Do you need to figure out the colors?

int fadeStartTime;
int fadeDuration = 2000; // 2 seconds
int intervalTime=6000;
float f;

int state=0;

void setup() {
  size(1920, 1080);
  frameRate(25);
  fadeStartTime = millis();
  //f = fade(millis(), fadeStartTime, fadeDuration, 0, 255); //0->3secs = 0->255 alpha
}

void draw() {
  background(255);
  noStroke();

  int dur = millis()-fadeStartTime;


  // 1)TURKISH
  if ( millis() >=dur && dur <fadeStartTime+fadeDuration ) {
    state=0;
  } else if ( dur >fadeStartTime+fadeDuration+ intervalTime && dur <fadeStartTime+fadeDuration+ intervalTime +fadeDuration ) {
    state=1;
  } else if (dur >fadeStartTime+fadeDuration*2+ intervalTime && dur < fadeStartTime+fadeDuration*3+ intervalTime ) { 
    state=2;


    // 2)FRENCH
  } else if (dur > fadeStartTime+fadeDuration*3+ intervalTime*2 && dur < fadeStartTime+fadeDuration*4+ intervalTime*2 ) {
    state=3;
  } else if (dur > fadeStartTime+fadeDuration*4+ intervalTime*2 && dur < fadeStartTime+fadeDuration*5+ intervalTime*2 ) { 
    state=4;

    // 3)ALSACIAN
  } else if (dur > fadeStartTime+fadeDuration*5+ intervalTime*3 && dur < fadeStartTime+fadeDuration*6+ intervalTime*3 ) {
    state=5;
  } else if (dur > fadeStartTime+fadeDuration*6+ intervalTime*3 && dur < fadeStartTime+fadeDuration*7+ intervalTime*3 ) {
    state=6;
  } else {
    state=0;
    fadeStartTime = millis();
  }



  switch(state) {
  case 0:
    f = fade(dur, fadeStartTime, fadeDuration, 255, 0); //0->3secs = 0->255 alpha : fade to black
    break;
  case 1:
    f = fade(dur, fadeStartTime+fadeDuration+ intervalTime, fadeStartTime+fadeDuration+ intervalTime+ fadeDuration, 0, 255);//8->10secs = 255->0 alpha : fade to black
    break;
  case 2:
    f = fade(dur, fadeStartTime+fadeDuration*2+ intervalTime, fadeStartTime+fadeDuration*3+ intervalTime, 255, 0);//10->12secs = 0->255 alpha :fade to text
    break;
  case 3:
    f = fade(dur, fadeStartTime+fadeDuration*3+ intervalTime*2, fadeStartTime+fadeDuration*4+ intervalTime*2, 0, 255);//18->20secs = 255->0 alpha: fade to black
    break;
  case 4:
    f = fade(dur, fadeStartTime+fadeDuration*4+ intervalTime*2, fadeStartTime+fadeDuration*5+ intervalTime*2, 255, 0);//20->22secs = 255->0 alpha: fade to text
    break;
  case 5:
    f = fade(dur, fadeStartTime+fadeDuration*5+ intervalTime*3, fadeStartTime+fadeDuration*6+ intervalTime*3, 0, 255);//28->30secs = 255->0 alpha: fade to black
    break;
  case 6:
    f = fade(dur, fadeStartTime+fadeDuration*6+ intervalTime*3, fadeStartTime+fadeDuration*7+ intervalTime*3, 255, 0);//30->32secs = 255->0 alpha: fade to text
    break;
  }

  fill(0, 0, 0, f);
  rect(0, 0, 1920, 1080);
}

float fade (float amt, float start1, float stop1, float start2, float stop2) {

  return constrain(
    map ( amt, start1, stop1, start2, stop2 ), 
    min(start2, stop2), 
    max(start2, stop2)
    );
}

lolonulu

Dear kfrajer,

Thank you very much, it works better than my version for sure ;)) Strangely there is a blinck of black frame at the end of the 1rst fade and it looks as the fades in work properly, not the fades out ?! It doesn't loop properly with fadeSartTime=millis(), why? Sorry to bother with these new questions... Thanks for the help. best, L

lolonulu

Dear Jeremy, Yes, I would like to to this :

• show turkish; fade
• show french; fade
• show alsacian; fade
• start over?

This should be a fade-out / fade-in at the and of the prevoious/ begining of the next text .A single text ever appear at the same time. Each period of showing should be of different durations.

• turkish : 1 min
• french : 3 min
• alsacian : 2 min

I hope this time it is clear? Thank you very much for your help. best, L

lolonulu

Dear KFrajer, Sorry for harassing you yersteday, I had a very bad day at work (for tv) not able to focus on this issue. I really apologize for insisting without any cause. Thank you very much for your help I will remember to use 'switch' to record different states nex time. I have intergrated the code to my sketch and now it works perfectly. Best wishes, L

kfrajer

@lolonulu Not a problem at all. I am just having busy days. Good you got it working. Post if you have any other questions.

Kf

kfrajer

This is my attempt working with transition/fading between two selected colors.

Kf

//===========================================================================
// GLOBAL VARIABLES:

StackActionExecutor ex;

color c1;
color c2;
float ratio;

//===========================================================================
// PROCESSING DEFAULT FUNCTIONS:

void settings() {
  size(400, 600);
}

void setup() {

  textAlign(CENTER, CENTER);
  rectMode(CENTER);

  fill(255);
  strokeWeight(2);

  ex = new StackActionExecutor(this);
  ex.add(2000, "blackToRed");
  ex.add(3000, "fade_RedToBlue");
  ex.add(2000, "paintBlue");
  ex.add(3000, "fade_BlueToYelow");
  ex.add(1000, "yellowToBlack");

  ex.add(1500, "blackToRed");
  ex.add(1500, "fade_RedToBlue");
  ex.add(3000, "paintBlue");
  ex.add(30, "run4");
}


void draw() {
  background(0);

  fill(lerpColor(c1, c2, constrain(ratio, 0, 1)));
  ellipse(width/2, height/2, 50, 50);
}

void keyReleased() {
  redraw();
}

void mouseReleased() {
  looping=!looping;
  //ex.pauseFlag=!ex.pauseFlag;  //Call this line if sync_to_looping is false and you want the ex to mimic draw's looping state
}



//===========================================================================
// OTHER FUNCTIONS:



void fade_RedToBlue() {
  c1=color(255, 0, 0);
  c2=color(0, 0, 255);

  runThis("RedToBlue");
}

void paintBlue() {
  c1=color(0, 0, 255);
  c2=color(0, 0, 255);

  runThis("Just blue");
}

void fade_BlueToYelow() {
  c1=color(0, 0, 255);
  c2=color(255, 255, 0);

  runThis("BlueToYelow");
}

void blackToRed() {
  c1=color(0);
  c2=color(255, 0, 0);

  runThis("blackToRed");
}

void yellowToBlack() {
  c1=color(255, 255, 0);
  c2=color(0, 0, 0);

  runThis("yellowToBlack");
}

void run4() {
  runThis("RuN4");
  exit();
  return;
}

void runThis(String label) {
  ratio=ratio=ex.progress;

  if (frameCount%60==0) println(label + " running at "+millis()+" msecs.");
}



//===========================================================================
// OTHER FUNCTIONS:


public class StackActionExecutor { 


  ArrayList<StackActionObject> stack;
  final PApplet p;
  protected boolean pauseFlag;

  protected boolean sync_to_looping;
  float progress;

  StackActionExecutor(PApplet pa) {
    p=pa;
    p.registerMethod("draw", this);
    stack = new ArrayList<StackActionObject>();
    pauseFlag=false;
    sync_to_looping=false;  //Pauses based on main sketch state: isLooping()
    progress=0;
  }

  //If sync_to_looping then one can set the pause flag for this class to either true or false
  //Otherwise, the pauseFlag is handled by internal draw and pause should not be generated
  //by user. 
  //TO DO: pauseFlag should be protected and use pause/resume to enable flag. Pause allowed
  //       only when sync_to_looping is false. Conversely, sync_to_looping can be set only 
  //       when the pauseFlag is false  

  void add(int stime, String methodCall) {
    StackActionObject obj=new StackActionObject(stime, methodCall);
    stack.add(obj);
  }

  void runStack() {

    if (!isDone()) {
      StackActionObject obj=stack.get(0);

      if (obj.activated==false) {
        obj.init();
      }

      obj.run(pauseFlag);    
      progress=obj.lapsedTime*1.0/obj.duration;

      if (obj.isDone()) {
        progress=0;
        stack.remove(obj);
      }
    }
  }

  public void draw() {

    if (sync_to_looping) 
      pauseFlag=!p.isLooping();

    runStack();
  }

  boolean isDone() {
    return !(stack.size()>0);
  }

  void pause() {
    if (sync_to_looping==true) {
      println("Pause was not set as user stack is tight to sketch's current lopping state");
      return;
    }
    pauseFlag=true;
  }

  void align_to_sketch() {
    if (pauseFlag==true) {
      println("sync_to_looping can only be set when current user stack is running.");
      return;
    }
    sync_to_looping=true;
  }

  void resume() {
    pauseFlag=false;
  }




  class StackActionObject {


    String methodFun;
    boolean done;
    boolean activated;
    boolean pause;

    int duration;
    int lapsedTime;
    int lastTime;

    StackActionObject() {
      duration=0;
      lapsedTime=0;
      lastTime=-1;  
      done=false;
      methodFun=null;
      pause=false;
    }

    StackActionObject(int _duration, String mc) {
      duration= _duration;
      lapsedTime=0;      
      lastTime=-1;  
      done=false;
      activated=false;
      methodFun=mc;
      pause=false;
    }

    void init() {

      if (duration>0) {
        done=false;
        activated=true;
        lastTime=millis();
        lapsedTime=0;
        run(false);
      }
    }

    void run(boolean pauseRequested) {    

      //P  PR
      //0  0  Normal
      //0  1  Return, does not execute run content
      //1  1  Return
      //1  0

      if (pause && pause!=pauseRequested) {
        pause=pauseRequested;  //When restoring exection
        lastTime=millis();
        return;
      }

      pause=pauseRequested;  //Updating field when pausing

      if (pause==true)
        return;

      lapsedTime += millis()-lastTime;
      lastTime=millis();

      if (lapsedTime > duration-30) {
        done=true;
        method(methodFun);
        return;
      }


      method(methodFun);
    }

    boolean isDone() {
      return done;
    }
  }
}

lolonulu

Whaow ! Great piece of code dear kfrajer thank you very much for sharing, sure it will be very useful ;))