DEMOCRITUS
UNIVERSITY
OF THRACE
DEMOCRITUS
UNIVERSITY
OF THRACE
Mathematical morphology is a branch of mathematical image processing and computer vision that deals with the analysis and processing of geometric structures in images and other spatially organized data. It was introduced by the French mathematician Georges Matheron in the 1960s and further developed by Jean Serra.
The fundamental concept in mathematical morphology is the use of structuring elements, also known as kernels or masks, to probe an image or data set in order to extract meaningful information. These structuring elements are small patterns or shapes, often represented as binary matrices or sets of coordinates. They are used to explore and modify the pixels or elements of an image based on their spatial arrangement.
The main operations in mathematical morphology include:
Normal Image
Grayscale Image
Erosion
Erosion is an operation that reduces the size of bright regions (foreground) in an image by scanning the image with a structuring element and setting the center pixel of the structuring element to the minimum value in the neighborhood. It erodes the boundaries of the regions.
Dilation
Dilation is the opposite of erosion. It increases the size of bright regions in an image by scanning the image with a structuring element and setting the center pixel of the structuring element to the maximum value in the neighborhood.
Opening
Opening is a combination of erosion followed by dilation. It helps to remove small objects and noise from an image while preserving the overall shape of larger structures.
Closing
Closing is the reverse of opening, combining dilation followed by erosion. It helps to fill small gaps and holes in objects while preserving the overall structure.
Hit-or-miss transform
This operation is used to detect specific patterns in an image by defining two structuring elements, one for the foreground and one for the background.
The morphological operations first applied to binary images and later for grayscale images, and even other types of spatially organized data beyond images.
-The second image was the first idea but it has a lot more glitches compared to the third one. Basically the paths' length that lead to the output was different for each input so, for instance the last input (Input9-with blue color) is changing faster from 1 to -1, than the other input. (Keep in mind that the gate has 3 inputs. First is set to positive 1(orange color), second one is the combination of the previous ones(green color) and the third is Input9(blue color)). So if green is -1 and blue is -1, and we have a change to our inputs, the blue one will change first and this may resolve in an unexpected behavior of the out put.
-Now the third image is a better way of dealing with that (length) problem leading to a less glitchy output. Still though it is not perfect.
-To describe the images starting from the first one. We have 9 inputs and 1 output. The inputs form a neighborhood (3x3 table) and the output is the center of the table. The first image has already set a value of 1(orange color) in the circuit. This means that if at least one other input is 1 (one of nine) the output eventually will be 1 so the center pixel of the image will became white (we consider 1 is #fff). So in the end if you have on the neighborhood at least one 1, the center pixel of an image will become white (dilation).
-The same principle applies for images 2 and 3 but in reverse. Now if at least one input (in the neighbor) is -1 the center pixel will become black (erosion).
-On image 4 you can see the inputs and the output together in a diagram.
-Also you can always click the picture to enlarge it.
-Here you are able to customize your own Image.
-You can upload any Image as long as it's jpg, jpeg, png or ico otherwise console.log will print false.
-There is no database so the image (as also the rendering) is executed completely in your PC.
-The neighborhood is set to 11(array of 11x11) in order for the rendering to be visible. If neighborhood was a 3x3 or 5x5 area the effect wouldn't be so distinct. This way it would only make some difference in lower resolution images.
-Also (except from grayscale) the options may take about 10-20sec to render.
Thanks for your attention!