Some problem with shadertoy to processing!

Hi guys!
I am learning something about the shader. I try to convert the code from shadertoy to processing, but it seems that everything is ok but it runs without any effect. Can anyone give some suggestions?

This is processing code!

PShader Shrtoy;
void setup() {
size(640,360,P3D);
//noStroke();
Shrtoy = loadShader("ShrtoyFrag.glsl"); 
Shrtoy.set("iResolution", float(width), float(height));
}
void draw() {
background(0);
Shrtoy.set("iMouse", float(mouseX), float(mouseY));
Shrtoy.set("iTime", millis() / 1000.0);
println(millis() / 1000.0);
shader(Shrtoy);
 rect(0, 0, width, height);
 //resetShader();
}

Shadertoy code!

“ShrtoyFrag.glsl”

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif
uniform vec2 iResolution;
#define PROCESSING_COLOR_SHADER

uniform float iTime;                 // image/sound/buffer    Current time in seconds


uniform vec4  iMouse;                // image/buffer          xy = current pixel coords (if LMB is down). zw = click pixel

vec4 fragColor;
vec2 fragCoord = gl_FragCoord.xy;


#define manhattan 0
#define neat 1
#define PI 3.1415926535

void mainImage( out vec4 fragColor, in vec2 fragCoord );

void main() {
    mainImage(gl_FragColor,gl_FragCoord.xy);
}
vec3 hsv2rgb(vec3 c)
{
    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}

float VoroLen(vec2 a, vec2 b) {
#if manhattan
    vec2 c = abs(a - b);
    return c.x + c.y;
#else
    return length(a-b);
#endif
}

float EdgeDistance(vec2 a, vec2 b, vec2 c) {
#if manhattan
    float halfLen = VoroLen(a, b) * 0.5;
    float a2c = VoroLen(a, c);
    float b2c = VoroLen(b, c);
    return max(halfLen - a2c, b2c - halfLen);
#else
    vec2 halfJoin = (a - b) * 0.5;
    vec2 edgeOrigin = b + halfJoin;
    vec2 edgeNormal = normalize(halfJoin);
    return dot(edgeNormal, c - edgeOrigin);
#endif
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    float scale = 10.;
    vec2 suv = (fragCoord-0.5*iResolution.xy)/iResolution.y;
    suv *= scale;
    vec2 mousePos = (iMouse.xy -0.5 * iResolution.xy)/iResolution.y;
    mousePos *= scale;
    
    float t = iTime * 0.25;
    float r = 4.5;
    float rsqrt = r * 0.707;
    vec2[9] point;
    point[0] = mousePos;
    point[1] = vec2(sin(t)*rsqrt, sin(t)*rsqrt);
    point[2] = vec2(-sin(t+PI*0.5)*rsqrt, sin(t+PI*0.5)*rsqrt);
    point[3] = vec2(0., sin(t*2.-0.5)*r);
    point[4] = vec2(sin(t*2.+0.7)*r, 0.);
    point[5] = vec2(r, r);
    point[6] = vec2(-r, r);
    point[7] = vec2(r, -r);
    point[8] = vec2(-r, -r);
    
    // Determine some cool colors.
    vec3[point.length()] color;
    float pi2 = PI * 2.;
    float theta = 0.;
    float increment = pi2 / float(point.length());
    for(int i = 0; i < color.length(); i++) {
        color[i] = hsv2rgb(vec3(theta/pi2, 1., 1.));
        theta += increment;
    }
    
    // Get nearest voronoi point.
    int nearest = 0;
    float dnearest = VoroLen(suv, point[0]);
    for (int i = 1; i < point.length(); i++) {
        float dcurrent = VoroLen(suv, point[i]);
        if (dcurrent < dnearest) {
            dnearest = dcurrent;
            nearest = i;
        }
    }
        
    
    // Get the nearest edge.
    // Note: nearest edge can't be inferred from the second-nearest voronoi point.
    // i.e.: For a point in Red, the second nearest point may be Blue, but the nearest edge could be Red-Green.
    float edgeDistance = 1000.;
    for (int i = 0; i < point.length(); i++) {
        if (i == nearest) continue;
        float edgeDistCurrent = EdgeDistance(point[nearest], point[i], suv);
        if (edgeDistCurrent < edgeDistance) {
            edgeDistance = edgeDistCurrent;
        }
    }
    
    float pointcolor = clamp(0., 1., 1. - smoothstep(0.04, 0.08, dnearest));
    
#if neat
    vec3 edgeColor = vec3(smoothstep(0.01, 0.02, 0.04-edgeDistance));
    vec3 backgroundColor = color[nearest] * (1. - pow(edgeDistance / scale, 0.125));
    fragColor = vec4(max(max(edgeColor, backgroundColor), vec3(pointcolor)), 1.0);
#else
    fragColor = vec4(1.0,1.0,0.0, 1.0);

#endif

}

Hope to get your help!

1 Like

The code works differently on Processing and on shadertoy. You may want to refer to Raph’s code to see how to convert the code:

1 Like

Yes, I did the conversion exactly in his way, but I don’t know where the problem occurred.

Hi :slight_smile: If you visualize the color stored in edgeColor and backgroundColor they seems to be right.
But pointColor seems to be 1.0, which would indicate that there’s something wrong with dnearest.

Just in case, I declared a const int L = 9; and used it to specify the size of the arrays (in the declarations and in the for loops).

Could you post the original shadertoy link?

Very happy for your reply, this is the original link of shadertoy!
I did not change any of the codes.

1 Like

Unfortunately there must be an issue with the shader, because I see the same result both in Shadertoy and in Processing: a white window. In most cases it’s easy to make a shader that works in all graphics cards but in some cases one hits a specific bug which requires rewriting the code in a different way.

Do you mean to see a white window when you go in through my link? The code running on processing is indeed a white window. I didn’t find the reason, but I tried to copy other codes, and most of them can run!Anyway, thank you very much for your reply! It may be more complicated to use this aspect than I thought!

It works on my machine in Processing4 on MacOS Big Sur (11.5.1). Only the mouse input is not working atm.

1 Like

Is it to run the code I give directly? Still have changes?

Yes, exactly the code you posted, did not change a single line.

The shader code has something that makes it work in some graphics cards / drivers and not in others. Probably with some changes it would work everywhere.

The device I use is win10, so I can determine that it is not a code format problem. I think it may be due to a compatibility problem at the system level or at the bottom of the processing. :slightly_frowning_face: Thank you so much for trying!

Do you mean it is because of some errors in the processing code?

No it’s not Processing but the shader. I see it all white in Shadertoy.

It’s not for me, what I display in shadertoy is normal.

In my case, by changing this line it works fine:

float pointcolor = clamp(1. - smoothstep(0.04, 0.08, dnearest), 0.0, 1.0);

The order of the arguments in the clamp function` seemed not correct.

4 Likes

You are amazing! It was solved perfectly, and I was running normally! Thank you so much!It seems that there needs to be more to learn about the shader! :face_with_monocle:

The revised shader code! Please enjoy!

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif
uniform vec2 iResolution;
#define PROCESSING_COLOR_SHADER

uniform float iTime;                 // image/sound/buffer    Current time in seconds
uniform int num;
uniform float px[100];  
uniform float py[100];  

uniform vec2  iMouse;                // image/buffer          xy = current pixel coords (if LMB is down). zw = click pixel

vec4 fragColor;
vec2 fragCoord = gl_FragCoord.xy;


#define manhattan 0
#define neat 1
#define PI 3.1415926535

void mainImage( out vec4 fragColor, in vec2 fragCoord );

void main() {
    mainImage(gl_FragColor,gl_FragCoord.xy);
}


vec3 hsv2rgb(vec3 c)
{
    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}

float VoroLen(vec2 a, vec2 b) {
#if manhattan
    vec2 c = abs(a - b);
    return c.x + c.y;
#else
    return length(a-b);
#endif
}

float EdgeDistance(vec2 a, vec2 b, vec2 c) {
#if manhattan
    float halfLen = VoroLen(a, b) * 0.5;
    float a2c = VoroLen(a, c);
    float b2c = VoroLen(b, c);
    return max(halfLen - a2c, b2c - halfLen);
#else
    vec2 halfJoin = (a - b) * 0.5;
    vec2 edgeOrigin = b + halfJoin;
    vec2 edgeNormal = normalize(halfJoin);
    return dot(edgeNormal, c - edgeOrigin);
#endif
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    float scale = 10.;
    vec2 suv = (fragCoord-0.5*iResolution.xy)/iResolution.y;
    suv *= scale;
    vec2 mousePos = iMouse.xy-vec2(0.5,0.5) ;
    
    mousePos *= scale;
    
    float t = iTime * 0.25;
    float r = 4.5;
    float rsqrt = r * 0.707;
    vec2[9] point;
    point[0] = mousePos;
    point[1] = vec2(sin(t)*rsqrt, sin(t)*rsqrt);
    point[2] = vec2(-sin(t+PI*0.5)*rsqrt, sin(t+PI*0.5)*rsqrt);
    point[3] = vec2(0., sin(t*2.-0.5)*r);
    point[4] = vec2(sin(t*2.+0.7)*r, 0.);
    point[5] = vec2(r, r);
    point[6] = vec2(-r, r);
    point[7] = vec2(r, -r);
    point[8] = vec2(-r, -r);
    
    // Determine some cool colors.
    vec3[point.length()] color;
    float pi2 = PI * 2.;
    float theta = 0.;
    float increment = pi2 / float(point.length());
    for(int i = 0; i < color.length(); i++) {
        color[i] = hsv2rgb(vec3(theta/pi2, 1., 1.));
        theta += increment;
    }
    
    // Get nearest voronoi point.
    int nearest = 0;
    float dnearest = VoroLen(suv, point[0]);
    for (int i = 1; i < point.length(); i++) {
        float dcurrent = VoroLen(suv, point[i]);
        if (dcurrent < dnearest) {
            dnearest = dcurrent;
            nearest = i;
        }
    }
        
    
    // Get the nearest edge.
    // Note: nearest edge can't be inferred from the second-nearest voronoi point.
    // i.e.: For a point in Red, the second nearest point may be Blue, but the nearest edge could be Red-Green.
    float edgeDistance = 1000.;
    for (int i = 0; i < point.length(); i++) {
        if (i == nearest) continue;
        float edgeDistCurrent = EdgeDistance(point[nearest], point[i], suv);
        if (edgeDistCurrent < edgeDistance) {
            edgeDistance = edgeDistCurrent;
        }
    }
    
    float pointcolor = clamp(1. - smoothstep(0.04, 0.08, dnearest), 0.0, 1.0);
    
#if neat
    vec3 edgeColor = vec3(smoothstep(0.01, 0.02, 0.04-edgeDistance));
    vec3 backgroundColor = color[nearest] * (1. - pow(edgeDistance / scale, 0.125));
    fragColor = vec4(max(max(edgeColor, backgroundColor), vec3(pointcolor)), 1.0);
#else
    fragColor = vec4(1.0,1.0,0.0, 1.0);

#endif

}
2 Likes