Widgets/Transformer

Convolution Filter Widget

Convolution Filter Widget

A "Transformer" type widget. Convolution Filter Widget applies a 3x3 convolution matrix to process images. It's particularly useful for edge detection, blurring, sharpening, and other image processing operations.

 

Inputs

  • image (DataType: ImageData) The input image to which the convolution filter will be applied.

Outputs

  • image (DataType: ImageData) The processed image after applying the convolution filter.

Custom Settings

Matrix — Configure the 3x3 convolution matrix to define the filter operation. The default matrix is an edge detection filter:

[ -1   0   1 ]

[ -2   0   2 ]

[ -1   0   1 ]

Convolution Matrix Settings

 

📌 Important Note

  • The video demonstrations use the Image Drop service to load images dynamically. If you want to replicate the example exactly as shown in the video, you’ll need to install and use this service.
  • For the draggable examples in Logic Mapper, Base64 image data is used so you can try them out immediately.

 

Examples

Edge Detection

This example demonstrates how to detect edges in an image:


Drag the example onto the workspace to explore and experiment!



In this example:

  1. The Drop Images widget provides an image as input to the Convolution Filter widget
  2. The Convolution Filter widget applies a Laplacian edge detection matrix [-1,-1,-1,-1,8,-1,-1,-1,-1] to process the image
  3. The Display widget shows the resulting image with highlighted edges against a dark background

 

Light Effect

This example simulates lighting from above casting shadows below:


Drag the example onto the workspace to explore and experiment!



In this example:

  1. The Drop Images widget provides an image as input to the Convolution Filter widget
  2. The Convolution Filter widget applies a simulated lighting matrix [0,0,0,1,5,1,-1,-1,-1] to process the image
  3. The Display widget shows the resulting image with enhanced shadows beneath objects, simulating top-down lighting effects

 

📌 Additional Notes

  • The convolution matrix operation is performed using a 3x3 matrix

  • The matrix values determine the type of filter effect:

    • Edge detection: Uses differences between neighboring pixels
    • Blur: Uses averaging of neighboring pixels
    • Sharpen: Enhances differences between the center pixel and its neighbors

  • The widget preserves the original image dimensions

  • Alpha channel handling is supported

  • Processing time may vary depending on image size

 

Glossary

  • Alpha Channel

    A channel in image data that represents transparency information, allowing pixels to be partially or fully transparent.

  • Base64

    A way to convert binary data (like images) into text format using only letters, numbers, and a few symbols. This allows binary data to be stored or transmitted as text, making it easier to embed images directly in code or examples.

    Base64 To Image Widget: Converts Base64 encoded image strings into ImageData format that can be processed by other image widgets in Kemu.

  • Convolution Matrix

    A mathematical grid used in image processing to apply filters and effects by calculating weighted sums of neighboring pixels.

    How the Matrix Works

    The convolution matrix is a template that processes each pixel by looking at its 3x3 neighborhood. Each number in the matrix influences how much weight is given to the corresponding neighbor:

    • Negative values: reduce intensity (highlight differences)

    • Zero values: ignore that neighbor

    • Positive values: increase intensity

    The calculation works as follows:

    1. Place the matrix over each pixel in the image
    2. Multiply each matrix value by the corresponding pixel value
    3. Add up all the results
    4. Use this sum as the new value for the central pixel

    For example, in edge detection, the matrix emphasizes areas with sharp intensity changes. High results mark edges, while low results correspond to flat regions.

  • Laplacian

    A mathematical operator used in edge detection that highlights areas of rapid intensity change in images.

  • Logic Mapper

    Kemu's visual programming interface where users can drag and drop widgets to create workflows and connect them together to process data.