Search In Site

01 July, 2013

Blurring And Sweeping Images in Visual Basic


Sweeping Images
When we created embossed and engraved images in the previous two topics, we were careful to set up our embossing or engraving loop so that when setting a pixel, we did not make use of other pixels that we had already
set in the same loop. 
The reason for that is that we only wanted to plot the difference between adjacent pixels that is, the difference between two pixels only to create embossed or engraved images. If we had not restricted our operation to two pixels we had not already worked on, and instead worked on pixels we had already set earlier, we could end up propagating a pixel’s color values among several other pixels. That is, one pixel’s setting could affect many other pixels.
In fact, there are times when you want to have that happen—for example, you might want to make an image appear as though it is sweeping from upper-left to lower-right, giving the illusion of motion. In that case, you’d copy pixels with the ones to the upper-left over and over, progressively blending them together to create the effect, where it looks as though the text has a fading trail of color behind it.
we move from lower-right to upper-left, averaging each pixel with the one to the lower-right:
For x = intUpperBoundX – 1 To 1 Step –1
For y = intUpperBoundY – 1 To 1 Step –1
bytRed = Abs((Pixels(x + 1, y + 1) And &HFF) + (Pixels(x, y)_
And &HFF)) / 2
bytGreen = Abs(((Pixels(x + 1, y + 1) And &HFF00) / &H100)_
Mod &H100 + ((Pixels(x, y) And &HFF00) / &H100) Mod_
&H100) / 2
bytBlue = Abs(((Pixels(x + 1, y + 1) And &HFF0000) / &H10000) _
Mod &H100 + ((Pixels(x, y) And &HFF0000) / &H10000) Mod_
&H100) / 2
Pixels(x, y) = RGB(bytRed, bytGreen, bytBlue)
Next y
Next x
That’s all it takes—now we copy the image into the second picture box,  picture2. (To be able to work pixel by pixel, make sure you set each picture box’s ScaleMode property to vbPixel (3).) By combining successive pixels
as we do in this example, we create the sweeping effect. Now we’re creating complex images using image handling techniques. 

Blurring Images
The Aesthetic Design Department is calling again. If you’re going to add image effects to your program, SuperDuperGraphicsPro, why not let the user blur images? You can blur images by averaging pixels. To see how this works, we load the pixels from a picture box, Picture1, and blur them, then display the result in another picture box, Picture2. To be able to work pixel by pixel, set each picture box’s ScaleMode property to vbPixel (3). As with the code in the previous few topics in this chapter, we load the pixels from Picture1 into an array named Pixels. To blur the pixels, you average them together; here, we just average each pixel with the next pixel to the right , but you can set up any blurring region you like (such as all eight pixels that surround the  current pixel). This is the way our blurring process looks in code:
For x = 1 To intUpperBoundX – 1
For y = 1 To intUpperBoundY
bytRed = Abs((Pixels(x + 1, y) And &HFF) + (Pixels(x, y) _
And &HFF)) / 2
bytGreen = Abs(((Pixels(x + 1, y) And &HFF00) / &H100) Mod _
&H100 + ((Pixels(x, y) And &HFF00) / &H100) Mod &H100) / 2
bytBlue = Abs(((Pixels(x + 1, y) And &HFF0000) / &H10000) _
Mod &H100 + ((Pixels(x, y) And &HFF0000) / &H10000)_
Mod &H100) / 2
Pixels(x, y) = RGB(bytRed, bytGreen, bytBlue)
Next y
Next x

How to Create Grayscale And lightening Images in Vb


Creating Grayscale Images
We’ve seen how to work with images bit by bit in the previous topic. We’ll augment that in this topic, where we see how to convert color images to grayscale images. We do this by reading an image into a pixel array, then by converting each of those pixels to gray and writing the pixel array out to a new image. Let’s see how this works. We’ll convert the image in a picture box, Picture1, to grayscale, and display it in a new picture box, Picture2, when the user clicks a command button, Command1. To be able to work pixel by pixel, set each picture box’s ScaleMode property to vbPixel (3).
First, we set up storage space for the image in an array named Pixels, declared in the form’s (General) section:
Const intUpperBoundX = 300
Const intUpperBoundY = 300
Dim Pixels(1 To intUpperBoundX, 1 To intUpperBoundY) As Long
When the user clicks the command button, we store the image in Picture1 into the array Pixels:
Private Sub Command1_Click()
Dim x, y As Integer
For x = 1 To intUpperBoundX
For y = 1 To intUpperBoundY
Pixels(x, y) = Picture1.Point(x, y)
Next y
Next x
Now we’re free to work with the image’s pixels in a new loop (to be efficient, this new loop should be incorporated into the first loop where we read the pixels in, but here we’ll use a new loop to make the image-handling process clear). In that new loop, we first separate out the color values (red, green, and
blue) for each pixel. To create a grayscale image, you average those color values and then use the resulting average as the red, green, and blue color values in the new image. The Point method returns a Long integer holding the red, green, and blue color values (which range from 0 to 255) in hexadecimal: &HBBGGRR. That means we can separate out the red, green, and blue color
values, storing them as the bytes bytRed, bytGreen, and bytBlue this way:
Private Sub Command1_Click()
Dim x, y As Integer
Dim bytRed, bytGreen, bytBlue As Integer
For x = 1 To intUpperBoundX
For y = 1 To intUpperBoundY
Pixels(x, y) = Picture1.Point(x, y)
Next y
Next x
For x = 1 To intUpperBoundX
For y = 1 To intUpperBoundY
bytRed = Pixels(x, y) And &HFF
bytGreen = ((Pixels(x, y) And &HFF00) / &H100) Mod &H100
bytBlue = ((Pixels(x, y) And &HFF0000) / &H10000) Mod &H100

To convert each pixel to grayscale, we just average its color values. Finally, we display the new image in a second picture box, Picture2:
Private Sub Command1_Click()
Dim x, y As Integer
Dim bytRed, bytGreen, bytBlue, bytAverage As Integer

For x = 1 To intUpperBoundX
For y = 1 To intUpperBoundY
bytRed = Pixels(x, y) And &HFF
bytGreen = ((Pixels(x, y) And &HFF00) / &H100) Mod &H100
bytBlue = ((Pixels(x, y) And &HFF0000) / &H10000) Mod &H100
bytAverage = (bytRed + bytGreen + bytBlue) / 3
Pixels(x, y) = RGB(bytAverage, bytAverage, bytAverage)
Next y
Next x
For x = 1 To intUpperBoundX
For y = 1 To intUpperBoundY
Picture2.PSet (x, y), Pixels(x, y)
Next y
Next x
End Sub

Lightening Images
The Testing Department is calling. Some of the users of your  super Duper Graphics Pro program are saying the images in that program are too dark—can you let them lighten them? Hmm, you think ,how does that work? You can lighten images by adding the same positive number to each color value (red, green, and blue) of each pixel. Let’s see how this works in an example. Here, we’ll take the image in a picture box, Picture1, and add a value specified by the user to each color value when the user clicks a command button, Command1, displaying the result in a second picture box, Picture2. To be able to work pixel by pixel, set each picture box’s ScaleMode property to vbPixel (3). We’ll also have a text box, Text1, that will hold the value the user wants to add to each color value to lighten it. We start by setting up the storage we’ll need for the image:
Const intUpperBoundX = 200
Const intUpperBoundY = 200
Dim Pixels(1 To intUpperBoundX, 1 To intUpperBoundY) As Long
Next, we place the value the user wants added to each color value in a new variable named intAddOn when the user clicks the command button:
Private Sub Command1_Click()
Dim intAddOn As Integer
intAddOn = Val(Text1.Text)
Now we read the image in Picture1 into the array named Pixels:
Private Sub Command1_Click()
Dim x, y, intAddOn As Integer
intAddOn = Val(Text1.Text)
For x = 1 To intUpperBoundX
For y = 1 To intUpperBoundY
Pixels(x, y) = Picture1.Point(x, y)
Next y
Next x
Next, we get the red, green, and blue color values for each pixel and add the value in intAddOn to those color values, making sure they don’t go higher than 255 (of course, you can also darken images by subtracting values here, although you should make sure the resulting color values don’t go below 0):
Private Sub Command1_Click()
Dim x, y, intAddOn As Integer
Dim bytRed, bytGreen, bytBlue As Integer

For x = 1 To intUpperBoundX
For y = 1 To intUpperBoundY
bytRed = Pixels(x, y) And &HFF
bytGreen = ((Pixels(x, y) And &HFF00) / &H100) Mod &H100
bytBlue = ((Pixels(x, y) And &HFF0000) / &H10000) Mod &H100
bytRed = bytRed + intAddOn
If bytRed > 255 Then bytRed = 255
bytGreen = bytGreen + intAddOn
If bytGreen > 255 Then bytGreen = 255
bytBlue = bytBlue + intAddOn
If bytBlue > 255 Then bytBlue = 255
Pixels(x, y) = RGB(bytRed, bytGreen, bytBlue)
Next y
Next x
End Sub
Finally, we just copy the new pixels to the second picture box, Picture2:
Private Sub Command1_Click()
Dim x, y, intAddOn As Integer

For x = 1 To intUpperBoundX
For y = 1 To intUpperBoundY
Picture2.PSet (x, y), Pixels(x, y)
Next y
Next x
End Sub

How to Create Image Animation in visual Basic


Creating Image Animation
One way to create image animation is to use a picture box and keep changing its Picture property to display successive frames of an animation. You can store the images themselves in the program, such as using an image list control or an array of Picture objects. We’ve seen how to create animation earlier in this book in our chapter on Visual Basic timers using image lists; here, we can do the same thing using an array of Picture objects.
We add a timer control, Timer1, to the program and set its Interval property to 1000 (the Interval property is measured in milliseconds, 1/1000s of a second), which means the Timer1_Timer() event handler will be called once a second. We also add a picture box, Picture1, in which to display images and a command button, Command1, with the caption “Start animation” to start the animation.For the purposes of this example, we will just switch back and forth between two images in the picture box. These two images are the two images in the Picture object array, picObjects, which we store in the form’s
(General) section:
Dim picObjects(1 To 2) As Picture
We load those images when the form first loads:
Private Sub Form_Load()
Set picObjects(1) = LoadPicture("c:\vbbb\pictureanimation\image1.bmp")
Set picObjects(2) = LoadPicture("c:\vbbb\pictureanimation\image2.bmp")
End Sub
To switch back and forth, we use a static Boolean flag named blnImage1 like this, alternating between images
in the Picture object array in Timer1_Timer:
Private Sub Timer1_Timer()
Static blnImage1 As Boolean
If blnImage1 Then
Picture1.Picture = picObjects(1)
Else
Picture1.Picture = picObjects(2)
End If

At the end of Timer1_Timer, we toggle the blnImage1 flag this way:
Private Sub Timer1_Timer()
Static blnImage1 As Boolean
If blnImage1 Then
Picture1.Picture = picObjects(1)
Else
Picture1.Picture = picObjects(2)
End If
blnImage1 = Not blnImage1
End Sub

All that’s left is to start the animation when the user clicks the command button, and we do that like this, by 
enabling the timer:



Private Sub Command1_Click()
Timer1.Enabled = True
End Sub
And that’s all we need—now we’re supporting animation using picture boxes and Picture object arrays.

working with Images in Visual Basic

Visual Basic has quite an array of techniques for dealing with images. In this chapter, we’ll work with bitmapped images in our programs, creating some powerful effects. We’ll see how to load images in, display them in a variety of ways, including flipping them and stretching them, creating image effects, and saving them back to disk. Images can be an asset to your program, enhancing the visual interface a great deal. We won’t work on creating images here instead, we’ll work on reading them in, working on them, and displaying them from image files on disk.
There are a number of different image formats that you use today: bitmap (.bmp), GIF, JPEG, WMF (Windows metafile format), enhanced WMF, icon (.ico), compressed bitmap (.rle), and more. Visual Basic can handle all these formats.
However, you’ll notice some anachronisms that have crept in over the years that indicate Visual Basic’s historical development 
for example, the picture clip control, which we’ll see in this chapter, can only handle bitmaps with a maximum of 16 colors. This control is still a useful one, but it has largely been superseded by the more powerful image list control.

Picture Boxes Vs. Image Controls
The main controls that programmers use to display images are image controls and picture boxes. That’s not to say there aren’t other ways to display, of course: you can load images into many controls, like buttons, and even display them in forms, as we’ll see in this chapter. However, when  programmers think of displaying and working with images, they often think of picture boxes and image controls. It’s worth noting the difference between these controls. The image control really has one main purpose: to display images. If that’s your goal, the image control is a good choice. On the other hand, picture boxes offer you a great deal more, if you need it. You can even think of picture boxes as mini-paint programs, because they include methods to let you draw text (on top of the current image in the picture box, which is good if you want to label elements in that image), draw circles, lines, boxes, and so on. 
Note, however, that the added power of picture boxes comes with an added cost in terms of heavier use of system resources. If you don’t need a picture box’s added functionality, use an image control.

Image Effects: Working With Images Bit By Bit
In this chapter, we’ll have some fun seeing how to work with images bit by bit. There are two main ways of doing that in Visual Basic: sticking with the Visual Basic methods, and using Windows methods directly.We’ll stick with the Visual Basic methods, which, although slower, are vastly easier to use and get the job done well. However, you should know that we’ll take a look at the Windows way of doing things later in the book, in the chapter on  connecting to Windows directly. (And you may have noticed our bitmapped menu item example in the chapter on menus works directly with Windows to create a bitmap object that it loads into a menu.) We’ll see quite a few image effects in this chapter: embossing images, engraving images, grayscale Images, image lightening, blurring images, making an image seem to sweep from upper left to lower right, and more. All these effects are powerful techniques that you might not expect from Visual Basic.  That’s it for the overview of images for the moment it’s time to turn to the Immediate Solutions.

Adding Images To Controls
The Aesthetic Design Department is calling again. Can’t you add some images to the controls in your program? That would make it look so much nicer.
These days, you can add images to many Visual Basic controls. For example, you can now display images in checkboxes, command buttons, and option buttons if you first set their Style property to Graphical (Style = 1), then place the name of the image file you want to use in the control’s Picture property.
At runtime, you can load a picture into the control’s Picture property using the LoadPicture function:
Private Sub Command1_Click()
Command1.Picture = LoadPicture("c:\image.bmp")
End Sub

Besides buttons, you can also display images in the Visual Basic image combo box The Windows common controls can also display images,including such controls as tree views, list views, and tab strips. There, you load the images you want into an image list control, and then connect that image list to the control using the control’s ImageList property. For more information,

Adding Images To Forms
The Aesthetic Design Department is on the phone again. The form in your program looks pretty drab. How about spicing it up with an image of the company founder? Hmm, you wonder, how would you do that? You can load an image into a form using the form’s Picture property, both at design time or at runtime. As an example, we’ve placed an image in the form. Note that the controls on that form are layered on top of the form’s image. At runtime, you can use the LoadPicture function to read in an image and display it in a form like this:
Private Sub Command1_Click()
Form1.Picture = LoadPicture("c:\image.bmp")
End Sub


Using Image Controls
You use image controls to display images. Although that might seem obvious, it’s usually the deciding factor in whether or not to use an image control or a picture box. Image controls are simple controls that don’t use many system resources, whereas picture boxes are more powerful controls that do. When
you just have an image to display, this is the control to use. You load an image into an image control using its Picture property at design time or runtime. When you load an image in at runtime, use the LoadPicture function this way:
Private Sub Command1_Click()
Image1.Picture = LoadPicture("c:\image.bmp")
End Sub

In addition, image controls size themselves to the image they display automatically, unless you set their Stretch property to True, in which case they size the image to fit themselves. Image controls support events like Click, DblClick, MouseDown, MouseMove, and MouseUp. However, they do not  support all the events that picture boxes support, such as Key events. In general, you use image controls for one purpose only: to display an image (which can include stretching that image). Both image controls and picture boxes can read in images in all the popular formats: GIF, JPEG, BMP, and so on.

Using Picture Boxes
Picture boxes are like mini-paint programs. Not only can they display images they can also create or modify them. You can use the built-in methods of picture boxes to draw text, ellipses, lines, boxes, and more, on top of the images they display.You load an image into a picture box using its Picture property at design time or runtime. When you load an image in at runtime, use the LoadPicture function this way:
Private Sub Command1_Click()
Picture1.Picture = LoadPicture("c:\image.bmp")
End Sub

 
Twitter Bird Gadget