Problem converting canny algorithm to shader

I’m struggling to produce the same output in glsl.

Here is the processing code.

void getNeighboursMax3(int x, int y,float t) {
    
    boolean k = false;
    int p = x + y * img.width;
    float red = red(sobel.pixels[p]);
    float green = green(sobel.pixels[p]);
    float m = 1;
    //red = map(red,0,255*m,-255,255);
    //green = map(green,0,255*m,-255,255);
    float g = atan2(green,red);
    float g1 = g;
    g = map(g,-PI,PI,0,360);
    //g = gradient[x][y];
    //println(red,green,g6,g7,g,gradient[x][y],g8);
    //if(red!=green)println(red,green,g);
    //println(g);
    int w1 = img.width;
    //= red(sobelG.pixels[p]);
    //= atan2(red(sobely.pixels[p]),red(sobelx.pixels[p]));
        
        float q = 255;
        float r = 255;
        int p1 = 0;
        
       //angle 0
       if ((0 <= g && g < (22.5))){
            if((x+1)+(y)*w1<img.pixels.length&&(x+1)+(y)*w1>=0)q = blue(sobel.pixels[(x+1)+(y)*w1]);
            if((x-1)+(y)*w1<img.pixels.length&&(x-1)+(y)*w1>=0)r = blue(sobel.pixels[(x-1)+(y)*w1]);
        //angle 45
        }else if ((22.5) <= g && g < (67.5)){
            if((x+1)+ (y+1)*w1<img.pixels.length&&(x+1)+ (y+1)*w1>=0)q = blue(sobel.pixels[(x+1)+ (y+1)*w1]);
            if((x-1)+ (y-1)*w1<img.pixels.length&&(x-1)+ (y-1)*w1>=0)r = blue(sobel.pixels[(x-1)+ (y-1)*w1]);
        //angle 90
        }else if ((67.5) <= g && g< (112.5)){
            if((x)+ (y+1)*w1<img.pixels.length&&(x)+ (y+1)*w1>=0)q = blue(sobel.pixels[(x)+ (y+1)*w1]);
            if((x)+ (y-1)*w1<img.pixels.length&&(x)+ (y-1)*w1>=0)r = blue(sobel.pixels[(x)+ (y-1)*w1]);
        //angle 135
        }else if ((112.5) <= g && g < (157.5)){
            if((x-1)+(y+1)*w1<img.pixels.length&&(x-1)+(y+1)*w1>=0)q = blue(sobel.pixels[(x-1)+(y+1)*w1]);
            if((x+1)+(y-1)*w1<img.pixels.length&&(x+1)+(y-1)*w1>=0)r = blue(sobel.pixels[(x+1)+(y-1)*w1]);
        //angle 180
        }else if ((157.5) <= g && g < (202.5)){
            if((x-1)+(y)*w1<img.pixels.length&&(x-1)+(y)*w1>=0)q = blue(sobel.pixels[(x-1)+(y)*w1]);
            if((x+1)+(y)*w1<img.pixels.length&&(x+1)+(y)*w1>=0)r = blue(sobel.pixels[(x+1)+(y)*w1]);
        //angle 225
        }else if ((202.5) <= g && g < (247.5)){
            if((x-1)+(y-1)*w1<img.pixels.length&&(x-1)+(y-1)*w1>=0)q = blue(sobel.pixels[(x-1)+(y-1)*w1]);
            if((x+1)+(y+1)*w1<img.pixels.length&&(x+1)+(y+1)*w1>=0)r = blue(sobel.pixels[(x+1)+(y+1)*w1]);
        //angle 270
        }else if ((247.5) <= g && g < (292.5)){
            if((x-1)+(y+1)*w1<img.pixels.length&&(x-1)+(y+1)*w1>=0)q = blue(sobel.pixels[(x-1)+(y+1)*w1]);
            if((x+1)+(y-1)*w1<img.pixels.length&&(x+1)+(y-1)*w1>=0)r = blue(sobel.pixels[(x+1)+(y-1)*w1]);
        //angle 315
        }else if ((292.5) <= g && g < (337.5)){
            if((x)+(y-1)*w1<img.pixels.length&&(x)+(y-1)*w1>=0)q = blue(sobel.pixels[(x)+(y-1)*w1]);
            if((x)+(y+1)*w1<img.pixels.length&&(x)+(y+1)*w1>=0)r = blue(sobel.pixels[(x)+(y+1)*w1]);
        //angle 360
        }else if ((337.5) <= g && g <= (360)){
            if((x+1)+(y)*w1<img.pixels.length&&(x+1)+(y)*w1>=0)q = blue(sobel.pixels[(x+1)+(y)*w1]);
            if((x-1)+(y)*w1<img.pixels.length&&(x-1)+(y)*w1>=0)r = blue(sobel.pixels[(x-1)+(y)*w1]);
        }
        //println(q,r);
        //if (q<t&&(blue(sobel.pixels[p]) <= q) && (r<t&&blue(sobel.pixels[p]) <= r)) sobelMax.pixels[p] = color(0);
        //else sobelMax.pixels[p] = color(255);
        if (q<t&&(blue(sobel.pixels[p]) <= q) && (r<t&&blue(sobel.pixels[p]) <= r)) sobelMax.pixels[p] = color(0);
        else sobelMax.pixels[p] = color(255);
        
  };

this produces the following

Screen Shot 10-29-20 at 04.10 PM

I tried to convert it to glsl like this.



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

#define PROCESSING_TEXTURE_SHADER;

uniform sampler2D texture;
uniform float thresh;

varying vec4 vertColor;
varying vec4 vertTexCoord;

uniform vec2 resolution;

float map(float value, float min1, float max1, float min2, float max2) {
  return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
}

void main(void) {

  float x = 1.0 / resolution.x;
  float y = 1.0 / resolution.y;
  float PI = 3.14159265359;

  float q = 1.0;
  float r = 1.0;
  vec4 p1 = vec4( 0.0 );
  vec4 p2 = vec4( 0.0 );
  float m = 2.0;
	float n = 1.0;
  vec4 mCol = texture2D( texture, vec2( vertTexCoord.x, vertTexCoord.y ) );
	//float x1 = map(mCol.r,0.0,m,0.0-n,n);
	//float y1 = map(mCol.g,0.0,m,0.0-n,n);
	float x1 = mCol.r;
	float y1 = mCol.g;
  float a1 = atan(y1,x1);
	float myGrad = map(a1,0.0-PI,PI,0.0,360.0);
  float myCol = mCol.b;
	
	  
		if ((0 <= myGrad && myGrad < (22.5))){
			p1 = texture2D( texture, vec2( vertTexCoord.x + x, vertTexCoord.y ) ) * 1.0;
			p2 = texture2D( texture, vec2( vertTexCoord.x - x, vertTexCoord.y ) ) * 1.0;
			q = p1.b;
			r = p2.b;
		}
		//angle 45
		else if ((22.5) <= myGrad && myGrad < (67.5)){
			p1 = texture2D( texture, vec2( vertTexCoord.x + x, vertTexCoord.y + y) ) * 1.0;
			p2 = texture2D( texture, vec2( vertTexCoord.x - x, vertTexCoord.y - y) ) * 1.0;
			q = p1.b;
			r = p2.b;
		}
		//angle 90
		else if ((67.5) <= myGrad && myGrad< (112.5)){
			p1 = texture2D( texture, vec2( vertTexCoord.x, vertTexCoord.y + y) ) * 1.0;
			p2 = texture2D( texture, vec2( vertTexCoord.x, vertTexCoord.y - y) ) * 1.0;
			q = p1.b;
			r = p2.b;
		}
		//angle 135
		else if((112.5) <= myGrad && myGrad < (157.5)){
			p1 = texture2D( texture, vec2( vertTexCoord.x - x, vertTexCoord.y + y) ) * 1.0;
			p2 = texture2D( texture, vec2( vertTexCoord.x + x, vertTexCoord.y - y) ) * 1.0;
			q = p1.b;
			r = p2.b;
		}
		//angle 180
		else if ((157.5) <= myGrad && myGrad < (202.5)){
			p1 = texture2D( texture, vec2( vertTexCoord.x - x, vertTexCoord.y ) ) * 1.0;
			p2 = texture2D( texture, vec2( vertTexCoord.x + x, vertTexCoord.y ) ) * 1.0;
			q = p1.b;
			r = p2.b;
		}
		//angle 225
		else if ((202.5) <= myGrad && myGrad < (247.5)){
			p1 = texture2D( texture, vec2( vertTexCoord.x - x, vertTexCoord.y - y) ) * 1.0;
			p2 = texture2D( texture, vec2( vertTexCoord.x + x, vertTexCoord.y + y) ) * 1.0;
			q = p1.b;
			r = p2.b;
		}
		
		//angle 270
		else if ((247.5) <= myGrad && myGrad < (292.5)){
			p1 = texture2D( texture, vec2( vertTexCoord.x - x, vertTexCoord.y + y) ) * 1.0;
			p2 = texture2D( texture, vec2( vertTexCoord.x + x, vertTexCoord.y - y) ) * 1.0;
			q = p1.b;
			r = p2.b;
		}
		//angle 315
		else if ((292.5) <= myGrad && myGrad < (337.5)){
			p1 = texture2D( texture, vec2( vertTexCoord.x, vertTexCoord.y - y) ) * 1.0;
			p2 = texture2D( texture, vec2( vertTexCoord.x, vertTexCoord.y + y) ) * 1.0;
			q = p1.b;
			r = p2.b;
		}
		//angle 360
		else if ((337.5) <= myGrad && myGrad <= (360)){
			p1 = texture2D( texture, vec2( vertTexCoord.x + x, vertTexCoord.y ) ) * 1.0;
			p2 = texture2D( texture, vec2( vertTexCoord.x - x, vertTexCoord.y ) ) * 1.0;
			q = p1.b;
			r = p2.b;
		}
		
		if((r<thresh&&myCol<=r)&&(q<thresh&&myCol<=q)){
			//gl_FragColor = vec4(1.0-myCol,1.0-myCol,1.0-myCol,1.0);
			gl_FragColor = vec4(0.0,0.0,0.0,1.0);
		}else{
			gl_FragColor = vec4(1.0 ,1.0,1.0,1.0);
		}
		
};

but this produces this

Screen Shot 10-29-20 at 04.09 PM

which is close but not adequate because I cannot clean it up.

As I’m fairly new to shaders I was hoping it was something pretty simple.

Many thanks