Posts Tagged 'Opensource'



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

Advertisements

C# How to: Bitmap Colour Balance

Article Purpose

This explores the concept of manipulating the of a  . values are updated by directly manipulating a ’s underlying pixel data, no GDI drawing code required.

Sample source code

This 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 concepts explored in this are easily illustrated using the Sample Application provided with the sample source code. The sample application is implemented as a .

The Bitmap Colour Balance application enables the user to load an input image file from the local file system. The user interface provides three trackbar controls representing the colour components Blue, Green and Red. Possible values range from 0 to 255 inclusive. The application performs image filtering on the specified image as the user moves the colour component sliders.

If the user desires to save modified/filtered images to the local file system the sample application makes provision through the Save Button.

The following image provides a screenshot of the Bitmap Colour Balance application in action:


BitmapColorBalance


Colour Balance

Whilst developing the sample source code and writing this I found the article on to be very informative and comprehensive. I would recommend it as a must read for developers with little or no experience around colour representation in digital imaging.

From Wikipedia we get the following quote:

In and , color balance is the global adjustment of the intensities of the colors (typically red, green, and blue ). An important goal of this adjustment is to render specific colors – particularly neutral colors – correctly; hence, the general method is sometimes called gray balance, neutral balance, or white balance. Color balance changes the overall mixture of colors in an image and is used for color correction; generalized versions of color balance are used to get colors other than neutrals to also appear correct or pleasing.

From the quoted text we determine that refers to a method of implementing image filtering as a corrective action when the colours expressed by an image vary from the expected norm.

Literally as the name implies filtering attempts to provide greater balance in image colours. The colours considered to be out of balance with the rest of the image will be filtered out to varying degrees resulting in an image having a more natural appearance.

Accessing Pixel data directly

In this we do not perform traditional drawing operations such as the functionality exposed by the GDI+ Library. We are going to explore the tasks involved in directly accessing and manipulating the pixel buffer data that underlies a object instance. In order for our changes to persist we will also explore the tasks required to re-create an instance of the class and explicitly set/populate pixel data. The tasks referred to are discussed and implemented in the following section.

Locking the bytes inside a Bitmap

In this section we’ll be exploring a brief overview of how to access a ’s underlying array of colour components. Its important to remember that colour components are ordered: Blue, Green, Red, Alpha.

To access a ’s internal array of colour components we make use of the method. From :

Use the method to lock an existing bitmap in system memory so that it can be changed programmatically. You can change the color of an image with the method, although the LockBits method offers better performance for large-scale changes.

The specifies the attributes of the , such as size, pixel format, the starting address of the pixel data in memory, and length of each scan line (stride).

When calling this method, you should use a member of the enumeration that contains a specific bits-per-pixel (BPP) value. Using values such as and will throw an . Also, passing the incorrect pixel format for a bitmap will throw an .

Why lock a in memory? The architecture behind the and memory management through the necessitates locking a in memory before accessing the underlying data. As an application executes periodically the invokes various operations. Part of the ’s function involves relocating objects in memory. As described by :

A garbage collection has the following phases:

  • A marking phase that finds and creates a list of all live objects.

  • A relocating phase that updates the references to the objects that will be compacted.

  • A compacting phase that reclaims the space occupied by the dead objects and compacts the surviving objects. The compacting phase moves objects that have survived a garbage collection toward the older end of the segment.

When locking a through invoking the method you are effectively signalling the to not relocate in memory the being locked. Consider a scenario where, whilst accessing and manipulating a array of colour components, the starts to relocate the associated instance in memory. Without warning the memory being referenced is no longer associated with the object initially referenced.

Note: If you lock a into memory you must also unlock the object by invoking the method.

The method defines a return value of type . Properties exposed by the class to pay attention to: and , as discussed in the following section.

Copying  bytes from a Bitmap

The property is described by as follows:

The stride is the width of a single row of pixels (a scan line), rounded up to a four-byte boundary. If the stride is positive, the bitmap is top-down. If the stride is negative, the bitmap is bottom-up.

In essence a scan line refers to how many are required to represent a row of pixels. A 32 bits per pixel Argb equates to each pixel occupying 4 bytes of memory. The value of the property can be calculated as [Bitmap Width x 4] : rounded up to the first multiple of 4.

Also defined by the class is the property . We can consider a as a grid of rows and columns, essentially a two dimensional array with each element being 1 . The property provides us with how many colour components are expressed by a ’s row of pixels. To determine the total number of colour components expressed by a we simply have to multiply the properties and .

The property, which is of type , is described by as follows:

Gets or sets the address of the first pixel data in the bitmap. This can also be thought of as the first scan line in the bitmap.

We now know the size of the data we want to copy, we also know the address in memory where to start copying a ’s internal colour component array. To perform the actual copy operation we invoke the method.

The ColorBalance Extension method

The crux of this can be found in the ColorBalance extension method. It is only within the ColorBalance method that we will be referencing pixel data directly. Note that this method is defined as an extension method targeting the class.

The ColorBalance method requires 3 parameters. The parameters represent the values to be used in calculating resulting Blue, Green and Red colour component values. The following code snippet details the definition of the ColorBalance method:

 public static Bitmap ColorBalance(this Bitmap sourceBitmap, byte blueLevel,  
                                    byte greenLevel, byte redLevel) 
{ 
     BitmapData sourceData = sourceBitmap.LockBits(new  ectangle (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;
float blueLevelFloat = blueLevel; float greenLevelFloat = greenLevel; float redLevelFloat = redLevel;
for (int k = 0; k + 4 < pixelBuffer.Length; k += 4) { blue = 255.0f / blueLevelFloat * (float )pixelBuffer[k]; green = 255.0f / greenLevelFloat * (float)pixelBuffer[k + 1]; red = 255.0f / redLevelFloat * (float)pixelBuffer[k + 2]; if (blue > 255) {blue = 255;} else if (blue < 0) {blue = 0;} if (green > 255) {green = 255;} else if (green < 0) {green = 0;} if (red > 255) {red = 255;} else 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; }

As discussed in previous sections we create an array of and copy the specified object’s underlying values.

The bulk of the work performed by this method happens within the for loop which iterates through the buffer of colour components. Notice how with each loop we increment by 4, the reason being each loop operation modifies 4 at a time. One pixel in terms of the ARGB format equates to 4 , thus each time we loop, we modify 1 pixel.

The formula implemented can be expressed as follows:

R = 255 / Rw * R1

G = 255 / Gw * G1

B = 255 / Bw * B1

Where Rw  Gw and Bw represents the value of a colour component believed to represent White and R1 G1 and B1 representing the original value of a colour component before implementing the colour balance formula.

The value of a colour component can only range between 0 and 255 inclusive. Before setting the newly calculated values we have to check if calculated values range between 0 and 255.

The last operation performed by the ColorBalance Extension method involves creating a new image based on the same size dimensions as the source image. Once the has been locked into memory we copy the modified buffer using the method.

Sample Images

This section illustrates a few scenarios implementing the filter.

Fun Fact: The first image is a photograph I snapped at OR Tambo International Airport, Johannesburg, South Africa. The second photograph I snapped at Hosea Kutako International Airport, Windhoek, Namibia.

The Original Image


Airport_Original1


Colour Balanced Images

 

Airport1 Airport2
Airport3 Airport4
Airport5 Airport6

The Original Image


Airport_Original2


Colour Balanced Images

 

Airport7 Airport8
Airport9 Airport10
Airport11 Airport12

Related Articles

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

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

Microsoft TouchDevelop

 Introduction

I recently discovered Microsoft TouchDevelop quite by random coincidence. From what I’ve read online it would seem that not too many people are aware of Microsoft TouchDevelop and the impressive capability this technology has to offer. Imagine simplifying the complexity of application development to the extend that the average tech savvy non-programmer can create full featured applications.

Microsoft TouchDevelop is made available by Microsoft completely free of charge. You may even implement TouchDevelop in commercial scenarios such as the Windows store, although the standard Windows store developer annual fee of $50.00 for freelance/independent developers and $100.00 for companies will be applicable.

Background

In my opinion I regard Microsoft TouchDevelop as a technology that elegantly compliments the recent paradigm shift experienced in the area of technology innovation. In the past a factor that hugely affected a project or product’s success was the technical knowledge and capability of the development team.

Over the past few years large corporations such as Microsoft invested vast amounts of time and finances on research and developing application development frameworks (consider the .net framework). By implementing the development tools available today developing technically intricate solutions have certainly become extremely efficient compared to the previously held status quo.

It appears that successful development is no longer as reliant on technical skills as seen in the past. Having access to solid development skills should not be dismissed, but development projects should now more than ever focus on the ideas behind a project. Lines of code do not sell, ideas do.

Even when considering the modern application development tools available, there is still a steep learning curve involved in studying a programming language and learning to become a programmer. Microsoft TouchDevelop fills the gap between technical skills and innovative ideas.

Creative and innovative people aren’t necessarily technically inclined, the same as how not all developers are necessarily creative or ideas people. Imagine if having a good idea and being tech savvy (not necessarily a programmer) was all you needed to create the “next buzz technology”. As a teaser: Using TouchDevelop you can describe your current GPS location simply by specifying the phrase: “describe current location” – how easy is that? The technical bits are made significantly easier, allowing you to focus on your innovative ideas.

Supported Platforms

One of the features of Microsoft TouchDevelop that stood out for me was support for multiple software and hardware platforms. TouchDevelop is implemented as a mobile application as well as a browser application.

Currently the supported browsers are:

  • Internet Explorer 10
  • Chrome 22+ for PCs, Macs, Linux
  • Firefox 16+ for PCs, Macs, Linux
  • Safari 6+ for Macs
  • Mobile Safari on iOS 6 for iPad, iPhone, iPod Touch
  • Chrome 18+ for Android

It seems that currently Windows Phone is the only supported mobile platform.

What is Microsoft TouchDevelop?

From TouchDevelop.com:

TouchDevelop is a programming environment that runs on your mobile devices. You write scripts by tapping on the screen. You do not need a separate PC or keyboard. Scripts can perform various tasks similar to regular apps. Any TouchDevelop user can install, run, edit, and publish scripts. You can share your scripts with other people by publishing them to the TouchDevelop script bazaar, or by submitting them as an app to the Windows Store or Windows Phone Store.

As explained on this  MSDN Blog:

TouchDevelop lets you create and run apps on pretty much any modern computing device you might own – from smartphones to tablets and even PCs. TouchDevelop features a predictive on-screen code keyboard and a touch-optimized programming language.

Having been designed for mobile devices from the ground up, TouchDevelop is an excellent option for programming on touchscreen devices without keyboards. You can also use it with a traditional keyboard and mouse if your device supports them.

After you have designed your fun game or a useful tool, you can share it with other people with a single tap or mouse click, so that they can run it or tweak it. More than 12,000 scripts have already been shared with over 40,000 users who have signed in to the TouchDevelop experience.

TouchDevelop is also an excellent option for learning programming. The high-level programming languages makes it super easy to create simple apps. But TouchDevelop is not just for beginners – for more complicated tasks only sky is the limit, thanks to the underlying powerful language and extensive library support.

Finally, if running your creations in the TouchDevelop environment is not enough, you can export true apps and submit them to the Windows Store or the Windows Phone Store to start earning money!

The blog post quoted above was authored by Nikolai Tillmann from Microsoft Research.

What types of applications can be developed using Microsoft TouchDevelop?

Any script created using TouchDevelop can be turned into a regular Windows Phone or Windows 8 application, dependent on certain conditions being met, as is the case with traditional app development targeting Windows Phone and Windows 8. You can even earn money if you decide to place your app on the Windows store.

I find TouchDevelop to be an extremely versatile development platform. Your biggest limitation will most likely be deciding what to create as opposed to how to implement your ideas in TouchDevelop.

You can browse apps available for download at the official TouchDevelop site. Apps range from games, music/media players, even tax calculators.

How to get started

If you are interested in creating applications using Microsoft TouchDevelop your starting point should be the official TouchDevelop website https://www.touchdevelop.com. The TouchDevelop website features a variety of documentation intended to help users in getting started.

You can create and test scripts in your browser at https://www.touchdevelop.com/app. I recommend taking a look at the code synthesis game, a game where you try and determine the natural language phrase used to create a script. 


Dewald Esterhuizen

Blog Stats

  • 653,220 hits

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

Join 220 other followers

Archives

Twitter feed


%d bloggers like this: