# Image edge detection algorithm – php version

One of the most used image effects is the edge detection. Have you ever wondered how does it work?

The following is a tutorial to achieve an edge detection effect on an image without using any built-in functions, such as `imagefilter` with `IMG_FILTER_EDGEDETECT` filter type.

It will be very useful to learn something about image filters.

Before we begin, let me copy/paste some basic information from Wikipedia :)

Edge detection is a fundamental tool in image processing and computer vision, particularly in the areas of feature detection and feature extraction, which aim at identifying points in a digital image at which the image brightness changes sharply or more formally has discontinuities (source).

Now we know we are looking for sharp image brightness changes.

To quickly get the image brigthness, we have to convert it to a grayscale representation of its luminance.

To convert any color to a grayscale representation of its luminance, first one must obtain the values of its red, green, and blue (RGB) primaries in linear intensity encoding, by gamma expansion. Then, add together 30% of the red value, 59% of the green value, and 11% of the blue value. The resultant number is the desired linear luminance value (source).

Once we have our luminance map, we can use the Sobel operator to detect edges.

The Sobel operator calculates the directional change of the image intensity at each point, giving the direction of the largest possible increase from light to dark and the rate of change in that direction, using uses a pair of 3×3 convolution masks, one estimating the directional change in the x-direction and the other estimating the directional change in the y-direction.

Where A is the source image.

Once you have Gx and Gy values, combine them this way:

to get the directional change and consequently the gray representation of the edge.

Time to code something:

``` 255){
\$gray = 255;
}
if(\$gray < 0){
\$gray = 0;
}

// creation of the new gray
\$new_gray  = imagecolorallocate(\$final,\$gray,\$gray,\$gray);

// adding the gray pixel to the new image
imagesetpixel(\$final,\$x,\$y,\$new_gray);
}
}

// telling the browser we are going to output a jpeg image

// creation of the final image
imagejpeg(\$final);

// freeing memory
imagedestroy(\$starting_img);
imagedestroy(\$final);

// function to get the luminance value
function get_luminance(\$pixel){
\$pixel = sprintf('%06x',\$pixel);
\$red = hexdec(substr(\$pixel,0,2))*0.30;
\$green = hexdec(substr(\$pixel,2,2))*0.59;
\$blue = hexdec(substr(\$pixel,4))*0.11;
return \$red+\$green+\$blue;
}

?>```

I tried the script on this image:

This is the Photoshop CS4 Find Edges filter on the desaturated image:

This is the result of the script:

This is the result of the same script using Manhattan Distance rather than Euclidean distance, changing line 33 with:

`\$gray = abs(\$conv_x)+abs(\$conv_y);`

And this is the result of the same script applying the Manhattan Distance and a gaussian blur this way:

`imagefilter(\$starting_img,IMG_FILTER_GAUSSIAN_BLUR);`

Hope you can use this concept in some of your works. I already have one use in mind… stay tuned.

215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 10000000
// 2 Cars
// 2048
// Avoider
// Ballz
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Breakout
// Bricks
// Columns
// CubesOut
// Dots
// DROP'd
// Dudeski
// Eskiv
// Filler
// Fling
// Globe
// HookPod
// Hundreds
// InkTd
// Iromeku
// Lumines
// Magick
// MagOrMin
// Maze
// Memdot
// Nano War
// Nodes
// o:anquan
// Ononmin
// Pacco
// Phyballs
// Platform
// Poker
// Pool
// Poux
// Pudi
// qomp
// Racing
// Renju
// SameGame
// Security
// Sling
// Slingy
// Sokoban
// Splitter
// Sproing
// Stack
// Stairs
// Stringy
// Sudoku
// Tetris
// Threes
// Toony
// Turn
// TwinSpin
// vvvvvv
// Wordle
// Worms
// Yanga
// Zhed
// zNumbers