Where to safe my shader so that Processing finds it?

Processing Coding Questions
1

Hi every one, I hope you can help me.
I’m getting into programming shaders and would like to use processing to visualise them.
According to “The Book of Shaders” the following code should load it :

PShader shader;

void setup() {
  size(640, 360, P2D);
  noStroke();

  shader = loadShader("shader.frag");
}

void draw() {
  shader.set("u_resolution", float(width), float(height));
  shader.set("u_mouse", float(mouseX), float(mouseY));
  shader.set("u_time", millis() / 1000.0);
  shader(shader);
  rect(0,0,width,height);
}

It also mentions that the shader file should be safed in the "data" folder.
Where can i find this "data" folder?
I tried saving it in the same folder as the sketch => no result

I tried making a folder named "data" in the same folder as the sketch => no result

I tried making a folder named "data"  c:\data and putting the file shader.frag there. I changed the code in :   shader = loadShader("c:\data\shader.frag");  => no result 

I have no idea what more to try. Any help is appreciated.
Cheers,
Adrian.
2

That’s the right way.

Today there was a case where the loading of a movie didn’t work

maybe a bug.

But first make sure you have the spelling right, because it’s case-sensitive.

1 Like
3

Thanks Chrisir for the response but It does not work. It tells me that it can’t be found or is unreadable. :frowning:
I tried processing 3 and 4.
Cheers,
Adrian.

1 Like
4

I run that same demo on a Mac and it works ok. The shader.frag file is in a ‘data’ folder that I created. Maybe your shader.frag file is corrupted. Mine looks like this:

#ifdef GL_ES
precision mediump float;
#endif

#define PROCESSING_COLOR_SHADER

uniform vec2 u_resolution;
uniform vec3 u_mouse;
uniform float u_time;

void main() {
    vec2 st = gl_FragCoord.st/u_resolution;
    gl_FragColor = vec4(st.x,st.y,0.0,1.0);
}

I also left out the u_mouse and u_time lines of code in the sketch if that makes any difference (may not).

Output:

shader
shader1286×784 20.5 KB

Addendum:
I just tried the same thing on a Windows 11 system and unfortunately I got the same error that you did. Maybe someone else can try it also.

2 Likes
5

I find it easiest to just include the shader as a multi-line string in the Processing sketch:

PShader shdr;

void setup() {
  size( 800, 800, P2D );
  shdr = new PShader( g.parent, vertSrc, fragSrc );
}

void draw() {
  shdr.set( "time", frameCount/60. );
  shader( shdr );
  rect( 0, 0, width, height );
}


String[] vertSrc = {"""
#version 330
uniform mat4 transform;   // passed in by Processing
in vec4 position;
void main() {
  gl_Position = transform * position;
}
"""};


String[] fragSrc = {"""
#version 330
precision highp float;
uniform vec2 resolution;   // passed in by Processing
uniform float time;
#define TAU 6.283185307179586

void main() {
  vec2 uv = (2.*gl_FragCoord.xy-resolution)/resolution.y;
  uv = vec2( time*0.5 - log(length(uv)), atan( uv.y, uv.x ) / TAU + .5 );
  uv = fract( vec2( 1.*uv.x+3.*uv.y, -1.*uv.x+6.*uv.y ) );
  gl_FragColor = vec4( step(0.8, uv), 0., 1. );
}
"""};
1 Like
6

On a Mac I get this error:

Cannot compile fragment shader:
ERROR: 0:12: Use of undeclared identifier 'gl_FragColor'

I’m confused by the three double quote block frame. Is this documented for Processing somewhere? I’ve seen double quotes for each line in text books, but not “”“…”“” for the entire block. In general I’ve had a difficult time using other editors for OpenGL such as NetBeans or IntelliJ; I’ve had the best luck with Processing. Seems like there is always some missing file with the others.

Addendum:
Runs without error on Windows 11 system.

7

This should run on your Windows operating system:

PShader shader;

void setup() {
  size(640, 360, P2D);
  noStroke();
  shader = new PShader( g.parent, vertSrc, fragSrc );
}

void draw() {
  shader.set("u_resolution", float(width), float(height));
 // shader.set("u_mouse", float(mouseX), float(mouseY));
 // shader.set("u_time", millis() / 1000.0);
  shader(shader);
  rect(0, 0, width, height);
}

String[] vertSrc = {"""
#version 330
uniform mat4 transform;   // passed in by Processing
in vec4 position;
void main() {
  gl_Position = transform * position;
}
"""};

String[] fragSrc = {"""
#ifdef GL_ES
precision mediump float;
#endif

  #define PROCESSING_COLOR_SHADER

  uniform vec2 u_resolution;
uniform vec3 u_mouse;
uniform float u_time;

void main() {
  vec2 st = gl_FragCoord.st/u_resolution;
  gl_FragColor = vec4(st.x, st.y, 0.0, 1.0);
}

"""};

Uses inline frag and vert shaders as suggested by @scudly . Not sure why it won’t pick them up from the data folder.

8

Try changing the bottom of the fragment shader to

out vec4 outColor;
void main() {
  vec2 uv = (2.*gl_FragCoord.xy-resolution)/resolution.y;
  uv = vec2( time*0.5 - log(length(uv)), atan( uv.y, uv.x ) / TAU + .5 );
  uv = fract( vec2( 1.*uv.x+3.*uv.y, -1.*uv.x+6.*uv.y ) );
  outColor = vec4( step(0.8, uv), 0., 1. );
}

gl_FragColor is deprecated on later GLSL in favor of your own output variable.

1 Like
9

That fixed it on the Mac. Thank you, sir.

2 Likes
10

The triple-quotes for multi-line strings is new with Java 13 which Processing upgraded to with version 4.0. They should probably be added to Processing’s String documentation.

1 Like
11

I like the three double quote block frame. It’s easier than trying to format each line and adding a line break to each line that I have seen in other places. Once you’ve got the frame set up it’s easy to copy paste into it. Thanks for the information and showing us how it works.