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.

http://www.vbforums.com/attachment.p...postid=1662906

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.

http://www.vbforums.com/attachment.p...postid=1662907

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)

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 If
End 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.

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.

http://www.vbforums.com/attachment.p...postid=1662910

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 255
End Function
 
Private Function GetGreen(ByVal Color As Long) As Byte
    GetGreen = (Color And 65280) \ 256
End Function
 
Private Function GetBlue(ByVal Color As Long) As Byte
    GetBlue = (Color And 16711680) \ 65535
End 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

Here's the fast version using some API:

(Edit: Fixed a bug in the code.)

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.

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.