Archive Page 8

Image Filters: Colourful Processors

Overview

Today has been my best day in terms of Likes and Views on my website. I have come to the obvious conclusion that most people are more interested in seeing pretty pictures than they are in reading articles on source code.

That’s ok, I also like pretty pictures SmileI have uploaded some more eye candy. The images were created by modifying an image originally authored by Konstantin Lanzet. The original image file is licensed under the Attribution-Share Alike 3.0 Unported license, and can be downloaded from .

As a point of interest, all of the filters implemented were done through software I had written from scratch. Most of the application source code have been discussed in various articles and published here on my . All applications and related source code are of course open source.

This is what the original image looks like:


KL_Intel_D8086


After applying various colour filters and a bit of copy and paste the result:

Chips_1


Chips_2


Chips_3 


Chips_5


Chips_6


Chips_7

Image Filters: Light bulb Patterns

Overview

I’ve started development on pattern based colour filtering today. The software still needs some work, but so far the results are starting to look quite promising.

At this point I’ve only implemented variable sized checkerboard patterns. The idea being to divide an image into a number of squares and then to only include alternating squares when applying various colour filters.

Keep in mind all of the images shown below were generated from the same source image. The original image reflects a fairly standard image of a clear glass bayonet light bulb.

The original source image used to generate the images featured in this article has been licensed under the Creative Commons Attribution-Share Alike 3.0 Unported license and can be downloaded from Wikipedia.

 

LightBulb_1 LightBulb_2
LightBulb_3 LightBulb_4
LightBulb_5 LightBulb_6
LightBulb_7 LightBulb_8
LightBulb_9 LightBulb_10
LightBulb_11 LightBulb_12
LightBulb_13 LightBulb_14
LightBulb_15 LightBulb_16
LightBulb_17 LightBulb_18
LightBulb_20 LightBulb_21
LightBulb_22 LightBulb_23
LightBulb_24  

RSS Buttons: Alternative Colours

I’ve been experimenting with Colour Filter Image manipulation lately. As an example showcasing some of the possibilities I created several images based on the standard orange RSS feed icon.

The source image used in generating all the filtered images on this page has been licensed under the GNU General Public License and can be downloaded from Wikipedia.

If you are interested in the technical details behind the colour filter implementation you can browse the following C# How to articles:

 

256×256

64×64:128×128

RSS Button RSS ButtonRSS Button
RSS Button RSS ButtonRSS Button
RSS Button RSS ButtonRSS Button
RSS Button RSS ButtonRSS Button
RSS Button RSS ButtonRSS_5_x128
RSS Button RSS ButtonRSS Button
RSS Button RSS ButtonRSS Button
RSS Button RSS ButtonRSS Button
RSS Button RSS ButtonRSS Button
RSS Button RSS ButtonRSS Button
RSS Button RSS ButtonRSS Button
RSS Button RSS ButtonRSS Button
RSS Button RSS ButtonRSS Button
RSS Button RSS ButtonRSS Button
RSS Button RSS ButtonRSS Button
RSS Button RSS ButtonRSS Button
RSS Button RSS ButtonRSS Button
RSS Button RSS ButtonRSS Button
RSS Button RSS ButtonRSS Button
RSS Button RSS ButtonRSS Button
RSS Button RSS ButtonRSS Button
RSS Button RSS ButtonRSS Button

C# How to: Linq to Bitmaps – Partial Colour Inversion

Article Purpose

In this follow up article we further explore manipulating a  ’s underlying pixel data. This article is part 2 of the Linq to Bitmaps series, we’ll be focussing on partial colour inversion using queries.

Part 1: .

In my experience with previous articles I’ve written it seems that articles are better received by readers when accompanied by graphics/images. You will notice throughout this article I’ve added thumbnail images. All of the images originate from the same source image file and were created by the  accompanying sample application.

Sunflower-BlueSunflower-GreenSunflower-Invert-All-ShiftLeftSunflower-Invert-All-SwapBlueGreenFixRed200 Sunflower-Invert-All-SwapBlueRedFixGreen75

Sample source code

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

Sunflower-Invert-All-SwapRedGreenSunflower-Invert-All-SwapRedGreenFixBlue150Sunflower-Invert-BlueSunflower-Invert-Blue-GreenSunflower-Invert-BlueGreen-ShiftLeft

Using the sample Application

This article’s associated sample source code defines a sample application, detailing the concepts explored by this article. The sample application implements three types of image filters: Inverting Colours, Swapping each pixel’s colour components and Shifting pixels to different locations within the image data buffer. This article explores the Colour Inversion filter.

The image shown below is a screenshot of the Bitmap Pixel Manipulation application in action:

LinqToBitmaps_Screenshot

The sample application allows the user to specify an input source image which can then be modified by implementing an image filter. If desired the user has the option to save the new/result image to the file system.

Sunflower-Invert-BlueGreen-ShiftRightSunflower-Invert-BlueGreen-SwapBlueGreenSunflower-Invert-BlueGreen-SwapBlueGreenFixRed0Sunflower-Invert-BlueGreen-SwapBlueGreenFixRed125Sunflower-Invert-BlueGreen-SwapBlueRed

The Colour Inversion Filter

The Colour Inversion Filter can be implemented in various forms. The type of inversion is determined by the ColourInversionType , the definition as follows:

public  enum  ColourInversionType  
{
    All, 
    Blue, 
    Green, 
    Red, 
    BlueRed, 
    BlueGreen, 
    RedGreen, 
}

The following section provides an explanation of each Inversion Type:

  • All – Each Red, Green and Blue value will be subtracted from 255.
  • Blue – The value of Blue will be subtracted from 255, Green and Red values remain unchanged.
  • Green – The value of Green will be subtracted from 255, Blue and Red values remain unchanged.
  • Red – The value of Red will be subtracted from 255, Blue and Green values remain unchanged.
  • BlueRed – The value of Blue and Red will be subtracted from 255, Green  value remain unchanged.
  • BlueGreen – The value of Blue and Green will be subtracted from 255, Red value remain unchanged.
  • RedGreen – The value of Red and Green will be subtracted from 255, Blue value remain unchanged.

Sunflower-Invert-Blue-RedSunflower-Invert-BlueRed-SwapBlueGreenFixRed225Sunflower-Invert-BlueRed-SwapBlueRedFixGreen35Sunflower-Invert-BlueRed-SwapRedGreenFixBlue55Sunflower-Invert-Blue-ShiftLeft 

Applying Linq queries to Pixel Data

This article’s sample source code implements queries through the InvertColors extension method which targets the class. The definition is detailed by the following code snippet:

 public  static  Bitmap  InvertColors(this  Bitmap  sourceImage, 
                                 ColourInversionType  inversionType) 
{ 
    List <ArgbPixel > pixelListSource = GetPixelListFromBitmap(sourceImage); 

List <ArgbPixel > pixelListResult = null;
byte byte255 = 255;
switch (inversionType) { case ColourInversionType.All: { pixelListResult = (from t in pixelListSource select new ArgbPixel { blue = (byte )(byte255 - t.blue), red = (byte )(byte255 - t.red), green = (byte )(byte255 - t.green), alpha = t.alpha, }).ToList();
break; } case ColourInversionType.Blue: { pixelListResult = (from t in pixelListSource select new ArgbPixel { blue = (byte )(byte255 - t.blue), red = t.red, green = t.green, alpha = t.alpha, }).ToList();
break; } case ColourInversionType.Green: { pixelListResult = (from t in pixelListSource select new ArgbPixel {> blue = t.blue, red = t.red, green = (byte )(byte255 - t.green), alpha = t.alpha, }).ToList();
break; } case ColourInversionType.Red: { pixelListResult = (from t in pixelListSource select new ArgbPixel { blue = t.blue, red = (byte )(byte255 - t.green), green = t.green, alpha = t.alpha, }).ToList();
break; } case ColourInversionType.BlueRed: { pixelListResult = (from t in pixelListSource select new ArgbPixel { blue = (byte )(byte255 - t.blue), red = (byte )(byte255 - t.red), green = t.green, alpha = t.alpha, }).ToList();
break; } case ColourInversionType.BlueGreen: { pixelListResult = (from t in pixelListSource select new ArgbPixel { blue = (byte )(byte255 - t.blue), red = t.red, green = (byte )(byte255 - t.green), alpha = t.alpha, }).ToList();
break; } case ColourInversionType.RedGreen: { pixelListResult = (from t in pixelListSource select new ArgbPixel { blue = t.blue, red = (byte )(byte255 - t.blue), green = (byte )(byte255 - t.green), alpha = t.alpha, }).ToList();
break; } }
Bitmap resultBitmap = GetBitmapFromPixelList(pixelListResult, sourceImage.Width, sourceImage.Height);
return resultBitmap; }

The InvertColors extension method performs a simple select query returning a new instance of the ArgbPixel class adjusted according to the value of the ColourInversionType parameter passed.

Sunflower-Invert-Green-ShiftLeftSunflower-Invert-Green-SwapBlueGreenSunflower-Invert-Red-GreenSunflower-Invert-RedGreen-SwapBlueRedSunflower-Invert-RedGreen-SwapRedGreenFixBlue110

Filter implementation examples

This section contains the eye candy of this article. The following set of images were created from a single input source image. The source image has been released into the public domain and can be downloaded from Wikipedia.

The Original Image

Sunflower_USFWS

Filtered Images

Sunflower-BlueSunflower-GreenSunflower-Invert-All-ShiftLeftSunflower-Invert-All-SwapRedGreenFixBlue150Sunflower-Invert-BlueGreen-SwapBlueRedSunflower-Invert-Blue-RedSunflower-Invert-GreenSunflower-Invert-Red-GreenSunflower-Invert-RedGreen-SwapBlueRedSunflower-Invert-RedGreen-SwapRedGreenFixBlue110

Image Filters: Sunflower

The Original

This image filter features an implementation of the technical details explained in the article .

A single source/input image was used to generate the following images. The source image has been released into the and can be downloaded from .

The Original

Sunflower USFWS

Filtered Images

Sunflower ShiftLeftSunflower ShiftRightSunflower SwapBlueAndGreenSunflower SwapBlueAndGreenFixRed0Sunflower SwapBlueAndGreenFixRed100Sunflower SwapBlueAndGreenFixRed140Sunflower SwapBlueAndRedSunflower SwapBlueAndRedFixGreen0Sunflower SwapBlueAndRedFixGreen85Sunflower SwapRedAndGreenSunflower SwapRedAndGreenFixBlue0Sunflower SwapRedAndGreenFixBlue180Sunflower SwapRedAndGreenFixBlue215


Dewald Esterhuizen

Unknown's avatar

Blog Stats

  • 894,610 hits

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

Join 91 other subscribers

Archives

RSS SoftwareByDefault on MSDN

  • An error has occurred; the feed is probably down. Try again later.