Mahmoud Abas, Full-Stack Software Engineer & AI

Operating Systems 1, Lab 4

C# Graphics and Animation

Draw on a form with GDI+, then make the picture move with a Timer.

Objectives

Get a Graphics object in the Paint event and read the form's coordinates
Draw with a Pen and fill with a Brush: lines, rectangles, ellipses, arcs, polygons, text
Explain why drawing with CreateGraphics disappears and drawing in Paint stays
Build a line pattern from numbers with Math.Cos and Math.Sin
Animate with a Timer: change a position in Tick, then call Invalidate
Bounce objects off the edges, steer with the keyboard, and play frames

Part 1

Drawing with GDI+

A Graphics object, a Pen, a Brush, and pixel coordinates

The Graphics Object

Graphics: the GDI+ drawing surface of a form or control (namespace System.Drawing). Every drawing method, DrawLine, FillEllipse, DrawString, belongs to it.

Way to get one	Code	Use it when
The Paint event	`Graphics g = e.Graphics;`	you draw the form's picture (the usual way)
`CreateGraphics`	`Graphics g = this.CreateGraphics();`	you draw on a form that already exists
From an image	`Graphics.FromImage(myBitmap)`	you change an existing image

Create the Paint Handler

Click the form in the Design view
Open Properties (Alt+Enter)
Click the lightning bolt: the Events list
Find Paint and double-click it

csharp

private void Form1_Paint(object sender, PaintEventArgs e)
{
    Graphics g = e.Graphics;
    // draw here
}

The method stub Visual Studio creates, plus our first line

Coordinates on a Form

(0, 0) is the top-left corner of the client area
x grows to the right; y grows down, not up as in geometry class
The unit is the pixel: DrawLine(myPen, 2, 2, 4, 1) is almost invisible

csharp

public Form1()
{
    InitializeComponent();
    this.Width = 500;
    this.Height = 500;
}

Pen or Brush?

csharp

Pen myPen = new Pen(Color.Black);          // width 1
Pen bluePen = new Pen(Color.Blue, 3);     // width 3
SolidBrush myBrush = new SolidBrush(Color.Red);
SolidBrush orange = new SolidBrush(
    Color.FromArgb(255, 255, 140, 0));  // alpha, red, green, blue

Object	Paints	Used by
Pen	the outline	`DrawLine`, `DrawRectangle`, `DrawEllipse`, `DrawArc`, `DrawPolygon`
Brush	the inside	`FillRectangle`, `FillEllipse`, `FillPolygon`, `DrawString`

Worked Example: A Line and a Rectangle

In Form1_Paint. Predict which two points the line joins, and the four corners of the rectangle.

csharp

g.DrawLine(myPen, 20, 20, 400, 420);          // x1, y1, x2, y2
g.DrawRectangle(myPen, 100, 100, 200, 150);   // x, y, width, height

Line: from (20, 20) to (400, 420)
Top corners: (100, 100) and (300, 100)
Bottom corners: (100, 250) and (300, 250)

x₂ = x + w = 100 + 200 = 300

y₂ = y + h = 100 + 150 = 250

(x, y): top-left corner; w, h: width and height; (x_2, y_2): bottom-right corner

Worked Example: Ellipse in a Bounding Box

Predict: what shape is it, where is its centre, and does it touch the rectangle from the last slide?

csharp

g.DrawEllipse(myPen, 300, 200, 50, 50);   // the bounding rectangle: x, y, width, height

Width = height, so the ellipse is a circle of radius 25
Centre: (300 + 25, 200 + 25) = (325, 225)
Leftmost point (300, 225): on the rectangle's right side (x = 300, y from 100 to 250). They touch.

DrawArc: A Part of the Ellipse

csharp

g.DrawArc(myPen, x, y, width, height,
          startAngle, sweepAngle);

The same bounding rectangle as DrawEllipse
startAngle: degrees from the x-axis; 0 is the right-hand point
sweepAngle: how far to draw, clockwise (because y grows down)
A negative sweep draws counter-clockwise

Predict: Four Arcs

Four 100 x 100 boxes, pen width 3. Predict the part of the circle each call draws.

csharp

g.DrawArc(arcPen, x, 30, 100, 100, 0, 90);
g.DrawArc(arcPen, x, 30, 100, 100, 0, 180);
g.DrawArc(arcPen, x, 30, 100, 100, 0, -90);
g.DrawArc(arcPen, x, 30, 100, 100, 90, 180);

Four arcs in grey boxes: 0, 90 is the bottom-right quarter; 0, 180 the bottom half; 0, -90 the top-right quarter; 90, 180 the left half

Predict: The Whole Picture

The four calls so far, plus text, black pen, red brush, a 500 x 500 form. Sketch it, then compare.

csharp

g.DrawArc(myPen, 400, 100, 50, 50, 0, 90);
g.DrawString("Hello World", new Font("Arial", 16), myBrush, 150, 400);

The Shapes Program window: a diagonal line, a rectangle, a small circle touching the rectangle, a quarter arc at the top right and Hello World in red

The circle touches the rectangle at (300, 225)
The arc is the bottom-right quarter of its box
DrawString needs a Font and a brush, so the text is red
(150, 400) is the text's top-left corner

Predict: Draw, Fill, or Both?

Blue pen of width 3, orange brush. Column 1 draws, column 2 fills, column 3 fills then draws.

csharp

g.DrawRectangle(bluePen, 20, 20, 120, 80);
g.FillRectangle(orangeBrush, 170, 20, 120, 80);
g.FillRectangle(orangeBrush, 320, 20, 120, 80);
g.DrawRectangle(bluePen, 320, 20, 120, 80);
// the same three columns for Ellipse and for Polygon (a Point[] triangle)

Three rows of shapes: blue outlines, orange filled shapes without an outline, and orange shapes with a blue outline

Try It: The GDI+ Playground

Part 2

When Is the Picture Drawn?

Paint versus CreateGraphics

The Paint Event Comes Again and Again

When the form is first shown
When a hidden part is uncovered or the form is resized
When code calls Invalidate(): "repaint me when you can"
When code calls Refresh(): clear the area and repaint now

Worked Example: Paint, Load, and a Button

Paint fills a blue rectangle. Load and the button each draw a circle with CreateGraphics. Predict the window when it opens.

csharp

private void Form1_Load(object sender, EventArgs e)
{
    Graphics formGraphics = this.CreateGraphics();
    formGraphics.FillEllipse(greenBrush, 200, 70, 100, 100);
    formGraphics.Dispose();
}

private void drawButton_Click(object sender, EventArgs e)
{
    Graphics formGraphics = this.CreateGraphics();
    formGraphics.FillEllipse(redBrush, 330, 70, 100, 100);
    formGraphics.Dispose();
}

Each handler also creates and disposes its brush

The window when it opens: only the blue rectangle, no green circle

Predict: Draw Circle, Then Refresh

Click Draw circle, then click Refresh (this.Refresh();).

After Draw circle: the blue rectangle and a red circle

After Refresh: only the blue rectangle; the red circle is gone

Drawn in	After the next repaint
Paint with `e.Graphics`	drawn again: it stays
a click with `CreateGraphics`	erased: nobody draws it again
Load	never seen

Part 3

Patterns from Numbers

Two panels, four text boxes, and a little trigonometry

The Line Patterns App

The Fun With Line Patterns window: a blue control panel with four text boxes and Go, and a white canvas with a square

controlPanel: Dock = Top, holds four text boxes and Go
canvas: Dock = Fill, white; we handle its Paint event
Go runs canvas.Refresh(): clear it and raise Paint
Each line starts at the end of the previous one

One Line: From an Angle and a Length

x₂ = x₁ + L · cos(θ · π / 180)

y₂ = y₁ + L · sin(θ · π / 180)

θ_k+1 = θ_k + α L_k+1 = L_k + d

Symbol	Meaning
`(x_1, y_1)`, `(x_2, y_2)`	start and end of a line
`L`	its length (pixels)
`θ`	its angle (degrees)
`α`, `d`	the Angle and Increment boxes

The Paint Handler

csharp

int startX = canvas.Width / 2, startY = canvas.Height / 2;   // the centre
int myAngle = 0;                                             // first line points right
for (int i = 0; i < lines; i++)
{
    int endX = (int)(startX + Math.Cos(myAngle * Math.PI / 180) * myLength);
    int endY = (int)(startY + Math.Sin(myAngle * Math.PI / 180) * myLength);
    Point[] points = { new Point(startX, startY), new Point(endX, endY) };
    g.DrawLines(myPen, points);
    startX = endX;  startY = endY;           // the next line starts here
    myAngle = myAngle + turn;                // the Angle box
    myLength = myLength + step;              // the Increment box
}

lines, turn, myLength and step come from int.Parse of the four text boxes

Worked Example: 4 Lines, 90, 100, 0

The canvas is 560 x 400, so the centre is (280, 200). Predict the four end points.

Line	θ	From	To
1	0	(280, 200)	(380, 200)
2	90	(380, 200)	(380, 300)
3	180	(380, 300)	(280, 300)
4	270	(280, 300)	(280, 200)

Worked Example: 100 Lines, 74, 5, 1

Line 1 goes from (280, 200) to (285, 200). Predict the end of line 2: θ = 74, L = 6.

x₂ = 285 + 6 · cos(74°) = 286.65 → 286

y₂ = 200 + 6 · sin(74°) = 205.77 → 205

The 74 degree pattern: a growing spiral of lines near the centre

Try It: Patterns Line by Line

Part 4

Animation with a Timer

Change a number, ask for a repaint, repeat

The Timer Control

Member	Meaning
`Interval`	milliseconds between two Tick events
`Enabled`	`true`: the timer is running
`Tick`	the event; double-click the timer to create its handler

A Square That Moves

csharp

int x = 10;
int y = 70;

private void Form1_Paint(object sender, PaintEventArgs e)
{
    e.Graphics.FillRectangle(redBrush, x, y, 50, 50);
    e.Graphics.DrawString("x = " + x, this.Font, Brushes.Black, 10, 10);
}

private void timer1_Tick(object sender, EventArgs e)   // Interval = 50
{
    x += 5;
    this.Invalidate();
}

The position is a field: Paint reads it, Tick changes it
Every Tick: x grows by 5 px
Invalidate() asks Windows for a new Paint
Paint draws the square at the new x

Predict: Three Moments

x starts at 10. Predict x after 20 ticks, then look at three screenshots of the running form.

x = 10 + 5 · 20 = 110

Three screenshots about one second apart: x = 65, x = 155, x = 240, the red square further right each time

Predict: Delete Invalidate()

The Tick handler is now only x += 5;. Predict what the window shows.

Three screenshots about one second apart: the square stays at x = 10 in all three

text

tick 10 at 642 ms: x = 60
tick 30 at 1909 ms: x = 160
tick 50 at 3177 ms: x = 260

The same run's log

How Fast Does It Move?

v = s · 1000T

v = 5 · 100050 = 100

v: speed (px/s), s: step per tick (px), T: Interval (ms)

Interval	Measured gap	Ticks measured
10	16.4 ms	250
25	31.7 ms	180
50	62.6 ms	40
100	110.8 ms	28

Try It: Interval, Step and Invalidate

Part 5

Bounce, Keys and Frames

The same Tick, with a few more ideas

Move a Control and Bounce

csharp

int L1x = 5;   // fields: outside every method,
int L1y = 5;   // so they keep their value between ticks

private void timer1_Tick(object sender, EventArgs e)
{
    label1.Left -= L1x;
    label1.Top -= L1y;
    if (label1.Left + label1.Width > ClientSize.Width || label1.Left < 0)
        L1x = -L1x;   // bounce off the left or right border
    if (label1.Top + label1.Height > ClientSize.Height || label1.Top < 0)
        L1y = -L1y;   // bounce off the top or bottom border
}

Timer Interval = 25

L1x, L1y are fields: declared inside Tick, they would reset to 5 every tick
A control moves by its own Left and Top: no Paint code
|| means or: past the right edge or the left edge
Changing the sign of the speed turns the object around

Worked Example: Trace the Bounce

labelA: Left = 230, Width = 50, speed +10. ClientSize.Width = 300. Predict Left and the speed for ticks 1 to 5.

Tick	Left after the move	Left + Width > 300?	Speed after the tick
1	240	290: no	10
2	250	300: no (not greater)	10
3	260	310: yes	-10
4	250	300: no	-10
5	240	290: no	-10

Many Objects, One Timer

Four screenshots of three labels: label1 and label2 move and bounce, label3 has no code and stays put

Every object needs its own speed pair: L1x, L1y for label1, L2x, L2y for label2
label1 subtracts its speed (-=), label2 adds it (+=): they start in opposite directions
One Tick moves them all; label3 has no code yet, so it stays put

Steer with the Arrow Keys

csharp

enum Position { Left, Right, Up, Down }
Position objectPosition = Position.Right;

private void Form1_KeyDown(object sender, KeyEventArgs e)
{
    if (e.KeyCode == Keys.Left) objectPosition = Position.Left;
    else if (e.KeyCode == Keys.Right) objectPosition = Position.Right;
    else if (e.KeyCode == Keys.Up) objectPosition = Position.Up;
    else if (e.KeyCode == Keys.Down) objectPosition = Position.Down;
}

csharp

// in timer1_Tick
if (objectPosition == Position.Right) x += 5;
else if (objectPosition == Position.Left) x -= 5;
else if (objectPosition == Position.Up) y -= 5;
else if (objectPosition == Position.Down) y += 5;
this.Invalidate();

KeyDown only chooses the direction
Tick still does the moving

A Picture Instead of a Shape

csharp

Bitmap picture = new Bitmap("mushroom.png");   // a field: load once

private void Form1_Paint(object sender, PaintEventArgs e)
{
    e.Graphics.DrawImage(picture, x, y, 64, 64);
}

Add the image to the project
Set its Copy to Output Directory to Copy if newer
The program finds it next to the .exe

Four screenshots: the mushroom moves right, then down after the Down key was pressed, then left, then up

Frame-by-Frame Animation

csharp

private string[] frames = { "frames/run0.png", /* ... */ "frames/run7.png" };
private int currentFrame = 0;

private void animationTimer_Tick(object sender, EventArgs e)
{
    currentFrame = (currentFrame + 1) % frames.Length;   // 0, 1, ..., 7, 0, ...
    frameImage.Image = images[currentFrame];
}

images[] holds the 8 Bitmaps, loaded once in the constructor

A PictureBox shows one frame, SizeMode = StretchImage
% (remainder) wraps 8 back to 0, no if needed
8 frames in a loop look like running

Frame-by-Frame Animation: the Result

Three screenshots taken a moment apart show frames 7, 2 and 5 of the running figure

Predict: Move the TrackBar to 100

TrackBar Minimum = 50, Maximum = 100. Its ValueChanged handler runs animationTimer.Interval = speedBar.Value;

The TrackBar at the right end and the label frame 0, interval 100 ms

A bigger Interval means fewer ticks: the runner is slower
Measured gap: 62.8 ms at 50, 110.8 ms at 100
Right end of the bar = slowest here

Predict: A while Loop Instead of a Timer

Both buttons grow a blue panel to 300 x 200, one pixel at a time. Predict what each one looks like.

csharp

private void tmrMain_Tick(object sender, EventArgs e)  // Interval = 10
{
    if (pnlMain.Width < targetWidth) pnlMain.Width++;
    if (pnlMain.Height < targetHeight) pnlMain.Height++;
}

csharp

private void btnAnimation2_Click(object sender, EventArgs e)
{
    pnlMain.Height = targetHeight;
    while (pnlMain.Width < targetWidth)
        pnlMain.Width++;
}

A while Loop Instead of a Timer: Answer

1 and 2, Timer: the panel about 1 s and 2.5 s after the click, still growing. 3, While loop: the panel is full right after the click. An orange box marks the clicked button

About 7 minutes

Practice 1: Draw a House

csharp

Pen myPen = new Pen(Color.Black, 2);
g.DrawRectangle(myPen, 60, 120, 200, 140);      // walls
Point[] roof = { new Point(60, 120),
                 new Point(160, 40), new Point(260, 120) };
g.DrawPolygon(myPen, roof);                     // roof
g.FillRectangle(doorBrush, 140, 190, 40, 70);   // door
g.FillEllipse(windowBrush, 90, 150, 30, 30);    // window
g.DrawString("Home", new Font("Arial", 14), Brushes.Black, 135, 8);

Give the four corners of the walls and the peak of the roof
Does the door touch the bottom wall? Show the sum
The window's centre and radius

Practice 1: Answer

Walls: (60, 120), (260, 120), (60, 260), (260, 260); roof peak (160, 40)
Door bottom: 190 + 70 = 260 = the wall's bottom: yes, it stands on it
Window: centre (105, 165), radius 15

The house: a rectangle, a triangular roof, a brown door on the bottom edge, a yellow round window and the word Home

About 7 minutes

Practice 2: Bounce to the Left

labelB: Left = 20, Width = 40, speed -8. ClientSize.Width = 300. Same if as label1.

Write Left and the speed after each of ticks 1 to 5
On which tick does the speed change sign? Which part of the || is true?
What is the smallest Left the label ever has?

Practice 2: Answer

Tick	Left	Speed after the tick
1	12	-8
2	4	-8
3	-4	8
4	4	8
5	12	8

About 6 minutes

Practice 3: Predict the Pattern

Line patterns app: 5 lines, Angle 144, Length 150, Increment 0.

Compute the end of line 1 and line 2 (centre (280, 200))
Name the shape
Does line 5 end exactly at (280, 200)?

Practice 3: Answer

Line 1: (280, 200) to (430, 200)
Line 2: (430, 200) to (308, 288)
A five-pointed star: 5 * 144 = 720, two full turns
Line 5 ends at (278, 198): (int) drops a little each line

A five-pointed star drawn with five lines

About 10 minutes

Practice 4: Move label3

Start from the three-label program: label1 and label2 already bounce
Add L3x = 3 and L3y = 7, and make label3 move with += and bounce
label3 starts at Left = 150, Top = 160, size 92 x 32; ClientSize is 420 x 300
Predict: on which tick does label3 first bounce, and off which edge?

Practice 4: Answer

csharp

label3.Left += L3x;
label3.Top += L3y;
if (label3.Left + label3.Width > ClientSize.Width || label3.Left < 0)
{
    L3x = -L3x;
}
if (label3.Top + label3.Height > ClientSize.Height || label3.Top < 0)
{
    L3y = -L3y;
}

160 + 7k + 32 > 300 ⇒ k > 15.4

Tick 16, off the bottom: Top = 272, 272 + 32 = 304 > 300
Right edge: 150 + 3k + 92 > 420 needs k > 59.3, much later
Our log: tick 16: label3 (198, 272) L3y -7

Key Takeaways

Draw in Paint with e.Graphics: Windows asks for the picture again and again
(0, 0) is top-left, y grows down; shapes are given by a corner, a width and a height
Pen for outlines, Brush for insides and text; dispose what you create
Animation = a Timer that changes numbers and calls Invalidate()
Bounce by flipping the sign of the speed; speed = step × ticks per second

Open this lesson

Mahmoud AbasC# Graphics and Animation