# Some problem with shadertoy to processing！

**URL:** <https://discourse.processing.org/t/some-problem-with-shadertoy-to-processing/31742>\
**Category:** Coding Questions\
**Created:** [August 16, 2021, 9:49am UTC](https://discourse.processing.org/t/some-problem-with-shadertoy-to-processing/31742 "2021-08-16T09:49:59Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![AbleYudada](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ableyudada/32/14190_2.png) [@AbleYudada](https://discourse.processing.org/u/AbleYudada)\
**Post date:** [August 16, 2021, 9:49am UTC](https://discourse.processing.org/t/some-problem-with-shadertoy-to-processing/31742/1 "2021-08-16T09:49:59Z")

</div>

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!

```auto
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”

```auto
#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！

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [August 16, 2021, 5:23pm UTC](https://discourse.processing.org/t/some-problem-with-shadertoy-to-processing/31742/2 "2021-08-16T17:23:09Z")

</div>

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:

> **[GitHub - SableRaf/Shadertoy2Processing: Get GLSL code from Shadertoy.com to...](https://github.com/SableRaf/Shadertoy2Processing)**
>
> Get GLSL code from Shadertoy.com to run inside of Processing - GitHub - SableRaf/Shadertoy2Processing: Get GLSL code from Shadertoy.com to run inside of Processing

---

<div class="post-metadata">

**Author:** ![AbleYudada](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ableyudada/32/14190_2.png) [@AbleYudada](https://discourse.processing.org/u/AbleYudada)\
**Post date:** [August 17, 2021, 2:01pm UTC](https://discourse.processing.org/t/some-problem-with-shadertoy-to-processing/31742/3 "2021-08-17T14:01:39Z")

</div>

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

---

<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:** [August 17, 2021, 3:35pm UTC](https://discourse.processing.org/t/some-problem-with-shadertoy-to-processing/31742/4 "2021-08-17T15:35:50Z")

</div>

Hi 🙂 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?

---

<div class="post-metadata">

**Author:** ![AbleYudada](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ableyudada/32/14190_2.png) [@AbleYudada](https://discourse.processing.org/u/AbleYudada)\
**Post date:** [August 18, 2021, 2:14am UTC](https://discourse.processing.org/t/some-problem-with-shadertoy-to-processing/31742/5 "2021-08-18T02:14:59Z")

</div>

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

> **[Shadertoy](https://www.shadertoy.com/view/tl2BRt)**

---

<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:** [August 18, 2021, 8:41am UTC](https://discourse.processing.org/t/some-problem-with-shadertoy-to-processing/31742/6 "2021-08-18T08:41:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![AbleYudada](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ableyudada/32/14190_2.png) [@AbleYudada](https://discourse.processing.org/u/AbleYudada)\
**Post date:** [August 18, 2021, 9:45am UTC](https://discourse.processing.org/t/some-problem-with-shadertoy-to-processing/31742/7 "2021-08-18T09:45:48Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![cansik](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/cansik/32/8815_2.png) [@cansik](https://discourse.processing.org/u/cansik)\
**Post date:** [August 18, 2021, 10:23am UTC](https://discourse.processing.org/t/some-problem-with-shadertoy-to-processing/31742/8 "2021-08-18T10:23:58Z")

</div>

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

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7e0dcd400ed81300369140874921e62402a7084a.jpeg)

---

<div class="post-metadata">

**Author:** ![AbleYudada](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ableyudada/32/14190_2.png) [@AbleYudada](https://discourse.processing.org/u/AbleYudada)\
**Post date:** [August 19, 2021, 3:21am UTC](https://discourse.processing.org/t/some-problem-with-shadertoy-to-processing/31742/9 "2021-08-19T03:21:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![cansik](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/cansik/32/8815_2.png) [@cansik](https://discourse.processing.org/u/cansik)\
**Post date:** [August 19, 2021, 6:25am UTC](https://discourse.processing.org/t/some-problem-with-shadertoy-to-processing/31742/10 "2021-08-19T06:25:22Z")

</div>

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

---

<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:** [August 19, 2021, 8:03am UTC](https://discourse.processing.org/t/some-problem-with-shadertoy-to-processing/31742/11 "2021-08-19T08:03:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![AbleYudada](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ableyudada/32/14190_2.png) [@AbleYudada](https://discourse.processing.org/u/AbleYudada)\
**Post date:** [August 19, 2021, 8:10am UTC](https://discourse.processing.org/t/some-problem-with-shadertoy-to-processing/31742/12 "2021-08-19T08:10:23Z")

</div>

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. 🙁 Thank you so much for trying!

---

<div class="post-metadata">

**Author:** ![AbleYudada](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ableyudada/32/14190_2.png) [@AbleYudada](https://discourse.processing.org/u/AbleYudada)\
**Post date:** [August 19, 2021, 8:12am UTC](https://discourse.processing.org/t/some-problem-with-shadertoy-to-processing/31742/13 "2021-08-19T08:12:45Z")

</div>

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

---

<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:** [August 19, 2021, 8:15am UTC](https://discourse.processing.org/t/some-problem-with-shadertoy-to-processing/31742/14 "2021-08-19T08:15:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AbleYudada](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ableyudada/32/14190_2.png) [@AbleYudada](https://discourse.processing.org/u/AbleYudada)\
**Post date:** [August 19, 2021, 8:18am UTC](https://discourse.processing.org/t/some-problem-with-shadertoy-to-processing/31742/16 "2021-08-19T08:18:06Z")

</div>

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

---

<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:** [August 19, 2021, 8:18am UTC](https://discourse.processing.org/t/some-problem-with-shadertoy-to-processing/31742/17 "2021-08-19T08:18:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![AbleYudada](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ableyudada/32/14190_2.png) [@AbleYudada](https://discourse.processing.org/u/AbleYudada)\
**Post date:** [August 19, 2021, 8:20am UTC](https://discourse.processing.org/t/some-problem-with-shadertoy-to-processing/31742/18 "2021-08-19T08:20:59Z")

</div>

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! 🧐

---

<div class="post-metadata">

**Author:** ![AbleYudada](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ableyudada/32/14190_2.png) [@AbleYudada](https://discourse.processing.org/u/AbleYudada)\
**Post date:** [August 19, 2021, 8:31am UTC](https://discourse.processing.org/t/some-problem-with-shadertoy-to-processing/31742/19 "2021-08-19T08:31:37Z")

</div>

The revised shader code! Please enjoy！

```auto
#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

}

```