# Basic PShader Issue

**URL:** <https://discourse.processing.org/t/basic-pshader-issue/8094>\
**Category:** Coding Questions\
**Created:** [February 4, 2019, 2:40am UTC](https://discourse.processing.org/t/basic-pshader-issue/8094 "2019-02-04T02:40:58Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![eduzal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eduzal/32/759_2.png) [@eduzal](https://discourse.processing.org/u/eduzal)\
**Post date:** [February 4, 2019, 2:40am UTC](https://discourse.processing.org/t/basic-pshader-issue/8094/1 "2019-02-04T02:40:58Z")

</div>

Having some trouble passing an PImage to PShader. Doing something wrong, but can’t figure it out. First I’m trying to work with image before moving to video.

tks in advance.

basic code

```auto
PShader displace;
PImage moon;
boolean isMoon=true;
PVector moonXNoise;
PVector moonYNoise;

void setup() {
  size(1920, 1080, P3D);
  imageMode(CENTER);

 //Moon Setup
  moon=loadImage("06_lua.jpg");
  displace=loadShader("displaceFrag.glsl", "displaceVert.glsl");
  displace.set("resolution", float(width), float(height));
}

void draw() {
background(0);

if (isMoon) {
    float luax=0.5;
    moonXNoise=new PVector(luax, luax, luax);
    moonYNoise=new PVector(-luax, -luax, -luax);
    displace.set("time", millis()/1000.0);
    displace.set("tex", moon);
    displace.set("x_noise", moonXNoise);
    displace.set("y_noise", moonYNoise);

    shader(displace);
    rect(0, 0, width, height);
    //image(moon,0,0);
  }
}

```

displaceFrag.glsl

```auto
#version 150

uniform float time;
uniform vec2 resolution;
uniform sampler2DRect tex;
uniform vec3 x_noise;
uniform vec3 y_noise;

out vec4 outputColor;

// 2D Random
float random (in vec2 st) {
    return fract(sin(dot(st.xy,
                         vec2(12.9898,78.233)))
                 * 43758.5453123);
}

// 2D Noise based on Morgan McGuire @morgan3d
// https://www.shadertoy.com/view/4dS3Wd
float noise (in vec2 st) {
    vec2 i = floor(st);
    vec2 f = fract(st);

    // Four corners in 2D of a tile
    float a = random(i);
    float b = random(i + vec2(1.0, 0.0));
    float c = random(i + vec2(0.0, 1.0));
    float d = random(i + vec2(1.0, 1.0));

    // Smooth Interpolation

    // Cubic Hermine Curve. Same as SmoothStep()
    vec2 u = f*f*(3.0-2.0*f);
    // u = smoothstep(0.,1.,f);

    // Mix 4 coorners percentages
    return mix(a, b, u.x) +
            (c - a)* u.y * (1.0 - u.x) +
            (d - b) * u.x * u.y;
}

void main() {

  vec2 p = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);

  float drift = 60.0;
  float r = texture(tex, vec2(gl_FragCoord.x + drift * noise(vec2(p.x + x_noise.r, p.y + time)), (resolution.y - gl_FragCoord.y) + drift * noise(vec2(p.x + time, p.y + y_noise.r)))).r;
  float g = texture(tex, vec2(gl_FragCoord.x + drift * noise(vec2(p.x + x_noise.g, p.y + time)), (resolution.y - gl_FragCoord.y) + drift * noise(vec2(p.x + time, p.y + y_noise.g)))).g;
  float b = texture(tex, vec2(gl_FragCoord.x + drift * noise(vec2(p.x + x_noise.b, p.y + time)), (resolution.y - gl_FragCoord.y) + drift * noise(vec2(p.x + time, p.y + y_noise.b)))).b;
  outputColor = vec4(r, g, b, 1.0);
}

```

displaceVert.glsl

```auto
#version 150

uniform mat4 modelViewProjectionMatrix;
in vec4 position;

void main(){
	gl_Position = modelViewProjectionMatrix * position;
}

```

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [February 4, 2019, 7:59am UTC](https://discourse.processing.org/t/basic-pshader-issue/8094/2 "2019-02-04T07:59:30Z")

</div>

I think it might be need to use `sampler2D` rather than `sampler2DRect`, although always useful to specify what not working means! 🙂

Also you might need to be aware of the texture matrix for the PImage - see this issue which is still outstanding (but fixed in PraxisLIVE) - [https://github.com/processing/processing/issues/3437](https://github.com/processing/processing/issues/3437)

---

<div class="post-metadata">

**Author:** ![eduzal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eduzal/32/759_2.png) [@eduzal](https://discourse.processing.org/u/eduzal)\
**Post date:** [February 4, 2019, 3:10pm UTC](https://discourse.processing.org/t/basic-pshader-issue/8094/3 "2019-02-04T15:10:18Z")

</div>

not working = black screen, nothing happens. if i use a simple color shader it works fine

the original link is here: [https://junkiyoshi.com/openframeworks20180905/](https://junkiyoshi.com/openframeworks20180905/) . i’m translating it to processing.

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [February 5, 2019, 3:19am UTC](https://discourse.processing.org/t/basic-pshader-issue/8094/4 "2019-02-05T03:19:50Z")

</div>

I tried making it work. Here are the first steps to fix it.

- The screen is black, so I make `float r = 1.0;` in the fragment shader expecting the rect to turn red.
- It doesn’t, so I compare to the default shaders from Processing. I see that they don’t use `modelViewProjectionMatrix` but `transformMatrix` so I make that change and it turns red. Good.
- Next, I see that in my shaders I use `texture2D` instead of `texture` so I make that change. Then it fails to compile, because `sampler2DRect` should be `sampler2D` in that case. After that change, it compiles and I get a purple color that I think comes from the image.
- I think the scale of the image is wrong, maybe related to not using Rect anymore.
- I try setting `float r = texture2D(tex, gl_FragCoord.xy/1000.0).r;` to confirm that is a scaling issue (see the divided by 1000 to scale it down) and it seems to be the case: now I see the image.
- So I try this:

```auto
  vec2 uv = gl_FragCoord.xy;
  uv.x /= resolution.x;
  uv.y /= resolution.y;

  float r = texture2D(tex, vec2(
        uv.x + drift * noise(vec2(p.x + x_noise.r, p.y + time)), 
        (resolution.y - uv.y) + drift * noise(vec2(p.x + time, p.y + y_noise.r)))).r;
  float g = texture2D(tex, vec2(
        uv.x + drift * noise(vec2(p.x + x_noise.g, p.y + time)), 
        (resolution.y - uv.y) + drift * noise(vec2(p.x + time, p.y + y_noise.g)))).g;
  float b = texture2D(tex, vec2(
        uv.x + drift * noise(vec2(p.x + x_noise.b, p.y + time)), 
        (resolution.y - uv.y) + drift * noise(vec2(p.x + time, p.y + y_noise.b)))).b;

```

Which gives me an animated noise effect. Not sure if that what it should do, but it looks interesting 🙂

Maybe this helps you get started?

 ![2019-02-05-041742_1920x1080_scrot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8e8de72a53aebca0716e813cc451827daad2d966.jpeg)  
(I made it a bit brighter in gimp because it was probably too dark for this forum)