Shader in processing

Processing Libraries
1

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
2

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.

3

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

1 Like
4

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