Shader in processing

Does anyone know how to bring the float remain and coord.x into processing to edit and add randomization?

Also, I’ve been attempting to use pgraphics to incorporate the shader as a layer to fade in and fade out.

glsl code src:

uniform vec2 u_resolution;
uniform vec4 u_vertColor;
uniform vec4 u_vertTexCoord;
uniform sampler2D u_channel0;
uniform sampler2D u_channel1;
uniform float u_time;

#define PROCESSING_TEXTURE_SHADER

//out vec4 fragColor;
//attribute vec4 color;

void main() {
//    mainImage(gl_FragColor,gl_FragCoord.xy);
    float remain = sin(u_time * 0.3) * 0.4;
    vec2 coord = gl_FragCoord.xy/ u_resolution.xy;
    coord.y = abs(1.0 - coord.y);
    coord.x = coord.x + texture2D(u_channel1, coord ).x * remain * 0.5;
    vec4 color = texture2D(u_channel0, coord);
    gl_FragColor = color;
//    gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);
}

processing code src:

import processing.video.*;
 
PGraphics pg;

PShader glitch;
PImage img;

String[] one = {"v1-1.mp4","v1-2.mp4","v1-3.mp4", "v1-4.mp4", "v1-5.mp4"};

Movie myMovie;

int arr = 0;

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

int idx = 0;

 
 
boolean transition = false;
float transitionAlpha = 0.0;

 
void setup() {
  size(1000, 562, P3D);
  background(0);
  
  // all .mp4s
  myMovie = new Movie(this, one[int(random(one.length))]);
  
  //pgraphics 
  pg = createGraphics(width, height, P3D);
  myMovie.play();
  
  //shaders
  glitch = loadShader("shrtoy.frag");
  glitch.set("u_resolution", float(width), float(height));
  glitch.set("u_channel1", myMovie);
}
 
void movieEvent(Movie m) {
  m.read();
}
 
void draw() 
{
  if(a == 0) { 
   image(myMovie, 0, 0);
  }
  image(myMovie, 0, 0);
  float md = myMovie.duration();
  float mt = myMovie.time();
  
  if (md - mt<0.1){// to find the end of the movie
   myMovie = null;
  final int NUM = 5;
  final IntList nums = new IntList(NUM);
 
  for (int i = 0; i != NUM; nums.append(++i));
  nums.shuffle();
  final int[] arr = nums.array();
  
  myMovie = new Movie(this, one[arr[idx++]-1]);
  myMovie.play();
   if (idx > one.length -1){
    idx = 0; 
   }

 }
   glitch.set("u_time", millis() / 1000.0);
  glitch.set("u_channel0", myMovie);
  filter(glitch);
  //pg.image(myMovie, 0, 0, width, height);
  if (transition == true) 
  {
    pg.beginDraw();
    
    //pg.tint(255, 255-transitionAlpha);
    //pg.image(myMovie, 0, 0, width, height);
    //pg.background(0); 
    //pg.rect(0, 0, width, height);
    //pg.tint(255, transitionAlpha);
    pg.filter(glitch);
    //pg.image(myMovie,  0, 0, width, height);   
    pg.endDraw();
    
    transitionAlpha += 1.0;
    if (transitionAlpha > 255) {
      transition = false;
      transitionAlpha = 0;
    }
    //image(pg, 0, 0); 
  }
}

void keyPressed() {
  if (key == ' ') {
    transition = true;
  }
}
1 Like

Well, you can send additional parameters to your shader that adds randomization, no? If you want individual random number for each pixel, I think you’ll have to implement (or find) a glsl implementation of the random() function.

For past examples see this thread: Convert Shader from Shadertoy.com for Processing - Processing 2.x and 3.x Forum

1 Like

Thank you for the reference! This was really helpful, I was able to make it work successfully :slight_smile: