Fade in and Fade out shader to video

Processing Libraries
1

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.

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);
}
1 Like
2

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

3

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

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

where is your print?

try:

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

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)

  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)

  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!

6

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:

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
SNAG-0118.jpg1176×733 90.5 KB

1 Like