# Fade in and Fade out shader to video

**URL:** <https://discourse.processing.org/t/fade-in-and-fade-out-shader-to-video/11585>\
**Category:** Libraries\
**Created:** [May 25, 2019, 1:41pm UTC](https://discourse.processing.org/t/fade-in-and-fade-out-shader-to-video/11585 "2019-05-25T13:41:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![karinalopez87](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/karinalopez87/32/2603_2.png) [@karinalopez87](https://discourse.processing.org/u/karinalopez87)\
**Post date:** [May 25, 2019, 1:41pm UTC](https://discourse.processing.org/t/fade-in-and-fade-out-shader-to-video/11585/1 "2019-05-25T13:41:51Z")

</div>

Hello, I’m trying to make my shader fade in every 8 - 10 seconds and then fade out and have my video playing in the back. However, I just seem to make it fade in and can’t figure out how to make it fade out. I think there may be an issue in changing the variable transitionAlpha.

```auto
import processing.video.*;
PGraphics pg;

PShader glitch;
PImage img;

Movie myMovie;

// Load all of these separate files in setup()
//Movie[] myMovie = new Movie[one.length]; // e.g.

int arr = 0;

int a = 0;
float md = 0;
float mt = 0;

int idx = 0;

//fadein + fadeout transition
int time = 0;
int lastTime = 0; 
int fadeout = 0;
int fadein = 255; 
boolean vidfadesin = true;

boolean transition = true;
float transitionAlpha = 0.0;

void setup() {
  size(1000, 562, P3D); // 1920/2, 1080/2
  background(0);

  // all .mp4s
  myMovie = new Movie(this, "v1-19.mp4");
  myMovie.loop();

  //pgraphics 
  pg = createGraphics(width, height, P3D);
  noStroke();

  img = loadImage("texture.jpeg");

  //shaders
  glitch = loadShader("shrtoy.frag");
  glitch.set("u_resolution", float(width), float(height));
  glitch.set("u_channel1", img);

  rectMode(CORNER);
}

void movieEvent(Movie m) {
  m.read();
}

void draw() 
{
  glitch.set("u_time", millis() / 1000.0);
  glitch.set("u_channel0", myMovie);

  background(0);  
  int timeDelay = int(random(8000, 10000));

  pg.beginDraw();
  if (transition == true) {
    pg.tint(255, fadein - transitionAlpha);
    pg.filter(glitch);
    pg.image(myMovie, 0, 0, width, height);
  } else {
    pg.tint(255, fadeout + transitionAlpha);
    //pg.filter(glitch);
    pg.image(myMovie, 0, 0, width, height);
  }

  transitionAlpha += 6;

  if (transitionAlpha > 255) {
    if (millis() - time >= timeDelay) {
      time = millis();
      transitionAlpha -= 1;
      fadein = 0;
      fadeout = 255;
    }
  }
  pg.endDraw();
  image(pg, 0, 0);
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [May 26, 2019, 12:34am UTC](https://discourse.processing.org/t/fade-in-and-fade-out-shader-to-video/11585/2 "2019-05-26T00:34:31Z")

</div>

> [@karinalopez87](#):
>
> transitionAlpha

is the value what you manipulate twice ( related to a if )  
why you not just print it to the console and you see soon where you think wrong.

looks to me like:

> if t \< 255 add 6 else add 5

---

<div class="post-metadata">

**Author:** ![karinalopez87](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/karinalopez87/32/2603_2.png) [@karinalopez87](https://discourse.processing.org/u/karinalopez87)\
**Post date:** [May 26, 2019, 5:53pm UTC](https://discourse.processing.org/t/fade-in-and-fade-out-shader-to-video/11585/3 "2019-05-26T17:53:00Z")

</div>

i have it fade in and out, however, it doesn’t fade back in because “&& fadein == 255”, is there a way to get to fade in without using &&

```auto
if (millis() - time >= timeDelay) {
    if (transitionAlpha < 255 && fadein == 255) {
      transitionAlpha += 1;
    } else {
      transitionAlpha -= 1;
      fadein = 0;
      fadeout = 255;
    }
  }

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [May 27, 2019, 12:44am UTC](https://discourse.processing.org/t/fade-in-and-fade-out-shader-to-video/11585/4 "2019-05-27T00:44:20Z")

</div>

where is your print?

try:

```auto
int tAlpha = 0, fade =1;
void setup() {
}
void draw() {
  if (tAlpha >= 255) fade = -1;
  if (tAlpha <= 0 ) fade = 1;
  tAlpha += fade;
  println("tAlpha: "+tAlpha);
}

```

---

<div class="post-metadata">

**Author:** ![karinalopez87](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/karinalopez87/32/2603_2.png) [@karinalopez87](https://discourse.processing.org/u/karinalopez87)\
**Post date:** [May 27, 2019, 3:54pm UTC](https://discourse.processing.org/t/fade-in-and-fade-out-shader-to-video/11585/5 "2019-05-27T15:54:29Z")

</div>

adapting my code to your suggestion worked! however, I’m now having the issue with the timing. I want to have the fade in every 8 - 10 seconds appear and then stay for 8 - 10 seconds before the fade out appears, and then having the fade out do the same thing (staying in fadeout mode for 8 seconds and the switching to fade in). I did a few attempts but it didn’t seem to quite get to my desired point. in my first attempt, the "(millis() - time \>= timeDelay) " if statement does occur every 8 seconds but doesn’t stay there and changes back quite abruptly and causes my video to have unwanted delays (the code below is showing this issue)

```auto
  if (transition == true) {
    pg.tint(255, fadein - transitionAlpha);
    pg.filter(glitch);
    pg.image(myMovie, 0, 0, width, height);
  } else {
    if (transitionAlpha <= 0) fade = 1;
    transitionAlpha += fade;
    pg.tint(255, fadeout + transitionAlpha) ;
    pg.image(myMovie, 0, 0, width, height);
    println("faedout");
  }
  if (millis() - time >= timeDelay) {
    time = millis();
    if (transitionAlpha >= 255) fade = -1;
    transitionAlpha += fade;
    transition = !transition;
    println("fadein");
  } 

```

I rewrote the code to try to fix this issue and it seems to not have any glitches but when going into “(millis() - time \>= timeDelay)” if statement, it doesn’t stay there for the amount of time wanted (you can see the issue in my code below)

```auto
  pg.beginDraw();
  if (transition == true) {
    pg.tint(255, fadein - transitionAlpha);
    pg.filter(glitch);
    pg.image(myMovie, 0, 0, width, height);
  } else {
    pg.tint(255, fadeout + transitionAlpha) ;
    //pg.filter(glitch);
    pg.image(myMovie, 0, 0, width, height);
  }

  if (millis() - time >= timeDelay) {
    time = millis();
    if (transitionAlpha <= 0) fade = 1;
    transitionAlpha += fade;
    println("fadein");
  } else {
    if (transitionAlpha >= 255) fade = -1;
    transitionAlpha += fade;
    println("fadeout");
  }

```

sorry for asking so many questions, i think this is an easy fix but i’m not quite sure what direction to go as of now. also, thank you for your help!

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [May 28, 2019, 12:43am UTC](https://discourse.processing.org/t/fade-in-and-fade-out-shader-to-video/11585/6 "2019-05-28T00:43:28Z")

</div>

you use 2 IF ELSE  
and internal 2 IF for the fade switch

and you again not use enough println  
to show you where in the logic part of the code you are.

* * *

also your code use much more  
( here undeclared / unknown ) variables  
and can not be run,  
while the code i send you  
is runable, and show you with one println  
exactly where ( in the up/down ramp logic )  
you are.

* * *

your text description sounds like you  
want do like a:

- up ramp wait
- down ramp wait  
( repeat ?)

* * *

please post your logic code in a form

- we can run  
NO “pg.” please as not relevant here
- we can see from println  
which of the 4 states is active

* * *

or try to play / understand this:

```auto
int tAlpha = 0, fade =1;
boolean trans = true;
long timeLast, timeDelay=8000;
boolean diagp = true;
float posX = 0;

void setup() {
  size(800, 300);
  fill(0);
  background(200, 200, 0);
}

void draw() {
  //background(200,200,0);
  my_Timer();
  my_tAlpha();
  show_transrect();
  if (diagp) show_info();
}

void my_tAlpha() {
  if ( tAlpha < 0 ) { 
    fade = 1; 
    tAlpha = 0;   
    trans = false;
  }
  if ( tAlpha > 255 ) { 
    fade = -1; 
    tAlpha = 255; 
    trans = false;
  }
  if ( trans ) { 
    tAlpha += fade;
  }
}

void show_transrect() {
  noStroke();
  fill(200, 200, 0);
  rect(width-50, 5, 45, 20);
  fill(0);
  text("TEST", width-40, 20);
  stroke(0, 200, 0);
  fill(0, 200, 0, tAlpha);
  rect(width-50, 5, 45, 20);
}

void show_info() {
  noStroke();
  fill(200, 200, 0);
  rect(0, 0, 150, 30);
  fill(0);
  text("tAlpha: "+nf(tAlpha, 3)+" trans: "+trans, 10, 10);
  stroke(0);
  point(posX, height-tAlpha-10);
  posX+=0.2;
  if ( posX > width ) posX = 0;
  stroke(200, 200, 0);
  line(posX, 0, posX, height);
}

void my_Timer() {
  if (millis() >= timeLast +timeDelay) {
    timeLast += timeDelay;
    trans = !trans;
    if (diagp) println("timeout: "+hour()+":"+minute()+":"+second());
  }
}

```

 ![SNAG-0118](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6e569b7e501ac3046e68b7ed0f8d35e2d96425e0.jpeg)