Theres a lot of problem and i need help:

the idea of the program is that user can pick the shader in real time. there are two problems, first, i dont know how uploading the vertexShader, when i save it and reload it i need to click in another frag and then vertex upload.

second, it seems very inestable.the window of shaders crash very often, specially when frame rate is lowest. I wondering how to fix that. maybe with thread(), but it dont know exactly how apply this method..

If someone have time and wants to help, im sure that this code needs to be re writing. Thanks!

ShaderWindow shaderWin;

boolean recording = false;


import netP5.*;
import oscP5.*;

OscP5 oscP5;
NetAddress myRemoteLocation;

import themidibus.*;
MidiBus bus;
MidiBus apc;
float cc [] =new float [256];


boolean record, load;
double folderTime;
File folderShader;
float desmouse = 0.5;

// BUFFERS-SHADERS

String dirFolderShaders;
String dirFolderShaders2;
String dirFolderShadersvertex;

PGraphics [] buffers = new PGraphics [4];
PGraphics buffer;

LoadShader loadshader;

LoadShader loadshader2;
LoadShader loadshaderVertex;

ArrayList<ViewShader>vs = new ArrayList<ViewShader>();
ViewShaderVertex ss;

PShader sh, buffer1;
float count;
float angle = random(0, 0.005);

int choiceSize =1;
//int ww =  1920;
//int h = 1080;

void settings() {
  if (choiceSize==0) fullScreen(P3D, 2);
  if (choiceSize==1) size(1000, 1000, P3D);
  if (choiceSize==2) size(720, 1280, P3D);
}

void setup() {

  // BUFFERS-SHADERS

  dirFolderShaders = sketchPath("frag/");  //PUT SOME FRAGMENT IN THIS FOLDER

  dirFolderShadersvertex = sketchPath("vertex/"); PUT SOME VERTEX IN THIS FOLDER

  loadshader = new LoadShader(dirFolderShaders);

  loadshaderVertex = new LoadShader(dirFolderShadersvertex);


  for (int i = 0; i < buffers.length; i++) {
    buffers[i] = createGraphics(width, height, P3D);
  }


  ss = new ViewShaderVertex(loadshaderVertex.shadersPaths[1], loadshaderVertex, buffer);
  vs.add(new ViewShader(loadshader.shadersPaths[0], loadshader, buffer, ss));

  shaderWin = new ShaderWindow();
}

void draw() {

  background(0);


  for (ViewShader s : vs) {
    s.update();
  }


  if (folderShader.listFiles().length != loadshader.shadersNames.length) {
    loadshaderVertex.loadFolderShader();
  }

  if (folderShader.listFiles().length != loadshader.shadersNames.length) {
    loadshader.loadFolderShader();
  }




  buffers[0].beginDraw();
  buffers[0].background(0);
  buffers[0].translate(width/2, height/2);


  buffers[0].sphere(100);
  buffers[0].endDraw();

  image(buffers[0],0,0);
}



// LOAD SHADER CLASS

class LoadShader {

  String dirFolderShaders;

  String[] shadersNames;
  String[] shadersPaths;

  LoadShader(String _dirFolderShaders) {
    dirFolderShaders= _dirFolderShaders;
    loadFolderShader();
  }

  void loadFolderShader() {
    load = true;
    folderShader = new File(dirFolderShaders);
    File files[] = folderShader.listFiles();
    shadersNames = new String[files.length];
    shadersPaths = new String[files.length];
    for (int i = 0; i < files.length; i++) {
      shadersNames[i] = split(files[i].getName(), ".")[0];
      shadersPaths[i] = files[i].getAbsolutePath();
      //println(shadersNames[i]);
    }
    load = false;
  }
}

class ViewShader {

  boolean reload, error, loaded;
  File fileShader;

  long timeModi;
  long timeModis;
  String src;

  PShader shader;
  PShader shader1;
  PShader shader2;
  float a;
  LoadShader loadshader;
  ViewShaderVertex ss;
  PGraphics b;

  ViewShader(String _src, LoadShader _loadshader, PGraphics _b) {
    src = _src;
    fileShader = new File(src);
    openShader(fileShader);
    //shader1 = loadShader("blur.glsl", "bloomVert.glsl");
    //shader2 = loadShader("blur_vertical.glsl", "bloomVert.glsl");
    loadshader = _loadshader;
    b = _b;
  }

  ViewShader(String _src, LoadShader _loadshader, PGraphics _b, ViewShaderVertex _s) {
    ss = _s;

    //shader = loadShader("test2.glsl", "defaultVertex2.glsl");
    //shader1 = loadShader("blur.glsl", "bloomVert.glsl");
    //shader2 = loadShader("blur_vertical.glsl", "bloomVert.glsl");

    src = _src;
    fileShader = new File(src);
    openShader(fileShader);
    loadshader = _loadshader;
    b = _b;
  }


  void update() {
    if (reload) {      
      openShader(fileShader);
      reload = false;
    }
    if (shader != null) {

      //float p = map(cc[15], 0, 1, 0, 1);
      //float amt = map(cc[16], 0, 1, 1, 50);
      //float  h = map(cc[48], 0, 1, 0, 0.1);
      // //float  h = map(cc[14], 0, 1, 0, 0.5);


      shader.set("u_time", random(10));

      //shader1.set("u_time", angle);
      //shader2.set("u_time", angle);

      //shader.set("var2", p);
      //shader.set("amt", amt);

      //shader1.set("var2", p);
      //shader2.set("var2", p);


      if (fileShader.lastModified() != timeModi) {
        openShader(fileShader);
      }
    }
  }


  void newShader(String _srcc) {
    src = _srcc;
    fileShader = new File(src);
    reload = true;
    openShader(fileShader);
  }

  void openShader(File file) {
    if (file != null) {
      fileShader = file;
      timeModi = fileShader.lastModified();  
      try {
        shader = loadShader(file.getAbsolutePath(), ss.fileShader.getAbsolutePath());

        buffers[0].shader(shader);


        println(file.getAbsolutePath());
        error = false;
        loaded = true;
      }
      catch (RuntimeException e) {
        if (error == false) {
          error = true;
          // String time = nf(str(hour()),2) + ":" + nf(str(minute()),2) + ":" + nf(str(second()),2);
          println("\n");
          // println("At", time, "loadShader() returned the following error: \n");
          println("loadShader() returned the following error: \n");
          e.printStackTrace();
        }
        loaded = false;
      }
    }
  }
}

public class ShaderWindow extends PApplet {

  ShaderWindow() {
    super();
    PApplet.runSketch(new String[] {this.getClass().getSimpleName()}, this);
  }

  boolean mover;

  void settings() {
    size(600, 800, P2D);
  }

  void setup() {
    this.frameRate(30);
  }


  void draw() {

    background(25);


    for (int i = 0; i < vs.size(); i++) {
      ViewShader sss = vs.get(i);
      selector(i*100, 16, 100, width-16, sss, sss.loadshader, this);
    }

    ViewShaderVertex s = ss;  
    selector2(400, 16, 100, width-16, s, ss.loadshader, this);

  }

  void selector(float xx, float yy, float ww, float hh, ViewShader vs, LoadShader loadshader, PApplet p) {
    p.fill(150);
    p.noStroke();
    p.rectMode(CORNER);

    int cant = loadshader.shadersNames.length;
    p.rect(xx, yy+cant*16, ww, hh-cant*16);
    for (int i = 0; i < cant; i++) {
      boolean sobre = false;
      if (p.mouseX >= xx && p.mouseX < xx+ww && p.mouseY >= yy+i*16 && p.mouseY < yy+(i+1)*16) {
        sobre = true;
      }
      if (sobre) {
        p.fill(125);
      } else {
        p.fill(100, 50);
      }
      boolean selec = vs.src.equals(loadshader.shadersPaths[i]);
      if (p.mousePressed && sobre && !selec) {
        vs.newShader(loadshader.shadersPaths[i]);
      }

      if (selec) {
        p.fill(100);
        if (vs.error) {
          p.fill(200, 10, 10);
        }
      }

      p.rect(xx, yy+i*16, ww, 16);
      p.textAlign(LEFT, TOP);
      p.fill(250);
      if (i < loadshader.shadersNames.length && !load)
        text(loadshader.shadersNames[i], xx+5, yy+i*16);
    }
  }

  void selector2(float xx, float yy, float ww, float hh, ViewShaderVertex vs, LoadShader loadshader, PApplet p) {
    p.fill(150);
    p.noStroke();
    p.rectMode(CORNER);

    int cant = loadshader.shadersNames.length;
    p.rect(xx, yy+cant*16, ww, hh-cant*16);
    for (int i = 0; i < cant; i++) {
      boolean sobre = false;
      if (p.mouseX >= xx && p.mouseX < xx+ww && p.mouseY >= yy+i*16 && p.mouseY < yy+(i+1)*16) {
        sobre = true;
      }
      if (sobre) {
        p.fill(125);
      } else {
        p.fill(100, 50);
      }
      boolean selec = ss.src.equals(loadshader.shadersPaths[i]);
      if (p.mousePressed && sobre && !selec) {
        vs.newShader(loadshader.shadersPaths[i]);
      }

      if (selec) {
        p.fill(100);
        if (vs.error) {
          p.fill(200, 10, 10);
        }
      }

      p.rect(xx, yy+i*16, ww, 16);
      p.textAlign(LEFT, TOP);
      p.fill(250);
      if (i < loadshader.shadersNames.length && !load)
        p.text(loadshader.shadersNames[i], xx+5, yy+i*16);
    }
  }
}

class ViewShaderVertex {

  boolean reload, error, loaded;
  File fileShader;
  long timeModi;
  String src;
  String src2;

  PShader shader;

  float a;
  LoadShader loadshader;
  ViewShader ss;

  ViewShaderVertex(String _src, LoadShader _loadshader, PGraphics b) {

    src = _src;
    fileShader = new File(src);
    openShader(fileShader);

    loadshader = _loadshader;
  }



  void update() {
    if (reload) {      
      openShader(fileShader);
      reload = false;
    }
    if (shader != null) {

      if (fileShader.lastModified() != timeModi) {
        openShader(fileShader);

      }
    }
  }


  void newShader(String src) {
    this.src = src;
    fileShader = new File(src);
    reload = true;
    openShader(fileShader);
  }

  void openShader(File file) {

    if (file != null) {
      fileShader = file;
      timeModi = fileShader.lastModified();

      try {
                for (ViewShader s : vs) {
          s.update();
        }
        //shader = loadShader("test.glsl", file.getAbsolutePath());
        shader.setVertexShader(file.getAbsolutePath());
        buffers[0].shader(shader);

        println(file.getAbsolutePath());
        error = false;
        loaded = true;
      }
      catch (RuntimeException e) {
        if (error == false) {
          error = true;
          // String time = nf(str(hour()),2) + ":" + nf(str(minute()),2) + ":" + nf(str(second()),2);
          println("\n");
          // println("At", time, "loadShader() returned the following error: \n");
          println("loadShader() returned the following error: \n");
          e.printStackTrace();
        }
        loaded = false;
      }
    }
  }
}

As some of you may already know I'm trying to make a Depth of Field effect in Python mode. I've recently stumbled onto this thread where I could get hold of a Proscene DOF demo sketch based on the following shaders:

depth.glsl

uniform float maxDepth;

void main() {
  float depth = gl_FragCoord.z / gl_FragCoord.w;
  gl_FragColor = vec4(vec3(1.0 - depth/maxDepth), 1.0);
}

dof.glsl

uniform sampler2D texture;

varying vec4 vertexture;
varying vec4 vertTexCoord;

uniform sampler2D tDepth;

uniform float maxBlur; // max blur amount
uniform float aperture; // aperture - bigger values for shallower depth of field

uniform float focus;
uniform float aspect;

void main() {
    vec2 vUv = vertTexCoord.st;

    vec2 aspectcorrect = vec2( 1.0, aspect );

    vec4 depth1 = texture2D( tDepth, vUv );

    float factor = depth1.x - focus;

    vec2 dofblur = vec2 ( clamp( factor * aperture, -maxBlur, maxBlur ) );

    vec2 dofblur9 = dofblur * 0.9;
    vec2 dofblur7 = dofblur * 0.7;
    vec2 dofblur4 = dofblur * 0.4;

    vec4 col = vec4( 0.0 );

    col += texture2D( texture, vUv.xy );
    col += texture2D( texture, vUv.xy + ( vec2( 0.0, 0.4 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( 0.15, 0.37 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( 0.29, 0.29 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( -0.37, 0.15 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( 0.40, 0.0 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( 0.37, -0.15 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( -0.15, 0.37 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( -0.29, 0.29 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( 0.37, 0.15 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( 0.15, -0.37 ) * aspectcorrect ) * dofblur );

    col += texture2D( texture, vUv.xy + ( vec2( 0.15, 0.37 ) * aspectcorrect ) * dofblur9 );
    col += texture2D( texture, vUv.xy + ( vec2( -0.37, 0.15 ) * aspectcorrect ) * dofblur9 );
    col += texture2D( texture, vUv.xy + ( vec2( 0.37, -0.15 ) * aspectcorrect ) * dofblur9 );
    col += texture2D( texture, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur9 );
    col += texture2D( texture, vUv.xy + ( vec2( -0.15, 0.37 ) * aspectcorrect ) * dofblur9 );
    col += texture2D( texture, vUv.xy + ( vec2( 0.37, 0.15 ) * aspectcorrect ) * dofblur9 );
    col += texture2D( texture, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur9 );
    col += texture2D( texture, vUv.xy + ( vec2( 0.15, -0.37 ) * aspectcorrect ) * dofblur9 );

    col += texture2D( texture, vUv.xy + ( vec2( 0.29, 0.29 ) * aspectcorrect ) * dofblur7 );
    col += texture2D( texture, vUv.xy + ( vec2( 0.40, 0.0 ) * aspectcorrect ) * dofblur7 );
    col += texture2D( texture, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur7 );
    col += texture2D( texture, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur7 );
    col += texture2D( texture, vUv.xy + ( vec2( -0.29, 0.29 ) * aspectcorrect ) * dofblur7 );
    col += texture2D( texture, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur7 );
    col += texture2D( texture, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur7 );
    col += texture2D( texture, vUv.xy + ( vec2( 0.0, 0.4 ) * aspectcorrect ) * dofblur7 );

    col += texture2D( texture, vUv.xy + ( vec2( 0.29, 0.29 ) * aspectcorrect ) * dofblur4 );
    col += texture2D( texture, vUv.xy + ( vec2( 0.4, 0.0 ) * aspectcorrect ) * dofblur4 );
    col += texture2D( texture, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur4 );
    col += texture2D( texture, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur4 );
    col += texture2D( texture, vUv.xy + ( vec2( -0.29, 0.29 ) * aspectcorrect ) * dofblur4 );
    col += texture2D( texture, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur4 );
    col += texture2D( texture, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur4 );
    col += texture2D( texture, vUv.xy + ( vec2( 0.0, 0.4 ) * aspectcorrect ) * dofblur4 );

    gl_FragColor = col / 41.0;
    gl_FragColor.a = 1.0;
}

What I'd like is to be able to use those shaders using the PeasyCam library instead of the Proscene dependency.

In the sketch below I'm testing the shaders on a point cloud. I’m drawing the points on the scene PGraphics and then passing it through 2 other PGraphics (canvas and buf). In theory it should work but I’m still stuck with the PeasyCam part at the very end of the script.

If I write:

• cam.getState().apply(canvas): I get a DoF effect BUT on a 2D canvas
• cam.getState().apply(scene) : I get a 3D canvas BUT without a DoF effect

Any help would be really appreciated.

add_library('peasycam')
liste = []

def setup():
    global depthShader, dofShader, cam, canvas, buf, scene
    size(900, 900, P3D)

    cam = PeasyCam(this, 900)
    cam.setMaximumDistance(width)

    for e in range(100):
        liste.append(PVector(random(width), random(height), random(width)))

    depthShader = loadShader("depth.glsl")
    dofShader = loadShader("dof.glsl")

    depthShader.set("maxDepth", cam.getDistance())
    dofShader.set("aspect", width / float(height))
    dofShader.set("maxBlur", 0.015)
    dofShader.set("aperture", 0.02)

    canvas = createGraphics(width, height, P3D)
    canvas.shader(depthShader)
    buf = createGraphics(width, height, P3D)
    buf.shader(dofShader)

    scene = createGraphics(width, height, P3D)

    frameRate(1000)

def draw():

    scene.beginDraw()
    scene.background(255)
    scene.stroke(0)
    scene.strokeWeight(10)
    for e in liste:
        scene.point(e.x-width/2, e.y-height/2, e.z-height/2)
    scene.endDraw()

    canvas.beginDraw()
    canvas.image(scene, 0, 0)
    canvas.endDraw()

    buf.beginDraw()
    dofShader.set("focus", map(mouseX, 0, width, -0.5, 1.5))
    dofShader.set("tDepth", canvas)
    buf.image(scene, 0, 0)
    buf.endDraw()

    cam.beginHUD()
    image(buf, 0, 0)
    cam.endHUD()

    cam.getState().apply(scene)

• apply a gaussian blur
• increase the contrast of the alpha channel only

The combination of the two creates a blob effect

The last step (increasing the alpha channel contrast) is usually done through a "color matrix filter".

A color matrix is composed of 5 columns (RGBA + offset) and 4 rows.

The values in the first four columns are multiplied with the source red, green, blue, and alpha values respectively. The fifth column value is added (offset).

In CSS, increasing the alpha channel contrast is as simple as calling a SVG filter and specifying the contrast value (here 18):

<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />

In Processing though, it seems to be a bit more complicated. I believe (I may be wrong) the only way to apply a color matrix filter is to create one in a shader. After a few tries I came up with these (very basic) vertex and fragment shaders for color rendering:

colorvert.glsl

uniform mat4 transform;
attribute vec4 position;
attribute vec4 color;
varying vec4 vertColor;

uniform vec4 o=vec4(0, 0, 0, -9); 
uniform lowp mat4 colorMatrix = mat4(1.0, 0.0, 0.0, 0.0, 
                                     0.0, 1.0, 0.0, 0.0, 
                                     0.0, 0.0, 1.0, 0.0, 
                                     0.0, 0.0, 0.0, 60.0);


void main() {
  gl_Position = transform * position; 
  vertColor = (color * colorMatrix) + o  ;
}

colorfrag.glsl

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

varying vec4 vertColor;

void main() {
  gl_FragColor = vertColor;
}

PROBLEM:

The color matrix is partially working: changing the RGB values do affect the colors but changing the alpha values don't !

When trying to combine the shader with a Gaussian filter, the drawn ellipse stays blurry even after I set the alpha channel contrast to 60 (like in the codepen example):

PShader colmat;

void setup() {
  size(200, 200, P2D);
  colmat = loadShader("colorfrag.glsl", "colorvert.glsl");
}

void draw() {
  background(100);
  shader(colmat);

  noStroke();
  fill(255, 30, 30);
  ellipse(width/2, height/2, 40, 40);
  filter(BLUR,6);
}

The same thing happens when I implement the color matrix within @cansik 's Gaussian blur shader (from the PostFX library). I can see the colors changing but not the alpha contrast:

blurFrag.glsl

/ Adapted from:
// <a href="http://callumhay.blogspot.com/2010/09/gaussian-blur-shader-glsl.html" target="_blank" rel="nofollow">http://callumhay.blogspot.com/2010/09/gaussian-blur-shader-glsl.html</a>;

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

#define PROCESSING_TEXTURE_SHADER


uniform sampler2D texture;

uniform vec4 o=vec4(0, 0, 0, 0); 
uniform lowp mat4 colorMatrix = mat4(1, 0.0, 0.0, 0.0, 
                                     0.0, 1, 0.0, 0.0, 
                                     0.0, 0.0, 1, 0.0, 
                                     0, 0.0, 0.0, 60.0); //Alpha contrast set to 60


varying vec2 center;

// The inverse of the texture dimensions along X and Y
uniform vec2 texOffset;

varying vec4 vertColor;
varying vec4 vertTexCoord;

uniform int blurSize;       
uniform int horizontalPass; // 0 or 1 to indicate vertical or horizontal pass
uniform float sigma;        // The sigma value for the gaussian function: higher value means more blur
                            // A good value for 9x9 is around 3 to 5
                            // A good value for 7x7 is around 2.5 to 4
                            // A good value for 5x5 is around 2 to 3.5
                            // ... play around with this based on what you need <span class="Emoticon Emoticon1"><span>:)</span></span>

const float pi = 3.14159265;

void main() {  
  float numBlurPixelsPerSide = float(blurSize / 2); 

  vec2 blurMultiplyVec = 0 < horizontalPass ? vec2(1.0, 0.0) : vec2(0.0, 1.0);

  // Incremental Gaussian Coefficent Calculation (See GPU Gems 3 pp. 877 - 889)
  vec3 incrementalGaussian;
  incrementalGaussian.x = 1.0 / (sqrt(2.0 * pi) * sigma);
  incrementalGaussian.y = exp(-0.5 / (sigma * sigma));
  incrementalGaussian.z = incrementalGaussian.y * incrementalGaussian.y;

  vec4 avgValue = vec4(0.0, 0.0, 0.0, 0.0);
  float coefficientSum = 0.0;

  // Take the central sample first...
  avgValue += texture2D(texture, vertTexCoord.st) * incrementalGaussian.x;
  coefficientSum += incrementalGaussian.x;
  incrementalGaussian.xy *= incrementalGaussian.yz;

  // Go through the remaining 8 vertical samples (4 on each side of the center)
  for (float i = 1.0; i <= numBlurPixelsPerSide; i++) { 
    avgValue += texture2D(texture, vertTexCoord.st - i * texOffset * 
                          blurMultiplyVec) * incrementalGaussian.x;         
    avgValue += texture2D(texture, vertTexCoord.st + i * texOffset * 
                          blurMultiplyVec) * incrementalGaussian.x;         
    coefficientSum += 2.0 * incrementalGaussian.x;
    incrementalGaussian.xy *= incrementalGaussian.yz;
  }
  gl_FragColor = (avgValue / coefficientSum )  * colorMatrix;
}

Questions:

• Why does the alpha channel contrast not work ? How can I "enable" it ?
• Is it possible to enable it in the blurFrag shader posted above ?
• Do you know a better way to implement that gooey effect ?

Any help would be much appreciated !

Thank you

PShader sh;
PShader sha;

PGraphics buffer;
PGraphics buffer2;



import com.hamoid.*;
import themidibus.*;
import peasy.*;
import peasy.org.apache.commons.math.*;
import peasy.org.apache.commons.math.*;

PeasyCam cam;
float count;

void settings () {

  fullScreen(P3D);
}

void setup(){

background(0);


  cam = new PeasyCam(this, 500);


  sh = loadShader("basicShaderFrag.glsl", "basicShader.glsl");
  sha = loadShader("frag2.glsl", "basicShader.glsl");

 buffer = createGraphics(width, height, P3D);
 buffer2 = createGraphics(width, height, P3D);

}

void draw(){

    background(0);
     // println(frameRate);
    count +=0.005;
    sh.set("u_time", count);

    buffer.beginDraw();
    render(buffer);
    buffer.endDraw();

    buffer2.beginDraw();
    buffer2.background(0);
    buffer2.shader(sh);
    buffer2.image(buffer,0, 0);
    buffer2.endDraw();


    cam.getState().apply(buffer2);    // here the question. the image show the shader but like it was a 2D screen. 
    cam.beginHUD();
    image(buffer2, 0,0);
    cam.endHUD();

}


void render(PGraphics a){

  a.background(0, 50);

  a.noStroke();
  s.run(); 
    a.sphere(200);
}

if i skip the buffer2 and apply the shader into buffer it works fine.

i was follow this post https://github.com/jdf/peasycam/issues/25 but it doest work for me.

what im doing wrong?

I feel foolish that I can't figure this out. I am literally copying the code example from the processing reference for blur.

https://processing.org/reference/PShader.html

And, I get this error in Processing 3 and 2).

"Cannot compile fragment shader: ERROR 0:9 '<' : syntax error"

I must be missing something simple yes? :)

PShader blur;

void setup() {
  size(640, 360, P2D);
  // Shaders files must be in the "data" folder to load correctly
  blur = loadShader("blur.glsl"); 
  stroke(0, 102, 153);
  rectMode(CENTER);
}

void draw() {
  filter(blur);  
  rect(mouseX-75, mouseY, 150, 150); 
  ellipse(mouseX+75, mouseY, 150, 150);
}

Is there a way to make openGL render the sketch, or any other simple "trick" to improve performance?

I´ve accoplish to create a mask that works pretty well on the raspberry using shaders thought the problem that im having is that the RGB and Depth textures are not aligned. I´ve heard that this is something that happends with the kinect 1414 and not with the kinect 1417, thought i´ve only got the 1414 model , so i have to make it work in here.

This is a reference pic of how the mask is working:

The thing in the background is the video, look how wrong the mask is.

Im testing it on windows, so im using kinect4win library, and i know kinect4win has the kinect.getMask() function that works perfectly but i need to run on the raspberry so that function is useless and so i have to make my own. Here is my code using kinect4win than then im going to translated openKinect :

PROCESSING :

import processing.video.*;
import kinect4WinSDK.Kinect;

import processing.video.*;

Movie movie;

Kinect kinect;


PGraphics canvas;
PShader shader;

// brightness threshold
float minBrightness = 0.8;


//Values tested on  kinect4windows
float scale = 0.9099997;
float xoffset = 0.08226191;
float yoffset = 0.08226191;

//values tested on openKinect for raspberry pi
/*float scale = 1.0799996;
float xoffset = -0.007174231;
float yoffset = -0.07838542;*/

void setup()
{
  fullScreen(P2D);
  //size(640, 480, P2D);
  frameRate(60);

  kinect = new Kinect(this);
  // load shader and set threshold
  shader = loadShader("mask.glsl");

  // Load and play the video in a loop
 /* movie = new Movie(this, "transit.mov");
  movie.loop();*/

  shader.set("xoffset", xoffset);
  shader.set("yoffset", yoffset);
  shader.set("scale", scale);
}

void draw()
{
  // reset screen
  background(0, 0);
  // visualise result
  shader.set("umbral", minBrightness);

  //0.05 PUEDE IR EH
  float xoffset = map(mouseX, 0, width, -0.1, 0.1);
  float yoffset = map(mouseY, 0, height, -0.1, 0.1);



  println("X Offset : ", xoffset);
  println("Y Offset : ", yoffset);


  fill(255, 0, 0);
  ellipse(mouseX, mouseY, 20, 20);

  /*fill(0);
  image(movie, 0, 0, width, height);
  fill(255);
  */

  shader.set("texture", kinect.GetDepth());
  shader.set("texture2", kinect.GetImage());

  shader(shader);
  image(kinect.GetDepth(), 0, 0, width, height);
  resetShader();

  fill(0, 255, 0);

  float sep = 20;
  text("FPS: " + frameRate, 10, height-sep);
  text("xoffset :" + xoffset, 10, height-sep*2);
  text("yoffset :" + xoffset, 10, height-sep*3);
  text("scale :" + scale, 10, height-sep*4);
}

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

void keyPressed() {

  if (key == '+') {

    minBrightness +=0.1;
  }
  if (key == '-') {

    minBrightness -=0.1;
  }

  if(key == 'a'){

   scale +=0.02; 
  }
  if(key == 's'){
   scale -= 0.02; 
  }
}

This is my GLSL CODE :

     /*#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif
*/
uniform sampler2D texture; //LA DEPTH

uniform sampler2D texture2; // LA RGB

varying vec4 vertColor;
varying vec4 vertTexCoord;

uniform float umbral;
uniform float xoffset;
uniform float yoffset;
uniform float scale;

void main() {
    vec3 luminanceVector = vec3(0.2125, 0.7154, 0.0721);
    vec4 c = texture2D(texture, vertTexCoord.st) * vertColor;


    //CORRECT DEPTH RGB ALIGMENT : 

    vec4 c2 =  texture2D(texture2, (vertTexCoord.st+vec2(xoffset,yoffset))*scale) * vertColor;

    float luminance = dot(luminanceVector, c.xyz);
    luminance = max(0.0, luminance - umbral);


    c.r = c2.r;
    c.g = c2.g;
    c.b = c2.b;
    c.a = sign(luminance);

    gl_FragColor = vec4(c.rgb,c.a);
}

Im posting this on shaders category cause all that i need to do is translate the depth mask to be align to the RGB, but im not very good using shaders. so my question is . How to translate depth mask to align to rgb texture?

UPDATE : i´ve managed to set a Xoffset and Yoffset for aligning the textures, yet it doesn´t seem to be only a problem of aligment but also a problem of scale, like the depth image is a bit larger. Maybe some OpenCV algorithm for improving it?

UPDATE2: i´ve managed to set a SCALE, better, but still inacurate, i don´t know how to solve this now.

UPDATE3: SOLVE IT ! the scale was not really add it, now the code is fully functional

now i am editing part of the code to make it compile by processing.

It actually compile but it doesn't work

processing code:

PShader glitch;
PImage img, glitchImg;

void setup() {
  size(540, 540, P3D);
  img=loadImage("pietroGogh.jpg");
  glitchImg=loadImage("glitch.jpg");
  glitch = loadShader("glitch2.glsl");
  stroke(255);
  background(0);
  glitch.set("iResolution", new PVector(800., 600., 0.0) );
}

void draw() {
  strokeWeight(1);
  //glitch.set("iGlobalTime", random(0, 60.0));
  glitch.set("iTime", millis());
  if (random(0.0, 1.0) < 0.4) {
    shader(glitch);
  }
  image(img, 0, 0);
}

glsl code:

uniform sampler2D texture;
uniform vec2 iResolution;
uniform float iTime;
//varying vec4 vertTexCoord;


float rand () {
    return fract(sin(iTime)*1e4);
}

void main()
{
    vec2 uv = gl_FragCoord.xy / iResolution.xy;

    vec2 uvR = uv;
    vec2 uvB = uv;

    uvR.x = uv.x * 1.0 - rand() * 0.02 * 0.8;
    uvB.y = uv.y * 1.0 + rand() * 0.02 * 0.8;

    // 
    if(uv.y < rand() && uv.y > rand() -0.1 && sin(iTime) < 0.0)
    {
        uv.x = (uv + 0.02 * rand()).x;
    }

    vec4 c;
    c.r = texture(texture, uvR).r;
    c.g = texture(texture, uv).g;
    c.b = texture(texture, uvB).b;


    float scanline = sin( uv.y * 800.0 * rand())/30.0; 
    c *= 1.0 - scanline; 

    //vignette
    float vegDist = length(( 0.5 , 0.5 ) - uv);
    c *= 1.0 - vegDist * 0.6;

    gl_FragColor = c;
}

does anyone have any idea why this happens? sorry if there are trivial mistakes, but i'm quite new to shader language thank you all!!

link project in problem version

So any idea are very very welcome !

shader frag

/**
ROPE - Romanesco processing environment – 
* Copyleft (c) 2014-2017 
* Stan le Punk > http://stanlepunk.xyz/

Shader to warp texture

Render fluid
v 0.0.2
*/
#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

#define PROCESSING_TEXTURE_SHADER

#define PI 3.1415926535897932384626433832795

varying vec4 vertTexCoord;
uniform sampler2D texture;

uniform int mode;
uniform float roof_component_colour;

uniform sampler2D vel_texture;
uniform sampler2D dir_texture;
uniform vec2 grid_wh;

float map(float value, float start1, float stop1, float start2, float stop2) {
  float result = start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
  return result;
}  
vec2 cartesian_coord(float angle) {
  float x = cos(angle);
  float y = sin(angle);
  return vec2(x,y);
}

void main() {

  vec2 ratio = gl_FragCoord.xy / grid_wh;
  // vec2 ratio = vertTexCoord.st / grid_wh;

  vec4 vel = texture2D(vel_texture, ratio);
  vec4 dir = texture2D(dir_texture, ratio);


  // rendering picture ;
  if(mode == 0 ) {

    float angle_rad = map(dir.x, 0, roof_component_colour, -PI, PI);
    vec2 dir_cart = cartesian_coord(angle_rad) ;

    // float gap = max(grid_wh.x, grid_wh.y);
    // vec2 translate_pix = dir_cart.xy *vel.x / gap;
    vec2 translate_pix = dir_cart.xy *vel.x ;

    vec2 coord_dest = vertTexCoord.st +translate_pix ;
    vec4 tex_colour = texture2D(texture, coord_dest);

    gl_FragColor = tex_colour;
  }
  // velocity
  if(mode == 1 ) {
    gl_FragColor = texture2D(vel_texture, vertTexCoord.st);;
  }
  // direction force field
  if(mode == 2) {
    gl_FragColor = texture2D(dir_texture, vertTexCoord.st);;
  }

}

Processing

PImage tex_velocity, tex_direction ;
PShader warping;
PImage img ;
int grid_w, grid_h ;
void setup() {
  size(600,375,P2D);
  img = loadImage("pirate_small.jpg");
  grid_w = 60 ;
  grid_h = 37 ;
  tex_velocity = createImage(grid_w,grid_h,RGB);
  tex_direction = createImage(grid_w,grid_h,RGB);  
  warping = loadShader("shader/warp/rope_warp_fluid.glsl");
  noise_img(tex_velocity, 20, .1, .1); // max translate for the pixel
    noise_img(tex_direction, 360, .1, .1); // degree direction
}

void draw() {
    if(frameCount%60 == 0) {
        noise_img(tex_velocity, 20, .1, .1); // max translate for the pixel
        noise_img(tex_direction, 360, .1, .1); // degree direction
    }

    warping.set("mode", 0) ;
    warping.set("texture",img);
    warping.set("roof_component_colour",g.colorModeX);
    warping.set("grid_wh",grid_w,grid_h);

  warping.set("vel_texture",tex_velocity);
  warping.set("dir_texture",tex_direction);
  shader(warping);

  image(img,0,0);
  resetShader();
  image(tex_velocity,5,5);
  image(tex_direction,grid_w +15 ,5 );
}


float x_offset, y_offset ;
void noise_img(PImage dst, int max, float ratio_x, float ratio_y) {
    noiseSeed((int)random(10000));
    for(int x = 0 ; x < dst.width ; x++) {
        x_offset += ratio_x ;
        for(int y = 0 ; y < dst.height ; y++) {
            y_offset += ratio_y ;
            float v = map(noise(x_offset,y_offset),0,1,0,max);
            v = (int)map(v,0,max,0,g.colorModeX);
            int c = color(v,v,v,g.colorModeA) ;
            dst.set(x,y,c);
        }
    }
}

Seeing how efficient shaders are at applying an effect to video frames, is there a way to convert any shader from Shadertoy to work in processing?

Thanks, Charles

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 resolution;
uniform sampler2D ppixels;

uniform float DA;
uniform float DB;
uniform float feed;
uniform float kill;
uniform float dt;

void main (void) {
    vec2 position = ( gl_FragCoord.xy / resolution.xy );
    vec2 pixel = 1./resolution;

    float A = texture2D(ppixels, position).r;

    float sumA = -A;

    sumA += 0.05*texture2D(ppixels, position + pixel * vec2(-1., -1.)).r;
    sumA += 0.05*texture2D(ppixels, position + pixel * vec2(-1., 1.)).r;
    sumA += 0.05*texture2D(ppixels, position + pixel * vec2(1., -1.)).r;
    sumA += 0.05*texture2D(ppixels, position + pixel * vec2(1., 1.)).r;
    sumA += 0.2*texture2D(ppixels, position + pixel * vec2(1., 0.)).r;
    sumA += 0.2*texture2D(ppixels, position + pixel * vec2(-1., 0.)).r;
    sumA += 0.2*texture2D(ppixels, position + pixel * vec2(0., -1.)).r;
    sumA += 0.2*texture2D(ppixels, position + pixel * vec2(0., 1.)).r;


    float B = texture2D(ppixels, position).g;
    float sumB = -B;
    sumB += 0.05*texture2D(ppixels, position + pixel * vec2(-1., -1.)).g;
    sumB += 0.05*texture2D(ppixels, position + pixel * vec2(-1., 1.)).g;
    sumB += 0.05*texture2D(ppixels, position + pixel * vec2(1., -1.)).g;
    sumB += 0.05*texture2D(ppixels, position + pixel * vec2(1., 1.)).g;
    sumB += 0.2*texture2D(ppixels, position + pixel * vec2(1., 0.)).g;
    sumB += 0.2*texture2D(ppixels, position + pixel * vec2(-1., 0.)).g;
    sumB += 0.2*texture2D(ppixels, position + pixel * vec2(0., -1.)).g;
    sumB += 0.2*texture2D(ppixels, position + pixel * vec2(0., 1.)).g

    float nA = A + ((DA*sumA) - (A*B*B) + (feed*(1.0 - A)))*dt;
    float nB = B + ((DB*sumB) + (A*B*B) - ((kill + feed)*B))*dt;


    gl_FragColor = vec4(nA, nB, 0.0, 1.0);
}  

The code I use is this -

PShader algorithm;
PGraphics pg;

public static final float DA = 1;
public static final float DB = 0.5;
public static final float feed = 0.055;
public static final float kill = 0.062;
public static final float dt = 1;

void setup() {
  size(500, 500, P2D);

  algorithm = loadShader("algorithm.glsl");

  pg = createGraphics(width, height, P2D);
  pg.noSmooth();

  pg.beginDraw();
  pg.fill(255, 255, 0);
  pg.noStroke();
  pg.background(255, 0, 0);
  pg.rect(width/2 - 10, height/2 - 10, 20, 20);
  pg.endDraw();

  algorithm.set("resolution", float(pg.width), float(pg.height));
  algorithm.set("DA", DA);
  algorithm.set("DB", DB);
  algorithm.set("feed", feed);
  algorithm.set("kill", kill);
  algorithm.set("dt", dt);
}
void draw() {
  pg.beginDraw();
  //pg.background(0);
  pg.shader(algorithm);
  pg.rect(0, 0, pg.width, pg.height);
  pg.endDraw();  
  image(pg, 0, 0, width, height);
}

Below is my code, any help is appreciated!

import processing.video.*;

float joystick_yaw, joystick_speed;
Movie movie;
PShader shader;
float yaw, pitch, fov;
boolean isPaused = false;

void setup() {
  size(1280, 720, P2D);
  // pitch and yaw set to start video in desired view
  yaw   = 225;
  pitch = 5;
  fov   = 80;
  shader = loadShader("data/video360.glsl");
  shader.set("resolution", float(width/2), float(height/2));
  shader.set("yaw", yaw);
  shader.set("pitch", pitch);
  shader.set("fov", fov);
  movie = new Movie(this, "stitch_high.mp4");
  movie.play();
  movie.volume(0);
  while (movie.height == 0) {
    println("waiting " + second()); 
    delay(10);
  }

  imageMode(CORNERS);
}

void draw() {
  // display video  
  shader(shader);
  image(movie, 0, 0, width, height);

  // display yaw
  joystick_yaw = map(mouseX, 0, 1200, yaw-(fov/3), yaw+(fov/3)); 
  shader.set("yaw", joystick_yaw);

  //choose speed of video
  joystick_speed = map(mouseY, 0, height, 2, -2); 

  if (joystick_speed > 0.2 && isPaused ) {
    movie.speed(joystick_speed);
    movie.play();
    movie.speed(joystick_speed);
    isPaused = false;
  } else if (joystick_speed < -0.2 && isPaused) {
    movie.speed(joystick_speed);
    movie.play();
    movie.speed(joystick_speed);
    isPaused = false;
  } else if (joystick_speed >= -0.2 && joystick_speed <= 0.2) {
    if (!isPaused) {
      movie.pause();
      isPaused = true;
    }
  }
}

// Called every time a new frame is available to read
void movieEvent(Movie m) {
  m.read();
}

tileShader.set("time", millis() / 1000.0);

If I try to modify this so that the tile will move at a speed according to my mouse,

float t =millis() / 1000.0; 
float pctX = map (mouseX, 0, width, 0, 1);
tileShader.set("time", t*pctX);

the shader will do this 'scrubbing' effect where the entire image moves very quickly, but then once you stop moving the mouse, it will go at the speed you want. Is there any way to avoid this scrubbing effect? What I'm trying to accomplish are smooth increases in speed of the tile movement.

Back in Processing 2 I was able to do this with a pair of fragment shaders without trouble:

PShader shader1;
PShader shader2;

void setup() {
  size(256, 256, P2D);
  fill(128);
  noStroke();
  shader1 = loadShader("shader1.glsl");
  shader2 = loadShader("shader2.glsl");
}

void draw() {
  shader(shader1);
  shader(shader2);
  rect(0, 0, width, height);
}

Where shader1 is as follows:

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

uniform sampler2D textureSampler;

varying vec4 vertColor;
varying vec4 vertTexCoord;

void main()
{
    vec3 pos = vertTexCoord.xyz;

    gl_FragColor = vec4(pos.x, pos.y, pos.z, 1.0);
}

And shader2 is as follows:

#ifdef GL_ES
precision mediump float;
#endif

uniform sampler2D texture;

varying vec4 vertColor;
varying vec4 vertTexCoord;

void main () {
    gl_FragColor = texture2D(texture, vertTexCoord.xy);
}

No matter what I do in Processing 3, this always results in a black image when shader2 is applied, but works fine with just shader1. I have tried all sorts of things, including different OpenGL version directives, passing the resolution to shader2 and dividing the frag coord by it before sampling, and re-arranging the shader calls. I have tried both P2D and P3D mode.

In fact, many of the examples I have tried from the documentation fail to work at all in Processing 3.3.

Any idea what's going on? If it matters, I'm on a GTX 980 Ti with the latest drivers.

I've tried googling this but can't seem to find the right terms. I'm creating a solar system model and want to apply a blur/glow filter to the sun but to no other objects.

Thanks!

PShader blur;

void setup() {
  size(640, 360, P2D);
  blur = loadShader("blur.glsl"); 
  stroke(255, 0, 0);
  rectMode(CENTER);
}

void draw() {
  rect(mouseX, mouseY, 150, 150); 
  filter(blur);  
  ellipse(mouseX, mouseY, 100, 100);
}

I have tried combining them but of course it's not easy at it seem for a beginner like me, they either won't work at all or they don't work like the should.

This is not the only code that I am having trouble doing this with so I feel like I might be missing something. Any help with the code or just pointing me to the right direction would be greatly appreciated!

Code I want to stay in the back but still be interactive:

PShader sh;
String uid;

void setup() {
  PImage img = loadImage("test.jpg");

  size(img.width,img.height,P2D);
  background(0);

  // load and compile shader
  sh = loadShader("lens.glsl");
  // upload texture to graphics card
  sh.set("texture",img);
}

void draw() {
  // normalize mouse position
  float inpx = mouseX/(float)width;
  float inpy = mouseY/(float)height;

  // set shader variable
  sh.set("inp",inpx,inpy);

  // run shader
  shader(sh);

  // fill whole window
  rect(0,0,width,height);
}

And the text code:

import geomerative.*;
import ddf.minim.*;

Minim mySound; //CREATE A NEW SOUND OBJECT
AudioInput in;

RFont font;
String myText = "TEST";

void setup() {
  size(1500, 400);
  background(255);
  smooth();
  RG.init(this); 
  font = new RFont("FreeSans.ttf", 100, CENTER);

  mySound = new Minim(this);
  in = mySound.getLineIn(Minim.STEREO,512);
}

void draw() {
  background(255);
  strokeWeight(2);
  stroke(255, 0, 0);
  noFill();
  translate(width/2, height/1.5);

  float soundLevel = in.mix.level(); //GET OUR AUDIO IN LEVEL

  RCommand.setSegmentLength(soundLevel*9000);
  RCommand.setSegmentator(RCommand.UNIFORMLENGTH);

  RGroup myGoup = font.toGroup(myText); 
  RPoint[] myPoints = myGoup.getPoints();

  beginShape(QUAD_STRIP);
  for (int i=0; i<myPoints.length; i++) {

    vertex(myPoints[i].x, myPoints[i].y);
  }
  endShape();
}

Was hoping anybody here could help me with this... For a project I want to pack data into a texture and use it in a fragment shader because it can potentially be a lot of data. Thing is... I need the data as floats in my shader code but I can't seem to get it right.

I wrote a little test case below which illustrates my problem. The goal of this sketch is to make the left half of the screen white and the right half of the screen black. That would be the case if the data passed via the texture would be interpreted correctly.

Tried a lot of methods to pack/unpack data, but I'm thinking I got it wrong on the processing side of things. I also noticed that when using println(pixels[0]), the value that gets printed is NOT the same as Float.floatToIntBits gives... so something get's changed.

Anyway, if anybody knows the correct way of passing float values to a shader via a texture and unpacking them from vec4 to float I would be really grateful. Thanks!

Processing sketch:

PShader shader;
PImage sampler;

void setup() {
  size(1280, 720, P2D);

  shader = loadShader("shader.glsl"); 
  shader.set("resolution",1280,720);

  // no texture interpolation
  ((PGraphicsOpenGL)g).textureSampling(3);

  sampler = createImage(2,1,ARGB);   
  sampler.loadPixels();
  sampler.pixels[0]=Float.floatToIntBits(5); // left half of screen < 1
  sampler.pixels[1]=Float.floatToIntBits(15); // right half of screen > 10
  sampler.updatePixels();

  shader.set("sampler",sampler);
}

void draw() {
  filter(shader);
}

Shader code:

                uniform sampler2D sampler;
                uniform vec2 resolution;

                const vec4 bitEnc = vec4(1.,255.,65025.,16581375.);
                const vec4 bitDec = 1./bitEnc;

                float DecodeFloatRGBA (vec4 v) {
                    return dot(v, bitDec);
                }

                void main(){
                  vec4 test = texture2D(sampler,gl_FragCoord.xy/resolution);
                  float testfloat = DecodeFloatRGBA(test);

                  if (testfloat<10){
                    gl_FragColor=vec4(0,0,0,1);
                  }
                  else{
                    gl_FragColor=vec4(1,1,1,1);
                  }
                }

The code is essentially made up of a nebula portion and stars portion. I have questions on the nebula portion and so have commented out the stars portion.

I'm only looking at just one of the nebula that is created (there are actually two in the original example). I stopped the rotation and have been adjusting some of the parameters. I'm trying to find out what is it that seems to be making the nebula zoom in and out. I don't want it to do that. However, I am having trouble pinpointing what is it that is making this zoom effect. Any help would be appreciated.

//Utility functions

vec3 fade(vec3 t) {
  return vec3(1.0,1.0,1.0);//t*t*t*(t*(t*6.0-15.0)+10.0);
}

vec2 rotate(vec2 point, float rads) {
    float cs = cos(rads);
    float sn = sin(rads);
    return point * mat2(cs, -sn, sn, cs);
}   

vec4 randomizer4(const vec4 x)
{
    vec4 z = mod(x, vec4(5612.0));
    z = mod(z, vec4(3.1415927 * 2.0));
    return(fract(cos(z) * vec4(56812.5453)));
}

// Fast computed noise
// http://www.gamedev.net/topic/502913-fast-computed-noise/

const float A = 1.0;
const float B = 57.0;
const float C = 113.0;
const vec3 ABC = vec3(A, B, C);
const vec4 A3 = vec4(0, B, C, C+B);
const vec4 A4 = vec4(A, A+B, C+A, C+A+B);

float cnoise4(const in vec3 xx)
{
    vec3 x = mod(xx + 32768.0, 65536.0);
    vec3 ix =   floor(x);
    vec3 fx = fract(x); // returns fractional part of x.  
    //vec3 wx = vec3(0,0,0);
    //vec3 wx = vec3(0.0,-1.,1.0);
    //vec3 wx = fx; wx.y=0;

    vec3 wx = fx*fx*(3.0-2.0*fx);
    //vec3 wx = fx*fx*fx;
    //wx.x=0.0;
    float nn = dot(ix, ABC);

    vec4 N1 = nn + A3;
    vec4 N2 =  nn + A4;
    vec4 R1 = randomizer4(N1);
    vec4 R2 = randomizer4(N2);
    vec4 R = mix(R1, R2, wx.x);
    float re = mix(mix(R.x, R.y, wx.y), mix(R.z, R.w, wx.y), wx.z);

    return 1.0 - 2.0 * re;
}
float surface3 ( vec3 coord, float frequency ) {

    float n = 0.0;  

    n += 1.0    * abs( cnoise4( coord * frequency ) );
    n += 0.5    * abs( cnoise4( coord * frequency * 2.0 ) );
    n += 0.25   * abs( cnoise4( coord * frequency * 4.0 ) );
    n += 0.125  * abs( cnoise4( coord * frequency * 8.0 ) );
    n += 0.0625 * abs( cnoise4( coord * frequency * 16.0 ) );

    return n;
}

void main( void ) {
    float rads = radians(time*3.15);
    vec2 position = gl_FragCoord.xy / resolution.xy;
    //position += rotate(position, rads); // rotates everything slowly.  

    //float n = surface3(vec3(position*sin(time*0.1), time * 0.05)*mat3(1,0,0,0,.8,.6,0,-.6,.8),2.0); //.9  //layer one
    //float n = surface3(vec3(position*sin(time*0.1), time * 0.05) ,2.0); //.9  //layer one

    float n2 = surface3(vec3(position*cos(time*0.1), time * 0.04)*mat3(1,0,0,0,.8,.6,0,-.6,.8),6.0); // .8 // layer two
    //vec2 test = position*cos(time*0.1);
    //float n2 = surface3(vec3(test, time * 0.04) ,6.0); // .8 // layer two
    //float n2 = surface3(vec3(position*cos(time*0.1), 0) ,6); // .8 // layer two . z not affected

    //float n2 = test.x;

    //float lum = length(n);
    float lum2 =  length(n2); //length of a scalar float is abs value.

    //vec3 tc = pow(vec3(1.0-lum),vec3(sin(position.x)+cos(time)+4.0,8.0+sin(time)+4.0,8.0)); // layer one 
    vec3 tc2 = pow(vec3(1.1-lum2),vec3(5.0,position.y+cos(time)+7.0,sin(position.x)+sin(time)+2.0)); // layer 2
    //vec3 tc2 = pow(vec3(1.1-lum2,1.1-lum2,1.1-lum2),vec3(5.0,position.y+cos(time)+7.0,sin(position.x)+sin(time)+2.0)); // layer 2
    //vec3 tc2 = pow(vec3(1.1-lum2,1.1-lum2,1.1-lum2),vec3(5.0,7, 2.0)); // layer 2

    vec3 curr_color = /*(tc*0.8) */+ (tc2*0.5);
    //curr_color.z=0;
    curr_color =vec3(lum2, lum2, lum2); //makes black n white
    ///////////////////////////////////////////////end nebula...//////////////////////////////
    //Let's draw some stars

    float scale = sin(0.3 * time) + 20.0;
    vec2 position2 = (((gl_FragCoord.xy / resolution) - 0.5) * scale);
    float gradient = 0.0;
    //vec3 color = vec3(100.0); // not used
    //float fade = 0.0; // this fade is not used.  
    float z = 0.0;
    vec2 centered_coord = position2;// - vec2(sin(time*0.1),sin(time*0.1)); //what does this do?
    //vec2 centered_coord = position2 - vec2(sin(time*0.4),sin(time*0.4));  // it makes you move along x y plane back n forth.
    //centered_coord = rotate(centered_coord, rads); // rotates about z.  

    for (float i=1.0; i<=100.0; i++)
    {
        //vec2 star_pos = vec2(sin(i) * 250.0, sin(i*i*i) * 250.0);
        vec2 star_pos = vec2(sin(i) * 1000.0, sin(i*i*i) * 1000.0);

        //vec2 star_pos = vec2(sin(i) * 250.0, sin(i*i*i) * 1000.0);
        //vec2 star_pos = vec2( sin(i)*250.0, i  );
        //float z = mod(i*i - 50.0*time, 256.0); // x *time is speed.
        //float z = mod(i - 50.0*time, 256.0); // i is ?? but if not there..it will  .  
        //float z = mod(i*i*i*i*i - 10.0*time, 256.0); // i is ?? but if not there..it will  .  
        //float z = mod(i- 10.0*time, 1024.0); // i is ?? but if not there..it will  .  
        float z = mod(i*i- 10.0*time, 256.0); // lava lamp also happens here..  

        float fade = (256.0 - z) /256.0;
        //float fade = (1024.0 - z) /256.0; // cool effect almost lava lamp 
        vec2 blob_coord = star_pos / z;
        gradient += ((fade / 384.0) / pow(length(centered_coord - blob_coord), 1.5)) * ( fade);
    }

    //curr_color = vec3(0,0,0);// only does stars
    //curr_color += gradient; // if comment out, only does nebula

    gl_FragColor = vec4(curr_color, 1.0); // might be alpha
    //gl_FragColor = vec4(gradient, 1.0); // does not work
}

also providing the pde code

/**
 * Nebula. 
 * 
 * From CoffeeBreakStudios.com (CBS)
 * Ported from the webGL version in GLSL Sandbox:
 * http://glsl.heroku.com/e#3265.2
 */

PShader nebula;

void setup() {
  fullScreen( P2D);
  //size(500,500, P2D);
  noStroke();

  nebula = loadShader("nebula.glsl");
  nebula.set("resolution", float(width), float(height));
}

void draw() {
  nebula.set("time", millis() / 500.0);  
  shader(nebula); 
  // This kind of raymarching effects are entirely implemented in the
  // fragment shader, they only need a quad covering the entire view 
  // area so every pixel is pushed through the shader. 
  rect(0, 0, width, height);

  resetShader();
  text("fr: " + frameRate, width/2, 10);
}

Sample output from the sketch below

For a long time I have been meaning to investigate shaders with the idea of creating my own. Yesterday I took the plunge and started messing about with the examples that came with Processing. I decided that a good start would be a fisheye lens shader and here is my effort for you to play with.

You can also download the sketch in zip format

Sketch code

PImage img;
PShader shade;
int offsetX, offsetY;

public void setup() {
  size(520, 344, P2D);
  noCursor();
  img = loadImage("london.jpg");
  // The offsets are needed if the image size is 
  // different from the display size
  offsetX = (width - img.width)/2;
  offsetY = (height - img.height)/2;
  initShaders(img);
}

public void mouseMoved() {
  shade.set("lensPos", mouseX - offsetX, mouseY - offsetY);
}

public void draw() {
  background(128);
  shader(shade);
  drawOutput(offsetX, offsetY, img.width, img.height);
}

public void initShaders(PImage img) {
  shade = loadShader("fisheye.glsl");
  shade.set("image", img);
  shade.set("size", img.width, img.height);
  shade.set("lensSize", 80.0f);
  shade.set("lensPos", 200, 100);
}

public void drawOutput(float x, float y, float w, float h) {
  pushMatrix();
  translate(x, y);
  beginShape(QUAD);
  vertex(0, 0, 0, 0);
  vertex(0, h, 0, 1);
  vertex(w, h, 1, 1);
  vertex(w, 0, 1, 0);
  endShape();
  popMatrix();
}

Shader file: 'fisheye.glsl'
Use a text editor to create this file and put it in the sketch folder.

uniform sampler2D image;

// Image size in pixels
uniform ivec2 size;

// Lens position
uniform ivec2 lensPos;

// Lens size (radius in pixels)
uniform float lensSize;

varying vec4 vertTexCoord;

void main() {
    // Get current uv position
    vec2 st = vertTexCoord.st;  

    // get current pixel position
    vec2 pxl = size * st;

    // Get distance from lens centre
    float pxl2lens = distance(pxl, lensPos);

    // If outside lens use pixel
    if(pxl2lens > lensSize){
        gl_FragColor = texture2D(image, st).rgba; 
        return;
    }
    // We are inside the lens radius so calculate 
    // new uv coordinate

    // Get direction vector to pixel
    vec2 direction = pxl - lensPos;

    float factor = 0.4 + 0.9 * pxl2lens / lensSize;
    vec2 npxl = lensPos + direction * factor;
    vec2 nst = npxl / size;

    gl_FragColor = texture2D(image, nst).rgba;
}

PImage iceCream;
PImage waffleCone;

PShape cone;
PShape cream;

PShader texlightShader;
PShader shader2;
PShader toon;

float angle;
boolean button = false;
//boolean button2 = false;
//boolean button3 = false;


void setup() {
  size(800, 800, P3D);
  iceCream = loadImage("cream.jpg");
  waffleCone = loadImage("waffle.jpg");

  texlightShader = loadShader("texlightfrag.glsl", "texlightvert.glsl");
  shader2 = loadShader("lightfrag.glsl", "lightvert.glsl");

  toon = loadShader("frag.glsl", "vert.glsl");
  toon.set("fraction", 1.0);

  //noLoop();
    frameRate(30);
}

void draw() {
  background(0);
  lights();
  translate(width / 2, height / 1.5);

  ////cameras
    rotateY(angle);
    //rotateX(map(mouseX, 0, width, 0, PI));
    //rotateY(map(mouseX, 0, width, 0, PI));
    rotateZ(map(height, 0, height, 0, -PI));



  ////lights
    //pointLight(255, 255, 255, width/2, height, 600);  
    directionalLight(255,255,255, -1, 0, 0);

    //float dirY = (mouseY / float(height) - 0.5) * 2;
    //float dirX = (mouseX / float(width) - 0.5) * 2;
    //directionalLight(204, 204, 204, -dirX, -dirY, -3);


  noStroke();
  fill(0, 0, 255);
  translate(0, -40, 0);

  ///buttons to be implemented later
  //if(!button) {shader(toon);} else {resetShader();}
  //if (!button2){noStroke();}else { stroke(0);


  if(!button) {
  //shader(toon); not working must troubleshoot
  resetShader();
  drawCylinder_noTex(10, 75, 250, 16);} 

  else {
  shader(texlightShader);
  cone = drawCylinder(10, 75, 250, 16, waffleCone); }

  //cone = drawCylinder(10, 75, 250, 16, waffleCone); 
  //drawCylinder_noTex(10, 75, 250, 16);

 angle += 0.01;
}

PShape drawCylinder(float topRadius, float bottomRadius, float tall, int sides, PImage tex) {
  textureMode(NORMAL);
  PShape sh = createShape();


  sh.beginShape(QUAD_STRIP);
  //sh.noStroke();
  sh.texture(tex);

  for (int i = 0; i < sides + 1; ++i) {
    float angle = 0;
    float angleIncrement = TWO_PI / sides;

    sh.vertex(topRadius*cos(angle), 0, topRadius*sin(angle), 0);
    sh.vertex(bottomRadius*cos(angle), tall, bottomRadius*sin(angle), 100);
    angle += angleIncrement;
  }
  sh.endShape();
  return sh;  

/*
  pushMatrix();

    //ice cream
    translate(0,height/3);
    sphere(75);
  popMatrix();

*/
}

void drawCylinder_noTex(float topRadius, float bottomRadius, float tall, int sides) {
  textureMode(NORMAL);
  createShape();

  float angle = 0;
  float angleIncrement = TWO_PI / sides;
  beginShape(QUAD_STRIP);
  //sh.texture(tex);

  for (int i = 0; i < sides + 1; ++i) {
    vertex(topRadius*cos(angle), 0, topRadius*sin(angle));
    vertex(bottomRadius*cos(angle), tall, bottomRadius*sin(angle));
    angle += angleIncrement;
  }
  endShape();

/*
  pushMatrix();

    //ice cream
    translate(0,height/3);
    sphere(75);
  popMatrix();
  */
}

void keyPressed()
  {
    if (key == 'b' || key == 'B') {button = !button;}
    //if (key == 'n' || key == 'N') {button2 = !button2;}  //future implementation
    //if (key == 'm' || key == 'M') {button3 = !button3;} //future implementation  
  }

Processing Code:

PShader shader;

float a = 0.0;

void setup() {
  size(600, 600, P3D);
  noStroke();


  shader = loadShader("OBfrag1.glsl","OBver1.glsl");

  shader.set("BrickColor", 0.5, 0.1, 0.1);
  shader.set("MortarColor", 0.5, 0.5, 0.5);
  shader.set("BrickSize", 0.1, 0.1);
  shader.set("BrickPct", 0.9, 0.9);
}

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

  pointLight(255, 255, 255, width/2, height/2, 500);

  translate(width/2, height/2);
  rotateY(a);

  fill(255);
  sphere(200);

  a += 0.01;
}

Vertex Shader ( OBver1.glsl ):

#define PROCESSING_LIGHT_SHADER

uniform mat4 modelview;
uniform mat4 transform;
uniform mat3 normalMatrix;
uniform vec4 lightPosition;

const float SpecularContribution = 0.2;
const float DiffuseContribution = 1.0 - SpecularContribution;

attribute vec4 vertex;
attribute vec4 color;
attribute vec3 normal;

varying vec4 vertColor;
varying float LightIntensity;
varying vec2 MCposition;

void main() {
    vec3 ecPosition = vec3(modelview * vertex);
    vec3 tNorm = normalize(normalMatrix * normal);

    vec3 lightVec = normalize(lightPosition.xyz - ecPosition);
    vec3 reflectVec = reflect(-lightVec, tNorm);
    vec3 viewVec = normalize(-ecPosition);

    float diffuse = max(dot(lightVec, tNorm), 0.0);
    float spec = 0.0;

    if (diffuse > 0.0) {
        spec = max(dot(reflectVec, viewVec), 0.0);
        spec = pow(spec, 16.0);
    }

    LightIntensity = DiffuseContribution * diffuse +
                     SpecularContribution * spec;

    MCposition = tNorm.xy;
    vertColor = vec4(LightIntensity, LightIntensity, LightIntensity, 1) * color;
    gl_Position = transform * vertex;
}

Fragment Shader ( OBfrag1.glsl ):

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

uniform vec3 BrickColor, MortarColor;
uniform vec2 BrickSize;
uniform vec2 BrickPct;

varying vec4 vertColor;
varying float LightIntensity;
varying vec2 MCposition;


void main() {

    vec3 color;
    vec2 position, useBrick;
    position = MCposition / BrickSize;

    if (fract(position.y * 0.5) > 0.5) {
        position.x += 0.5;
    }

    position = fract(position);
    useBrick = step(position, BrickPct);

    color = mix(MortarColor, BrickColor, useBrick.x * useBrick.y);
    color *= LightIntensity;

    gl_FragColor = vec4(color, 1.0) * vertColor;
}

PShader shader;
PImage photo;

void setup() {
  size(619,619,P2D);
  photo = loadImage("paintedsky.jpg");
  shader = loadShader("inkspread_frag.glsl");
}

void draw() {
  shader.set("T",(float) millis()/1000.0);
  filter(shader);
  image(photo,mouseX,mouseY);
}

-----------------------------------------

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

#define PROCESSING_TEXTURE_SHADER

uniform sampler2D source;
varying vec4 vertColor;
varying vec4 vertTexCoord;

uniform float T;
const float diag = 1.414213562373095;

//layout(location=0) out vec4 result;

vec4 F(vec4 x0,vec4 x1,float dist){
    return (x1 - x0)/(T * dist);
}

void main(void) {
    vec2 ix  = vec2(vertTexCoord.xy);

    vec2 c11 = vertTexCoord.st + vec2( 0.0, 0.0);
    vec2 c01 = vertTexCoord.st + vec2(-1.0, 0.0);
    vec2 c21 = vertTexCoord.st + vec2( 1.0, 0.0);
    vec2 c10 = vertTexCoord.st + vec2( 0.0,-1.0);
    vec2 c12 = vertTexCoord.st + vec2( 0.0, 1.0);
    vec2 c00 = vertTexCoord.st + vec2(-1.0,-1.0);
    vec2 c02 = vertTexCoord.st + vec2(-1.0, 1.0);
    vec2 c20 = vertTexCoord.st + vec2( 1.0,-1.0);
    vec2 c22 = vertTexCoord.st + vec2( 1.0, 1.0);

    vec4 x11 = texture2D(source, c11);
    vec4 x01 = texture2D(source, c01);
    vec4 x21 = texture2D(source, c21);
    vec4 x10 = texture2D(source, c10);
    vec4 x12 = texture2D(source, c12);
    vec4 x00 = texture2D(source, c00);
    vec4 x02 = texture2D(source, c02);
    vec4 x20 = texture2D(source, c20);
    vec4 x22 = texture2D(source, c22);

    vec4 d01 = F(x11,x01,1.0);  
    vec4 d21 = F(x11,x21,1.0);  
    vec4 d10 = F(x11,x10,1.0);  
    vec4 d12 = F(x11,x12,1.0);  
    vec4 d00 = F(x11,x00,diag); 
    vec4 d02 = F(x11,x02,diag); 
    vec4 d20 = F(x11,x20,diag); 
    vec4 d22 = F(x11,x22,diag); 

    vec4 result = (x11 + d01+d21+d10+d12 + d00+d02+d20+d22);
    //gl_FragColor = vec4(result.rgb,1.0) * vertColor;
    gl_FragColor = vertColor;
}

my processing code looks like this

PShader pointShader;
int COUNT = 300;

float[] sourceX = new float[COUNT];
float[] sourceY = new float[COUNT];

void setup()
{
  size(600, 600, P3D);
  background(255);


}

void draw() {
 // background(0);
    for (int i = 0; i < COUNT; i++) {
    sourceX[i] = random(0, width);
    sourceY[i] = random(0, height);
  }

  pointShader = loadShader("point.glsl");
  pointShader.set("sourceX", sourceX);
  pointShader.set("sourceY", sourceY);
  shader(pointShader);
  rect(0, 0, width, height);
  //noLoop();


}

my shader:

#define PROCESSING_COLOR_SHADER

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

uniform float[300] sourceX;
uniform float[300] sourceY;

void main() {
    float intensity = 0.0;

    // sum the distances from the points
    for(int i = 0; i < 300; i++) {
        float d = distance(gl_FragCoord.xy, vec2(sourceX[i], sourceY[i]));
        intensity += exp(-0.05 * d * d);
    }

    // map the colours

        gl_FragColor = vec4(0.0, intensity * 1, 1.0, 1.0);

}

this works without a problem but as soon as I up the particle count to 1000 I get the error:

Where am I going wrong here? Is this not the right way to do this?

Ultimately my intention is to send the point cloud data from a Kinect2 to the shader. I have a working sketch for that (without the shader) but instead of sending the Kinect points into a class I would like to send it to a shader. I'm hoping I can have a much higher particle count that way.

Thank you for your help!

PShader blur;
PGraphics PG;

void setup(){
  size(500,500,P2D);
  blur = loadShader("blur.glsl");
  PG = createGraphics(width,height);
}

void draw(){
  background(50);

  PG.beginDraw();
  PG.noStroke();
  PG.fill(205);
  PG.rect(100,100,300,300);
  PG.filter(blur);
  PG.endDraw();
  image(PG,0,0);
}

(blur.glsl is a copy of the ShaderBlur example code)

Running the code returns the following error:

filter(), or this particular variation of it, is not available with this renderer.

It appears as though this functionality was once possible, per this thread: How to use a fragment shader on a PGraphics in Processing 2.0xx?

Is this because the shader can only be applied to the main output? Or is this just a limitation of the renderer I'm using? Any guidance is much appreciated.

the code below would build a 3D scene from kinect point cloud data and set all points to white. I just wanted to understand how I could set a matrix of colors dynamically for each point. (basically I just want points closer to kinect to be brighter)

I have tried to implement this, but I couldn't understand how to work with textures yet.

Thank you!

import java.nio.*;
import org.openkinect.freenect.*;
import org.openkinect.processing.*;

// Kinect Library object
Kinect kinect;

// Angle for rotation
float a = PI;

//openGL
PGL pgl;
PShader sh;

int  vertLoc;
int  vertLocId;
//int  colorLoc;

void setup() {
  // Rendering in P3D
  size(800, 600, P3D);
  kinect = new Kinect(this);
  kinect.initDepth();
  kinect.enableMirror(true); //added

  //load shaders
  sh = loadShader("frag.glsl", "vert.glsl");
  PGL pgl = beginPGL();

  IntBuffer intBuffer = IntBuffer.allocate(1);
  pgl.genBuffers(1, intBuffer);

  //memory location of the VBO
  vertLocId = intBuffer.get(0);

  endPGL();
}

void draw() {

  background(0);

 image(kinect.getDepthImage(), 0, 0, 320, 240); //why this is not mirrored ?

  pushMatrix();
  translate(width/2, height/2, 600);
  scale(150);
  rotateY(a);
  int vertData = kinect.width * kinect.height;
  FloatBuffer depthPositions =  kinect.getDephToWorldPositions();
  pgl = beginPGL();
  sh.bind();

  vertLoc  = pgl.getAttribLocation(sh.glProgram, "vertex");

  //color for ALL POINTS of the point cloud
  sh.set("fragColor", 1.0f, 1.0f, 1.0f, 1.0f); //<-----

  pgl.enableVertexAttribArray(vertLoc);

  pgl.bindBuffer(PGL.ARRAY_BUFFER, vertLocId);
  pgl.bufferData(PGL.ARRAY_BUFFER, Float.BYTES * vertData *3, depthPositions, PGL.DYNAMIC_DRAW);
  pgl.vertexAttribPointer(vertLoc, 3, PGL.FLOAT, false, Float.BYTES * 3, 0);

  pgl.bindBuffer(PGL.ARRAY_BUFFER, 0);

  //draw the XYZ depth camera points
  pgl.drawArrays(PGL.POINTS, 0, vertData);

  //clean up the vertex buffers
  pgl.disableVertexAttribArray(vertLoc);

  sh.unbind();
  endPGL();

  popMatrix();

  fill(255, 0, 0);
  text(frameRate, 50, 50);
}

frag.glsl:

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

#define PROCESSING_TEXTURE_SHADER //

varying vec4 vertColor;
//varying vec4 vertTexCoord;

//input color
uniform vec4 fragColor;
//uniform sampler2D texture; 

void main() {
  //vec4 col = texture2D(texture, vertTexCoord.st);
  //outputColor
  gl_FragColor = fragColor;
  //gl_FragColor = vec4(col.rgb, 1.0);
}

vert.glsl:

uniform mat4 transform;

attribute vec4 vertex;
attribute vec4 color;

varying vec4 vertColor;


void main() {
  gl_Position = transform * vertex;    
  vertColor = color;
}

My sketch is trying to emulate an image "shatter" - a bunch of different PShapes fly around, all with static UV coordinates referencing the same image. Imagine a stained glass window smashing - little bits of image everywhere.

I have things working, albeit slowly, and have been told I can improve my performance with shaders.

I've tried to create a simple working version before implementing into the full sketch. Just trying to draw one PShape with a texture.

Sketch

PShader myShader;
PShape myShape;
PImage myImage;

void setup(){
    size(200, 200, P3D);

    myImage = loadImage("Grug.jpg");
    myShader = loadShader("frag.glsl", "vert.glsl");
    myShape = createShape();

    myShape.beginShape();
    myShape.noFill();
    myShape.noStroke();
    myShape.vertex(20, 20, 20, 20);
    myShape.vertex(80, 20, 80, 20);
    myShape.vertex(80, 80, 80, 80);
    myShape.vertex(20, 80, 20, 80);
    myShape.endShape();
}

void draw(){
    background(150);
    myShader.set("myImage", myImage);
    shader(myShader);
    shape(myShape);
}

Vert shader

#define PROCESSING_TEXTURE_SHADER

uniform mat4 transform;
uniform mat4 texMatrix;

attribute vec4 vertex;
attribute vec4 color;
attribute vec2 texCoord;

varying vec4 vertColor;
varying vec4 vertTexCoord;

void main() {
  gl_Position = transform * vertex;

  vertColor = color;
  vertTexCoord = texMatrix * vec4(texCoord, 1.0, 1.0);
}

Frag shader

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

uniform sampler2D texture;
uniform sampler2D myImage;

varying vec4 vertColor;
varying vec4 vertTexCoord;

void main() {
    gl_FragColor = texture2D(myImage, vertTexCoord.st);
}

However, nothing displays. Note that I want to avoid calling myShape.texture(myImage) when defining the shape. This call does make things work, but on a large scale the framerate dives.

I'm pretty sure it's possible to have a few thousand verts flying about referencing the same texture - please correct me if I'm mistaken. What am I missing? Or is my approach a bit wonky?! Shaders have been a bit to wrap my head around.

Thanks in advance! (Mac OSX 10.11.5, Processing 3.1.1.)

#ifdef GL_ES
precision mediump float;
#endif

#extension GL_OES_standard_derivatives : enable

uniform vec2 mouse;
uniform float time;
uniform vec2 resolution;

float w = resolution.x/2.0;
float h = resolution.y/2.0;
float PI = 3.141592653589793;

void main( void ) {
    float move = w / 2.0;

    vec2 pos1 = vec2(w + move * ( sin(time)), h);
    vec2 pos2 = mouse * resolution;
    vec2 pos3 = vec2( w + move * ( sin(time)),h + move * ( cos(time)));

    float dist1 = length(gl_FragCoord.xy - pos1);
    float dist2 = length(gl_FragCoord.xy - pos2);
    float dist3 = length(gl_FragCoord.xy - pos3);


    // 円のサイズ
    float size = 25.0;

    // distがsize以下であれば累乗根で潰す。
    // この値が大きければsize以上離れている場所は0に近づくのでポワッとしなくなる
    float color = 0.0;
    color += pow(size / dist1, 5.0);
    color += pow(size / dist2, 2.0);
    color += pow(size / dist3, 2.0);

    gl_FragColor = vec4(vec3(color / 1.0, color / 1.0, color / 1.0), 1.0);
} 

my processing code looks like this:

PShader shader;

void setup() {
  size(640, 360,P3D);


  shader = loadShader("shader.glsl");
  shader.set("resolution", width, height);

}

void draw() {
  background(0);
  shader.set("mouse",mouseX,mouseY);
  shader(shader);

}

It runs the program without any errors but all I get is a black background. What am I doing wrong, am I missing something in the code?

Thank you!

sketch code:

PShader myShader;
PImage  myImage;

void setup() {
  size(640, 360, P2D);
  noStroke();
  myImage = loadImage("noise512.png");
  myShader = loadShader("noise_anim.glsl");
  myShader.set("resolution", float(width), float(height));

}

void draw() {
  background(0);
  myShader.set("time", millis() / 1000.0);

  shader(myShader);
  image( myImage, 0, 0, width, height ); // when using image or text maps

}

noise_anim.glsl code:

#ifdef GL_ES
precision highp float;
#endif

#define PROCESSING_TEXTURE_SHADER

uniform float time;
uniform vec2 resolution;
uniform vec2 mouse;
uniform sampler2D texture;


// Layer between Processing and Shadertoy uniforms
vec3 iResolution = vec3(resolution,0.0);
float iGlobalTime = time;
vec4 iMouse = vec4(mouse,0.0,0.0); // zw would normally be the click status

//Noise animation - Electric
//by nimitz (stormoid.com) (twitter: @stormoid)

//The domain is displaced by two fbm calls one for each axis.
//Turbulent fbm (aka ridged) is used for better effect.

#define time iGlobalTime*0.15
#define tau 6.2831853

mat2 makem2(in float theta){
    float c = cos(theta);
    float s = sin(theta);
    return mat2(c,-s,s,c);
    }
float noise( in vec2 x ){
    return texture2D(texture, x*.01).x;
    }

float fbm(in vec2 p)
{   
    float z=2.;
    float rz = 0.;
    vec2 bp = p;
    for (float i= 1.;i < 6.;i++)
    {
        rz+= abs((noise(p)-0.5)*2.)/z;
        z = z*2.;
        p = p*2.;
    }
    return rz;
}

float dualfbm(in vec2 p)
{
    //get two rotated fbm calls and displace the domain
    vec2 p2 = p*.7;
    vec2 basis = vec2(fbm(p2-time*1.6),fbm(p2+time*1.7));
    basis = (basis-.5)*.2;
    p += basis;

    //coloring
    return fbm(p*makem2(time*0.2));
}

float circ(vec2 p) 
{
    float r = length(p);
    //r = log(sqrt(r));
    r = 0.5*log(r);
    return abs(mod(r*4.,tau)-3.14)*3.+.2;

}

void main()
{
    //setup system
    vec2 p = gl_FragCoord.xy / iResolution.xy-0.5;
    p.x *= iResolution.x/iResolution.y;
    p*=4.;

    float rz = dualfbm(p);

    //rings
    p /= exp(mod(time*10.,3.14159));
    rz *= pow(abs((0.1-circ(p))),.9);

    //final color
    vec3 col = vec3(.2,0.1,0.4)/rz;
    col=pow(abs(col),vec3(.99));
    gl_FragColor = vec4(col,1.);
}