Lesson 28: Mastering Ellipse & Circle Drawing in VB2022

Learn GDI+ techniques for drawing ellipses and circles with practical VB.NET examples for creating dynamic graphics

Key Takeaway

In VB2022, circles are special ellipses where width and height are equal. Mastering ellipse drawing gives you complete control over circular shapes.

Welcome to Lesson 28 of our Visual Basic 2022 Tutorial! In this lesson, you'll learn how to draw ellipses and circles using VB2022's powerful GDI+ tools. These techniques are essential for creating graphics, charts, and visual elements in your applications.

28.1 Understanding Ellipse Drawing

Ellipses in VB2022 are defined by an invisible bounding rectangle. The fundamental principle involves creating a Rectangle object that defines the ellipse's boundaries.

1. Bounding Rectangle

Ellipses are defined by a bounding rectangle

2. DrawEllipse Method

Primary method for drawing ellipses

3. Circle = Special Ellipse

Circles are ellipses with equal width/height

Ellipse bounded by rectangle
Figure 28.1: Ellipse bounded by a rectangle

Pro Tip: Coordinate System

Remember that in VB2022's coordinate system, the origin (0,0) is at the top-left corner of the drawing surface.

28.2 Drawing Ellipses: Practical Examples

Create ellipses with border and fill options using the DrawEllipse and FillEllipse methods:

Example 28.1: Basic Ellipse Drawing

This example demonstrates how to draw a basic ellipse:

BasicEllipse.vb
Private Sub BtnDrawEllipse_Click(sender As Object, e As EventArgs) Handles BtnDrawEllipse.Click
    ' Create graphics object
    Dim g As Graphics = Me.CreateGraphics()
    
    ' Create a pen for the border
    Dim borderPen As New Pen(Color.Blue, 3)
    
    ' Create a brush for filling
    Dim fillBrush As New SolidBrush(Color.LightSkyBlue)
    
    ' Define ellipse position and size
    Dim rect As New Rectangle(50, 50, 200, 150)
    
    ' Draw the ellipse border
    g.DrawEllipse(borderPen, rect)
    
    ' Fill the ellipse
    g.FillEllipse(fillBrush, rect)
    
    ' Clean up resources
    borderPen.Dispose()
    fillBrush.Dispose()
    g.Dispose()
End Sub

Ellipse Drawing Result

Blue ellipse with light blue fill
Figure 28.2: Basic ellipse drawing

28.3 Drawing Circles

Circles are special ellipses where width equals height. The same methods are used for drawing circles.

Example 28.2: Drawing a Circle

This example demonstrates how to draw a circle:

DrawCircle.vb
Private Sub BtnDrawCircle_Click(sender As Object, e As EventArgs) Handles BtnDrawCircle.Click
    Dim g As Graphics = Me.CreateGraphics()
    
    ' Create a pen for the border
    Dim borderPen As New Pen(Color.DarkGreen, 4)
    
    ' Create a brush for filling
    Dim fillBrush As New SolidBrush(Color.LightGreen)
    
    ' Define circle position and size (width = height)
    Dim rect As New Rectangle(100, 50, 150, 150)
    
    ' Draw the circle border
    g.DrawEllipse(borderPen, rect)
    
    ' Fill the circle
    g.FillEllipse(fillBrush, rect)
    
    ' Clean up resources
    borderPen.Dispose()
    fillBrush.Dispose()
    g.Dispose()
End Sub

Circle Drawing Result

Green circle with light green fill
Figure 28.3: Circle drawing with equal width and height

28.4 Advanced Techniques

VB2022 allows for creative implementations with ellipses and circles:

1 Gradient Fills

Use LinearGradientBrush for smooth color transitions

2 Pattern Generation

Create complex patterns with nested ellipses

3 Interactive Drawing

Implement mouse-based drawing tools

Example 28.3: Concentric Circles

Create multiple circles sharing the same center point:

ConcentricCircles.vb
Private Sub BtnConcentric_Click(sender As Object, e As EventArgs) Handles BtnConcentric.Click
    Dim g As Graphics = Me.CreateGraphics()
    Dim centerX As Integer = 200
    Dim centerY As Integer = 150
    
    For radius As Integer = 20 To 100 Step 20
        ' Create a pen with varying color intensity
        Dim myPen As New Pen(Color.FromArgb(0, 0, 200 - radius * 2), 2)
        
        ' Calculate top-left position
        Dim x As Integer = centerX - radius
        Dim y As Integer = centerY - radius
        
        ' Draw the circle
        g.DrawEllipse(myPen, x, y, radius * 2, radius * 2)
        
        ' Clean up pen
        myPen.Dispose()
    Next
    
    g.Dispose()
End Sub

Concentric Circles Result

Concentric circles with varying shades of blue
Figure 28.4: Concentric circles with color gradient

Example 28.4: Ellipse Pattern Generator

Create a grid of ellipses with random colors and sizes:

EllipsePattern.vb
Private Sub BtnPattern_Click(sender As Object, e As EventArgs) Handles BtnPattern.Click
    Dim g As Graphics = Me.CreateGraphics()
    Dim rand As New Random()
    
    ' Clear the form
    g.Clear(Me.BackColor)
    
    ' Draw 4x4 grid of ellipses
    For row As Integer = 0 To 3
        For col As Integer = 0 To 3
            Dim x As Integer = 30 + col * 100
            Dim y As Integer = 30 + row * 100
            Dim width As Integer = 80 + rand.Next(-20, 20)
            Dim height As Integer = 60 + rand.Next(-15, 15)
            
            ' Create random color
            Dim color As Color = Color.FromArgb(rand.Next(256), rand.Next(256), rand.Next(256))
            
            ' Create pen and brush
            Dim myPen As New Pen(Color.Black, 2)
            Dim myBrush As New SolidBrush(color)
            
            ' Create rectangle
            Dim rect As New Rectangle(x, y, width, height)
            
            ' Draw filled ellipse
            g.FillEllipse(myBrush, rect)
            
            ' Draw border
            g.DrawEllipse(myPen, rect)
            
            ' Clean up
            myPen.Dispose()
            myBrush.Dispose()
        Next
    Next
    
    g.Dispose()
End Sub

Ellipse Pattern Result

Grid of colored ellipses
Figure 28.5: Grid of randomly colored ellipses

Example 28.5: Gradient Filled Ellipse

Create an ellipse with a gradient fill using LinearGradientBrush:

GradientEllipse.vb
Private Sub BtnGradient_Click(sender As Object, e As EventArgs) Handles BtnGradient.Click
    Dim g As Graphics = Me.CreateGraphics()
    
    ' Create a custom pen
    Dim myPen As New Pen(Color.Purple, 4)
    myPen.DashStyle = Drawing.Drawing2D.DashStyle.DashDot
    
    ' Create gradient brush
    Dim gradBrush As New Drawing2D.LinearGradientBrush(
        New Point(50, 50),
        New Point(250, 200),
        Color.Yellow,
        Color.Orange)
    
    ' Define ellipse
    Dim rect As New Rectangle(50, 50, 200, 150)
    
    ' Draw filled ellipse
    g.FillEllipse(gradBrush, rect)
    
    ' Draw border
    g.DrawEllipse(myPen, rect)
    
    ' Clean up
    myPen.Dispose()
    gradBrush.Dispose()
    g.Dispose()
End Sub

Gradient Ellipse Result

Ellipse with gradient fill
Figure 28.6: Ellipse with gradient fill and custom border

Ellipse & Circle Drawing Summary

Master these essential techniques for drawing ellipses and circles in VB2022:

Concept Description Key Methods
Basic Ellipse Oval shape with border DrawEllipse(), Rectangle
Filled Ellipse Ellipse with solid fill FillEllipse(), SolidBrush
Circle Special ellipse with equal dimensions DrawEllipse() with equal width/height
Gradient Fills Color transitions in shapes LinearGradientBrush
Pattern Creation Multiple shapes in patterns Loops with position calculations

Best Practices

Always dispose of Graphics, Pen, and Brush objects. Use double buffering for animations to prevent flickering.

Performance Tips

For complex drawings, create a Bitmap object and draw to it, then render the bitmap to the screen.

Advanced Features

Explore texture brushes, hatch brushes, and custom pen styles for professional graphics.

Practical Exercises

Apply your ellipse and circle drawing knowledge with these hands-on exercises:

Exercise 1: Gradient Circles

Create a program that draws a circle with a radial gradient fill instead of a solid color.

Exercise 2: Interactive Ellipse Drawing

Develop an application where users can draw ellipses by clicking and dragging the mouse.

Exercise 3: Animated Solar System

Create an animated solar system with a central sun (circle) and orbiting planets (ellipses) using a Timer control.

Exercise 4: Target Practice

Draw a target pattern with concentric circles alternating between two colors.

Exercise 5: Ellipse Art Generator

Generate abstract art using randomly positioned and colored ellipses of various sizes.

Challenge Exercise: Ellipse Resizer

Create a program with trackbars that allow users to adjust the width and height of an ellipse in real-time.

Next Lesson

Learn how to draw text with various fonts and styles in Lesson 29: Drawing Text.

Related Resources

VB6 Tutorial

Mastering VB6 Programming

Explore Tutorials

Visual Basic Examples

Practical VB code samples for real-world applications

View Examples

Excel VBA Tutorial

Learn how to automate Excel by creating VBA macros

Learn More