## Posts Tagged 'Image Distortion'

### Article Purpose

This article explores the process of implementing an Image Distortion Blur filter. This image filter is classified as a non-photo realistic image filter, primarily implemented in rendering artistic effects.

Flower: Distortion Factor 15

### Sample Source Code

This article is accompanied by a sample source code Visual Studio project which is available for download here.

Flower: Distortion Factor 10

### Using the Sample Application

The sample source code that accompanies this article includes a based sample application. The concepts explored in this article have all been implemented as part of the sample application. From an end user perspective the following configurable options are available:

• Load/Save Images – Clicking the Load Image button allows a user to specify a source/input . If desired, output filtered can be saved to the local system by clicking the Save Image button.
• Distortion Factor – The level or intensity of distortion applied when implementing the filter can be specified when adjusting the Distortion Factor through the user interface. Lower factor values result in less distortion being evident in resulting . Specifying higher factor values result in more intense distortion being applied.

The following image is screenshot of the Image Distortion Blur sample application:

Flower: Distortion Factor 10

Flower: Distortion Factor 10

### Image Distortion

In this article and the accompanying sample source code are distorted through slightly adjusting each individual ’s coordinates. The direction and distance by which coordinates are adjusted differ per as a result of being randomly selected. The maximum distance offset applied depends on the user specified Distortion Factor. Once all coordinates have been updated, implementing a provides smoothing and an effect.

Applying an Image Distortion Filter requires implementing the following steps:

1. Iterate Pixels – Each forming part of the source/input should be iterated.
2. Calculate new Coordinates – For every being iterated generate two random values representing XY-coordinate offsets to be applied to a ’s current coordinates. Offset values can equate to less than zero in order to represent coordinates above or to the left of the current .
3. Apply Median Filter – The newly offset will appear somewhat speckled in the resulting . Applying a reduces the speckled appearance whilst retaining a distortion effect.

Flower: Distortion Factor 10

Flower: Distortion Factor 10

### Median Filter

Applying a is the final step required when implementing an Image Distortion Blur filter. are often implemented in reducing . The method of image distortion illustrated in this article express similarities when compared to . In order to soften the appearance of we implement a .

A can be applied through implementing the following steps:

1. Iterate Pixels – Each forming part of the source/input should be iterated.
2. Inspect Pixel Neighbourhood – Each neighbouring in relation to the currently being iterated should be added to a temporary collection.
3. Determine Neighbourhood Median – Once all neighbourhood have been added to a temporary collection, sort the collection by value. The element value located at the middle of the collection represents the neighbourhood’s value.

Flower: Distortion Factor 10

Flower: Distortion Factor 15

### Implementing Image Distortion

The sample source code defines the DistortionBlurFilter method, an targeting the class. The following code snippet illustrates the implementation:

```public static Bitmap DistortionBlurFilter(
this Bitmap sourceBitmap, int distortFactor)
{
byte[] pixelBuffer = sourceBitmap.GetByteArray();
byte[] resultBuffer = sourceBitmap.GetByteArray();

int imageStride = sourceBitmap.Width * 4;
int calcOffset = 0, filterY = 0, filterX = 0;
int factorMax = (distortFactor + 1) * 2;
Random rand = new Random();

for (int k = 0; k + 4 < pixelBuffer.Length; k += 4)
{
filterY = distortFactor - rand.Next(0, factorMax);
filterX = distortFactor - rand.Next(0, factorMax);

if (filterX * 4 + (k % imageStride) < imageStride
&& filterX * 4 + (k % imageStride) > 0)
{
calcOffset = k + filterY * imageStride +
4 * filterX;

if (calcOffset >= 0 &&
calcOffset + 4 < resultBuffer.Length)
{
resultBuffer[calcOffset] = pixelBuffer[k];
resultBuffer[calcOffset + 1] = pixelBuffer[k + 1];
resultBuffer[calcOffset + 2] = pixelBuffer[k + 2];
}
}
}

return resultBuffer.GetImage(sourceBitmap.Width,
sourceBitmap.Height).MedianFilter(3);
}```

Flower: Distortion Factor 15

### Implementing a Median Filter

The MedianFilter targets the class. The implementation as follows:

```public static Bitmap MedianFilter(this Bitmap sourceBitmap,
int matrixSize)
{
byte[] pixelBuffer = sourceBitmap.GetByteArray();
byte[] resultBuffer = new byte[pixelBuffer.Length];
byte[] middlePixel;

int imageStride = sourceBitmap.Width * 4;
int filterOffset = (matrixSize - 1) / 2;
int calcOffset = 0, filterY = 0, filterX = 0;
List<int> neighbourPixels = new List<int>();

for (int k = 0; k + 4 < pixelBuffer.Length; k += 4)
{
filterY = -filterOffset; filterX = -filterOffset;
neighbourPixels.Clear();

while (filterY <= filterOffset)
{
calcOffset = k + (filterX * 4) +
(filterY * imageStride);

if (calcOffset > 0 &&
calcOffset + 4 < pixelBuffer.Length)
{
neighbourPixels.Add(BitConverter.ToInt32(
pixelBuffer, calcOffset));
}

filterX++;

if (filterX > filterOffset)
{ filterX = -filterOffset; filterY++; }
}

neighbourPixels.Sort();
middlePixel = BitConverter.GetBytes(
neighbourPixels[filterOffset]);

resultBuffer[k] = middlePixel[0];
resultBuffer[k + 1] = middlePixel[1];
resultBuffer[k + 2] = middlePixel[2];
resultBuffer[k + 3] = middlePixel[3];
}

return resultBuffer.GetImage(sourceBitmap.Width,
sourceBitmap.Height);
}```

Flower: Distortion Factor 25

### Sample Images

This article features a number of sample images. All featured images have been licensed allowing for reproduction. The following images feature as sample images:

### Related Articles and Feedback

Feedback and questions are always encouraged. If you know of an alternative implementation or have ideas on a more efficient implementation please share in the comments section.

I’ve published a number of articles related to imaging and images of which you can find URL links here:

Advertisement

• 836,220 hits

## Follow SoftwareByDefault via Email

Enter your email address to follow and receive notifications of new posts by email.

Join 228 other subscribers