Tutorial - Anti-Alias Pixels-VBForums

# Thread: Tutorial - Anti-Alias Pixels

1. ## Tutorial - Anti-Alias Pixels

Introduction:

This tutorial will teach you how to draw anti-aliased (AA) pixels.

For those who don't know what an anti-aliased pixel is, here's an explenation:
When drawing pixels you are limited to the resolution of the monitor, but with
AA-pixels you can simulate that you draw pixels inbetween the actual monitor pixels.
This will result in a really smooth look of anything you draw in your program.

I will keep this tutorial as simple as i can, and i will not use any API because
that might be hard to follow for anyone that is not that experienced with Visual Basic.
I will however attach a fast exaple using API in the last part.

Here's an image that shows what AA looks like.

2. Some theory:

Here are some illustrations that shows the pixel we want to draw.
The grid shows the pixels that the monitor has, also our boundary - We can't draw
between those pixels.

Lest say we want to draw a red pixel on X position 2.6 and Y position 2.8 - Right between
two monitor pixels. Without AA the pixels position would be rounded off and it would
be painted on X 3 and Y 3 and we can't do anything about that, that's why we simulate
that the pixel is drawn inbetween. We do this by drawing 4 pixels (because our pixel
touches 4 of the monitors pixels) with different colors depending on how much our pixel
touches the surrounding pixels.

As you can see in the illustration, our pixel only touches the (2,2) pixel a little bit,
so we draw the (2,2) pixel just a little bit read.
The illustration also shows that our pixel touches the (3,3) pixel very much, so we will
draw that one almost red.
We do like this for all the pixels we touch. (In this case there are 4 pixels, but sometimes
there are only 2 pixels ore maybe even just 1)

3. Rounding functions:

We will start off by calculating the distance to the pixel up left. ((2,2) in this case)
To to that we need to 'remove' the decimals from our X and Y, and we'll get (2,2) instead of (2.6,2.8)
There is no built in function in Visual Basic that does that so we'll have to make our own.

First we have to correct Visual Basic's Round function that will not always return the correct value,
so here's Round2

VB Code:
`Private Function Round2(Number As Double, Optional NumDigitsAfterDecimal As Long = 0) As Double    If Number - Round(Number, NumDigitsAfterDecimal) >= 0.5 / (10 ^ NumDigitsAfterDecimal) Then Round2 = Round(Number, NumDigitsAfterDecimal) + 0.1 / (10 ^ NumDigitsAfterDecimal)    If Number - Round(Number, NumDigitsAfterDecimal) < 0.5 / (10 ^ NumDigitsAfterDecimal) Then Round2 = Round(Number, NumDigitsAfterDecimal)End Function`

Now what this function do is it takes your number and checks if the decimal value is equal,
higher or lower than 0.5 and then rounds it off in the correct direction.

Now we head on to the type of round function we were after - A function that 'removes' the decimals
so we can get the upper left pixel.

VB Code:
`Private Function RoundClose(Number As Double) As Integer    If Number = Round2(Number) Then        RoundClose = Number    Else        If Number - Round2(Number) > 0 Then            RoundClose = Round2(Number)        Else            RoundClose = Round2(Number) - 1        End If    End IfEnd Function`

This function uses the Round2 function we made earlier to round off the decimals and if the number
gets rounded up to the next integer we simply subtract one from it.

4. Calculations:

Now it's time to create the function that will do the actual AA calculation.
We call the upper left pixel's coordinates cX and cY (c stands for Close)

VB Code:
`Private Sub DrawAntiAliasPixel(PicBox As PictureBox, ByVal X As Double, ByVal Y As Double, ByVal R As Integer, ByVal G As Integer, ByVal B As Integer)    Dim cX As Integer    Dim cY As Integer     cX = RoundClose(X)    cY = RoundClose(Y)End Sub`

The function takes 6 parameters which are X and Y for position and R, G and B for color values. PicBox is the PictureBox we want to draw on.

Now let's find out how to calculate the new colors of the surrounding pixels.
To do that we need to calculate how many percent of our pixel that is touching each of the surrounding
pixels.
For this we need to know how far our pixel are from each of the other pixels.
We calculate this by subtracting cX from X and cY from Y, then we get delta X and delta Y (dX,dY).
But this will only tell us the distance from one side. The dX and dY from the other side (dX2,dY2) is 1 - dX and 1 - dY.

For the upper left corner on our pixel we do dX2 * dY2, and that will give us how many percent we touch the
upper left pixel.

For the other pixels do:
Upright Pixel = dX * dY2
Downleft Pixel = dX2 * dY
Downright Pixel = dX * dY

If this is confusing take a close look at the image attached (dX2 * dY2 will give us the area of the corner
and also the percent because 100% of the area of a square with 1 lenght units on all sides is 1)

By multiplying these value with the color values, we will get how much of our pixel's color we need for each pixel.
We also need to know how much of the original color from the pixels we need, and that is the inverted value:
Upleft Pixel = 1 - dX2 * dY2
Upright Pixel = 1 - dX * dY2
Downleft Pixel = 1 - dX2 * dY
Downright Pixel = 1 - dX * dY

Now we need to extract the original colors from the background to mix with the new color. We do this by using the
Point function. But we also need to extract the red, green and blue values from that color.
To do this, we need some new functions:

VB Code:
`Private Function GetRed(ByVal Color As Long) As Byte    GetRed = Color And 255End Function Private Function GetGreen(ByVal Color As Long) As Byte    GetGreen = (Color And 65280) \ 256End Function Private Function GetBlue(ByVal Color As Long) As Byte    GetBlue = (Color And 16711680) \ 65535End Function`

Now all that's left is to create variables to hold all different values and put it all down into the function
and draw the pixels using PSet.

Here's the finished function:

VB Code:
`Private Sub DrawAntiAliasPixel(PicBox As PictureBox, ByVal X As Double, ByVal Y As Double, ByVal R As Integer, ByVal G As Integer, ByVal B As Integer)    Dim cX As Integer    Dim cY As Integer    Dim dX As Double    Dim dY As Double    Dim dX2 As Double    Dim dY2 As Double    Dim BGColor As Long    Dim BGRed As Integer    Dim BGGreen As Integer    Dim BGBlue As Integer    Dim NewRed As Integer    Dim NewGreen As Integer    Dim NewBlue As Integer    Dim Percent As Double    Dim InvPercent As Double        cX = RoundClose(X)    cY = RoundClose(Y)     dX = X - cX    dY = Y - cY    dX2 = 1 - dX    dY2 = 1 - dY        'upleft pixel    BGColor = PicBox.Point(cX, cY)    BGRed = GetRed(BGColor)    BGGreen = GetGreen(BGColor)    BGBlue = GetBlue(BGColor)        Percent = dX2 * dY2    InvPercent = 1 - Percent        NewRed = Percent * R + InvPercent * BGRed    NewGreen = Percent * G + InvPercent * BGGreen    NewBlue = Percent * B + InvPercent * BGBlue        PicBox.PSet (cX, cY), RGB(NewRed, NewGreen, NewBlue)        'upright pixel    BGColor = PicBox.Point(cX + 1, cY)    BGRed = GetRed(BGColor)    BGGreen = GetGreen(BGColor)    BGBlue = GetBlue(BGColor)        Percent = dX * dY2    InvPercent = 1 - Percent        NewRed = Percent * R + InvPercent * BGRed    NewGreen = Percent * G + InvPercent * BGGreen    NewBlue = Percent * B + InvPercent * BGBlue        PicBox.PSet (cX + 1, cY), RGB(NewRed, NewGreen, NewBlue)        'downleft pixel    BGColor = PicBox.Point(cX, cY + 1)    BGRed = GetRed(BGColor)    BGGreen = GetGreen(BGColor)    BGBlue = GetBlue(BGColor)        Percent = dX2 * dY    InvPercent = 1 - Percent        NewRed = Percent * R + InvPercent * BGRed    NewGreen = Percent * G + InvPercent * BGGreen    NewBlue = Percent * B + InvPercent * BGBlue        PicBox.PSet (cX, cY + 1), RGB(NewRed, NewGreen, NewBlue)        'downright pixel    BGColor = PicBox.Point(cX + 1, cY + 1)    BGRed = GetRed(BGColor)    BGGreen = GetGreen(BGColor)    BGBlue = GetBlue(BGColor)        Percent = dX * dY    InvPercent = 1 - Percent        NewRed = Percent * R + InvPercent * BGRed    NewGreen = Percent * G + InvPercent * BGGreen    NewBlue = Percent * B + InvPercent * BGBlue        PicBox.PSet (cX + 1, cY + 1), RGB(NewRed, NewGreen, NewBlue)End Sub`

5. Here's the fast version using some API:

(Edit: Fixed a bug in the code.)

6. The code/files within this thread (submitted: 04-05-2004) have been checked for malware by a moderator.

Disclaimer: This does not necessarily mean that any compiled files (DLL/EXE/OCX etc) are completely safe, but any supplied code does not contain any obvious malware. It also does not imply that code is error free, or that it performs exactly as described.

It is recommended that you manually check any code before running it, and/or use an automated tool such as Source Search by Minnow (available here or here).
If you find any serious issues (ie: the code causes damage or some sort), please contact a moderator of this forum.

Usage of any code/software posted on this forum is at your own risk.

7. ## Re: Tutorial - Anti-Alias Pixels

Thanks for the tute on antialiasing pixels. I have been playing around with different antialiasing modules, but have not properly understood how these work. I had a rough idea, but hopefully your tute will help with the understanding of the underlying code. I have a module created by another programmer on Planet Vb, which antialiases lines of various thicknesses and opacities. I will attach it for you to have a browse. Thanks once again for your informative tutorial.

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•

Featured