Setting the Color of, or Painting, a Pixel

If you decide to create or design a picture using the tool resources in Microsoft Visual Studio, you would experiment, on a large scale the ability to specify the color of each individual pixel, using (a limited list of) colors:

Actually, when you have a bitmap, you can access any pixel of the picture and then you can either specify its color or get its current color.

To allow you to specify the color of a pixel, the Bitmap class provides a method named SetPixel and its syntax is:

public void SetPixel(int x, int y,	Color color)

The x and y arguments represent the left and top values of the location of the pixel. The 3rd argument specifies the new color that the pixel will hold. Here is an example:

Imports System.Drawing
Imports System.Windows.Forms

Module Exercise

    Public Class Starter
        Inherits Form

        Dim components As System.ComponentModel.Container

        Public Sub New()
            InitializeComponent()
        End Sub

        Public Sub InitializeComponent()
            BackColor = Color.Black
        End Sub

        Private Sub FormPaint(ByVal sender As Object, 
                              ByVal e As PaintEventArgs) 
                              Handles MyBase.Paint
            Dim i As Integer
            Dim j As Integer
            Dim bgDrawingArea As Bitmap = New Bitmap(Width, Height)
            e.Graphics.DrawImage(bgDrawingArea, 0, 0)

            For i = 0 To Width
                For j = 0 To Height
                    bgDrawingArea.SetPixel(i, j, Color.White)
                    Dim painter As Graphics = Graphics.FromHwnd(Handle)
                    e.Graphics.DrawImage(bgDrawingArea, 0, 0)
                    j += 20
                Next

                i += 20
            Next
        End Sub
    End Class

    Function Main() As Integer

        Dim frmStart As Starter = New Starter

        Application.Run(frmStart)

        Return 0
    End Function

End Module

We previously mentioned that a picture was a series of pixels with each pixel holding a color. As opposed to specifying the color of a pixel, you can retrieve its color. To support this, the Bitmap class is equipped with a method named GetPixel. Its syntax is:

public Color GetPixel(int x, int y)

The x and y arguments represent the left and top values of the location of the pixel whose color you want to get. This method returns the color of that pixel. 

1. To create a new program, on the main menu, click File -> New -> Project...
2. In the Templates list, click Windows Application
3. Set the Name to ColorSelector1 and click OK
4. Copy the following picture and paste it somewhere in your computer
    
   
5. Design the form as follows:
    

   Control Text Name Other Properties PictureBox   pbxColor Image: colorpal1.jpg Label Red:     TextBox   txtRed   Label Green:     TextBox   txtGreen   Label Blue:     TextBox   txtBlue   Panel   pnlPreview BorderStyle: FixedSingle Button Close btnClose

6. Right-click the form and click View Code
7. Above the public Form1() line, declare a Boolean variable named IsSelecting:
    

   Public Class Form1 Private isSelecting As Boolean End Class

8. In the Class Name combo box, select (Form1 Events)
9. In the Method Name combo box, select Load and initialize the variable as follows:
    

   Private Sub Form1Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load isSelecting = False End Sub

10. In the Class Name combo box, select pbxColor
11. In the Method Name combo box, select MouseDown  and initialize the variable as follows:
     

    Private Sub pbxColorMouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles pbxColor.MouseDown isSelecting = True End Sub

12. In the Class Name combo box, select pbxColor
13. In the Method Name combo box, select MouseUp and implement the event as follows:
     

    Private Sub pbxColorMouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles pbxColor.MouseUp isSelecting = False End Sub

14. In the Class Name combo box, select pbxColor
15. In the Method Name combo box, select MouseMove and implement the event as follows:
     

    Private Sub pbxColorMouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles pbxColor.MouseMove If isSelecting = True Then Dim bmpImage As Bitmap = CType(pbxColor.Image, Bitmap) Dim clr As Color = bmpImage.GetPixel(e.X, e.Y) txtRed.Text = clr.R.ToString() txtGreen.Text = clr.G.ToString() txtBlue.Text = clr.B.ToString() pnlPreview.BackColor = clr End If End Sub

16. Execute the application
17. Click the mouse on the picture mouse and drag to produce a color
     
    
18. Close the form

Download