Archive for the 'Wikipedia' Category



C# How to: Bitmap Colour Shading

Article Purpose

The objective of this article is focussed on exploring the concept of applying to images. The various Bitmap manipulation operations detailed in this article are all exclusively implemented by processing raw pixel data. No traditional GDI+ drawing operations are required in implementing .

Processor10 Processor11 Processor12 Processor13

Sample source code

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

Download Sample Source Code

Processor5 Processor6 Processor7 Processor9

Using the sample Application

This article has been written from a practical implementation point of view. The concepts detailed throughout this article are all coupled with a corresponding source code implementation. A sample application has been provided with this article. The  sample application has been implemented in the architecture of a , of which a complete source code implementation has also been provided. The sample application facilitates implementing and testing the concepts surrounding as discussed in this article.

Processor31 Processor22 Processor16 Processor47

In using the Bitmap Shading sample application users have the ability to select a source/input from the local file system. The user interface facilitates implementing through three trackbar controls, each associated with a  colour component. The value range of each trackbar control is defined from 0 to 100 inclusive. A value of 100 equates to no change and a value of 0 equating to the most possible change.

Processor51 Processor50 Processor49 Processor57

Users are able to save to the local file system any modified images by clicking the ‘Save Image’ button and providing a file path and file name.

The screenshot below illustrates the Bitmap Shading application in action:


BitmapShading_Screenshot


Processor25 Processor24 Processor23 Processor22

The ColorShade Extension method

The ColorShade extension method forms the crux of this article. The ColorShade method has been defined as an extension method targeting the class. It is within this method that all raw pixel manipulation occurs. In essence each pixel expressed by the specified image will be extracted upon which calculations are performed updating the value of Alpha, Red, Green and Blue colour components.

Processor28 Processor29 Processor30 Processor31

The following code snippet details the implementation of the ColorShade extension method:

 public static Bitmap ColorShade(this Bitmap sourceBitmap, float blueShade, 
                                float greenShade, float redShade) 
{
    BitmapData sourceData = sourceBitmap.LockBits(new Rectangle(0, 0, 
                            sourceBitmap.Width, sourceBitmap.Height), 
                            ImageLockMode.ReadOnly, PixelFormat.Format32bppArgb); 

byte[] pixelBuffer = new byte[sourceData.Stride * sourceData.Height];
Marshal.Copy(sourceData.Scan0, pixelBuffer, 0, pixelBuffer.Length);
sourceBitmap.UnlockBits(sourceData);
float blue = 0; float green = 0; float red = 0;
for (int k = 0; k + 4 < pixelBuffer.Length; k += 4) { blue = pixelBuffer[k] * blueShade; green = pixelBuffer[k + 1] * greenShade; red = pixelBuffer[k + 2] * redShade;
if (blue < 0) { blue = 0; }
if (green < 0) { green = 0; }
if (red < 0) { red = 0; }
pixelBuffer[k] = (byte)blue; pixelBuffer[k + 1] = (byte)green; pixelBuffer[k + 2] = (byte)red; }
Bitmap resultBitmap = new Bitmap(sourceBitmap.Width, sourceBitmap.Height);
BitmapData resultData = resultBitmap.LockBits(new Rectangle(0, 0, resultBitmap.Width, resultBitmap.Height), ImageLockMode.WriteOnly, PixelFormat.Format32bppArgb);
Marshal.Copy(pixelBuffer, 0, resultData.Scan0, pixelBuffer.Length); resultBitmap.UnlockBits(resultData);
return resultBitmap; }
Processor26 Processor1 Processor51 Processor24

In order to manipulate pixel colour component values directly we first need to lock the source into memory by invoking the method. Once the source is locked into memory we can copy the underlying pixel buffer using the method.

Processor39 Processor13 Processor64 Processor16

The next step involves iterating through the buffer of colour components. Notice how each iteration modifies an entire pixel by iterating by 4. The formula being implemented can be expressed as:

R = R1 * RS

G = G1 * GS

B = B1 * BS

In the stated equation R1 G1 and B1 represents the original value of a colour component and RS GS and BS equates to the percentage of shading expressed by each colour component. Take note that in this scenario shading percentages are defined in terms of a fractional value. As an example 45% would result in a shading factor of 0.45.

Processor59 Processor60 Processor61 Processor62

Sample Images

The original image file used in this article was authored by Konstantin Lanzet and is licensed under the Creative Commons Attribution-Share Alike 3.0 Unported license, and can be downloaded from Wikipedia.

The Original Image

KL_Intel_D8086

Colour Shaded Images

Processor6
Processor11
Processor38
Processor20
Processor22
Processor31

Related Articles

C# How to: Bitmap Colour Tint

Article Purpose

The purpose of this article is to illustrate the tasks required when implementing a colour tint on a  . The various manipulation operations detailed in this article are all exclusively implemented by processing raw pixel data. No traditional GDI+ drawing operations are required in achieving the objective of this article.

Sample source code

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

Download Sample Source Code

Using the sample Application

The sample source code defined by this article creates a , allowing for easily replicating/testing the scenarios illustrated. The Bitmap Tint sample application provides the user with the ability to select a source/input image from browsing the local file system.

The user interface enables the user to apply colour tinting to the selected source image through 3 trackbar controls. Each trackbar control represents a colour component, Red, Green or Blue. Trackbar input translate to a percentage value, where 0% equates to no change and 100% equating to the most possible change.

Modified images can persisted to the local file system through the functionality expressed by the Save Button.

The following image is a screenshot of the Bitmap Tint sample application.


BitmapTint


The ColorTint Extension method

This sample source code that accompanies this article provides the definition of the ColorTint method, an extension method targeting the class. The ColorTint method manipulates pixel colour components directly, processing the Alpha, Red, Green and Blue values expressed in a pixel.

The code snippet below details the implementation of the ColorTint extension method:

 public static Bitmap ColorTint(this Bitmap sourceBitmap, float blueTint,  
                                 float greenTint, float redTint) 
{
    BitmapData sourceData = sourceBitmap.LockBits(new Rectangle(0, 0, 
                            sourceBitmap.Width, sourceBitmap.Height), 
                            ImageLockMode.ReadOnly, PixelFormat.Format32bppArgb); 

byte[] pixelBuffer = new byte[sourceData.Stride * sourceData.Height];
Marshal.Copy(sourceData.Scan0, pixelBuffer, 0, pixelBuffer.Length);
sourceBitmap.UnlockBits(sourceData);
float blue = 0; float green = 0; float red = 0;
for (int k = 0; k + 4 < pixelBuffer.Length; k += 4) { blue = pixelBuffer[k] + (255 - pixelBuffer[k]) * blueTint; green = pixelBuffer[k + 1] + (255 - pixelBuffer[k + 1]) * greenTint; red = pixelBuffer[k + 2] + (255 - pixelBuffer[k + 2]) * redTint;
if (blue > 255) { blue = 255; }
if (green > 255) { green = 255; }
if (red > 255) { red = 255; }
pixelBuffer[k] = (byte)blue; pixelBuffer[k + 1] = (byte)green; pixelBuffer[k + 2] = (byte)red;
}
Bitmap resultBitmap = new Bitmap(sourceBitmap.Width, sourceBitmap.Height);
BitmapData resultData = resultBitmap.LockBits(new Rectangle(0, 0, resultBitmap.Width, resultBitmap.Height), ImageLockMode.WriteOnly, PixelFormat.Format32bppArgb);
Marshal.Copy(pixelBuffer, 0, resultData.Scan0, pixelBuffer.Length); resultBitmap.UnlockBits(resultData);
return resultBitmap; }

In order to manipulate pixel colour component values directly we first need to lock the source into memory by invoking the method. Once the source is locked into memory we can copy the underlying pixel buffer using the method.

The next step involves iterating through the buffer of colour components. Notice how each iteration modifies an entire pixel by iterating by 4. The tint formula can be expressed as follows:

R = R1 + (255 – R1)* RT

G = G1 + (255 – G1)* GT

B = B1 + (255 – B1)* BT

In formula above R1 G1 and B1 represents the original value of a colour component, RT GT and BT in turn represents a colour component tint percentage. Note that tint values are expressed as fractional values. As an example, if the user specified a Blue tint value of 75% on the front end, the value used in the formula equates to 0.75.

Red, Green and Blue colour component values cannot exceed 255 as a result of being values. Before assigning the newly calculated colour component values the source code first determines if calculated values exceed 255. All values exceeding 255 will be set to 255.

The last step performed is to copy the modified pixel buffer into a new object.

Sample Images

The original image has been released under the Creative Commons Attribution 3.0 License. The original image can be downloaded from Wikipedia.

The Original Image

800px-Before-sunrise-perse-rock

Tinted Images

Sunrise1
Sunrise2
Sunrise3
Sunrise4
Sunrise5
Sunrise6

Related Articles

C# How to: Bi-tonal Bitmaps

Article Purpose

The purpose of this article is to explore and illustrate the concept of creating bi-tonal images. Colour images are manipulated in such a fashion to only express two colours. The colours expressed are configurable. A threshold value determines which of the two configured colours will be applied to a pixel.

Bitonal_Banner1

Sample source code

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

Download Sample Source Code

Bitonal_Banner2

Using the sample Application

The concepts explored in this article are easily illustrated using the Sample Application provided with the sample source code. The sample application is implemented as a Windows Forms application.

The Bi-tonal Bitmap application enables the user to load an input image file from the local file system. The user interface defines two panels representing the two colours used when creating the resulting bi-tonal . When clicking on either panel the user will be presented with a colour dialog, allowing the user to change the colour of the specific panel.

The user interface also provides a trackbar which allows the user to set the threshold used to calculate if a pixel colour should be set to the dark colour or light colour value.

If the user desires to save resulting bi-tonal images to the local file system the sample application makes provision through the Save Button.

The following image provides a screenshot of the Bi-tonal Bitmap application in action:


BiTonalBitmap_Screenshot


The Bitonal Extension Method

The Bitonal Extension method defines all of the operations involved in creating Bi-tonal images. This method is an extension method targeting the class. Note that the Bitonal extension method manipulates pixel colour components directly, in other words updating a pixel’s Alpha, Red, Green and Blue values directly.

The following code snippet provides the definition of the Bitonal method:

 public static Bitmap Bitonal(this Bitmap sourceBitmap, Color darkColor, 
                                     Color lightColor, int threshold) 
{
    BitmapData sourceData = sourceBitmap.LockBits(new Rectangle (0, 0, 
                                sourceBitmap.Width, sourceBitmap.Height), 
                                ImageLockMode.ReadOnly, PixelFormat.Format32bppArgb); 

byte[] pixelBuffer = new byte[sourceData.Stride * sourceData.Height];
Marshal.Copy(sourceData.Scan0, pixelBuffer, 0, pixelBuffer.Length);
sourceBitmap.UnlockBits(sourceData);
for (int k = 0; k + 4 < pixelBuffer.Length; k += 4) { if (pixelBuffer[k] + pixelBuffer[k + 1] + pixelBuffer[k + 2] <= threshold) { pixelBuffer[k] = darkColor.B; pixelBuffer[k + 1] = darkColor.G; pixelBuffer[k + 2] = darkColor.R; } else { pixelBuffer[k] = lightColor.B; pixelBuffer[k + 1] = lightColor.G; pixelBuffer[k + 2] = lightColor.R; } }
Bitmap resultBitmap = new Bitmap(sourceBitmap.Width, sourceBitmap.Height);
BitmapData resultData = resultBitmap.LockBits(new Rectangle (0, 0, resultBitmap.Width, resultBitmap.Height), ImageLockMode.WriteOnly, PixelFormat.Format32bppArgb);
Marshal.Copy(pixelBuffer, 0, resultData.Scan0, pixelBuffer.Length); resultBitmap.UnlockBits(resultData);
return resultBitmap; }

In order to manipulate pixel colour component values directly we first need to lock the source into memory by invoking the method. Once the source is locked into memory we can copy the underlying pixel buffer using the method.

The next step involves iterating through the buffer of colour components. Notice how each iteration modifies an entire pixel by iterating by 4. In order to determine to which colour a pixel should be set, the sum of Red, Green and Blue colour components is to the threshold parameter.

The last step performed is to copy the modified pixel buffer into a new object.

Bitonal_Banner1

Sample Images

The original source used to create all of the bi-tonal sample images in this article has been licensed under the Creative Commons Attribution-Share Alike 3.0 Unported, 2.5 Generic, 2.0 Generic and 1.0 Generic license. The original image is attributed to Kenneth Dwain Harrelson and can be downloaded from Wikipedia.

The Original Image


Monarch_In_May


Bi-tonal Images

 

Butterfly1 Butterfly2
Butterfly3 Butterfly4
Butterfly5 Butterfly6
Butterfly7 Butterfly8
Butterfly9 Butterfly10
Butterfly11 Butterfly12

Related Articles

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

RSS Feed Buttons

Overview

I’ve been experimenting with 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 and can be

If you are interested in the technical details behind the implementation you can browse the C# How to articles at and .

RSS Buttons

The following section provides a thumbnails preview of the images I created. Please note that all images have the size dimension of 2000×2000 pixels. I’ve opted to provide high resolution images to accommodate better results should images be edited further. It is not recommended using high resolution images directly due to larger file sizes when compared to typically used lower resolution images. Reducing image resolution is a fairly straight forward task easily achieved using most image editing software.

Images are provided under the . You are free to download, modify and redistribute the images.

To download an image simply click on the relevant thumbnail.

RSS Button Blue Grey RSS Button Bright Green RSS Button Brown LightBlue RSS Button Brown LightPurple RSS Button DarkBlue RSS Button DarkBlue RSS Button DarkBlue LightBlue RSS Button DarkBlue Red RSS Button DarkOrange LightOrange RSS Button DarkPink LightPurple RSS Button DarkPurple Blue RSS Button DarkPurple LightPurple RSS Button DarkPurple MediumBlue RSS Button Green DarkPink RSS Button Green LightBlue RSS Button LightBlue RSS Button Maroon Purple RSS Button Orange Yellow RSS Button PinkTint RSS Button PurpleTint RSS Button SeaGreen LightYellow RSS Button Violet DarkPink RSS Green Button RSS Purple Button


Dewald Esterhuizen

Blog Stats

  • 735,750 hits

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

Join 223 other followers

Archives

Twitter feed


%d bloggers like this: