Loops and Graphics in Small

Basic

For…EndFor

While…EndWhile

Graphics in Small Basic

 Small Basic Looping Statements
and Graphics
• In computer programming, a loop is used to repeat a
block of statements a number of times.

• There are two statements that let us execute loops in

Small Basic:

For…EndFor While…EndWhile

©Oxford University Press Small Basic Looping Stateme 2

 For…EndFor
• The For…EndFor statement provides an easy way to
create a loop.

– It is used to repeat a block of statements a specified

number of times.

– When the number of repetition is known beforehand, this

looping statement is preferred.

©Oxford University Press Small Basic Looping Stateme 3

 • Consider the following Explanation:
program to print the
Variable (A) is
numbers 1 to 5: assigned the start
value (1)

For A = 1 To 5
TextWindow.WriteLine (A) FALSE Check
whether A
EndFor <= 5

TRUE

Gets out of the Execute the

For…EndFor statements between
looping For…EndFor
statement
• The value of
variable (A) is
incremented by 1

©Oxford University Press Small Basic Looping Stateme 4

 • Consider the following
program to print the
numbers 1 to 5:

For A = 1 To 5
TextWindow.WriteLine (A)
EndFor

The output will appear as

shown here.

©Oxford University Press Small Basic Looping Stateme 5

 • The step-by-step execution of the program is as follows:

A Condition True or What happens?

False
1 1 <= 5 T • The statement between For…EndFor is
executed
o The value of A (1) is printed on the screen
o The value of A is increased by 1, becomes 2
2 2 <= 5 T • The statement between For…EndFor is
executed
o The value of A (2) is printed on the screen
o The value of A is increased by 1, becomes 3
3 3 <= 5 T • The statement between For…EndFor is
executed
o The value of A (3) is printed on the screen
o The value of A is increased by 1, becomes 4

©Oxford University Press Small Basic Looping Stateme 6

 • The step-by-step execution of the program is as follows:
A Condition True or What happens?
False
4 4 <= 5 T • The statement between For…EndFor is
executed
o The value of A (4) is printed on the screen
o The value of A is increased by 1, becomes 5
5 5 <= 5 T • The statement between For…EndFor is
executed
o The value of A (5) is printed on the screen
o The value of A is increased by 1, becomes 6
6 6 <= 5 F • The For…EndFor ends

Step
• If you want the variable value to be incremented by some
number (may be positive or negative) other than 1.
– You can use Step in the For statement.
©Oxford University Press Small Basic Looping Stateme 7
 Step
• If you want the variable value to be incremented by some
number (may be positive or negative) other than 1.
– You can use Step in the For statement.

©Oxford University Press Small Basic Looping Stateme 8

 • Consider the following code:
For A = 1 To 20 Step 3
TextWindow.WriteLine (A)
EndFor

• Here, the value of A is

incremented by 3 after every
loop.

• If you do not use Step,

the value of A is
incremented by the default
The output will appear as
value of 1. shown here.

©Oxford University Press Small Basic Looping Stateme 9

 • The Step value can be negative.

– In this case the start value is greater than or equal to the

end value.

• Consider the following code:

For A = 20 To 1 Step -4
TextWindow.WriteLine (A)
EndFor

The output will appear as

shown here.

©Oxford University Press Small Basic Looping Stateme 10

 • You can also use any decimal number as the Step value.

• Consider the following code:

For A = 1 To 5 Step 0.5

TextWindow.WriteLine (A)
EndFor

The output will appear as

shown here.

©Oxford University Press Small Basic Looping Stateme 11

 While…EndWhile
• The While…EndWhile loop is used when the loop count
is not known beforehand.

– The condition after While evaluates to either true or false.

– The statements between While…EndWhile loop are

repeatedly executed until the condition becomes false.

©Oxford University Press Small Basic Looping Stateme 12

 • Consider the following code to print the numbers 1 to 15
incremented by 4:

Number = 1
While Number <= 15
TextWindow.WriteLine (Number)
Number = Number + 4
EndWhile

The output will appear as

shown here.

©Oxford University Press Small Basic Looping Stateme 13

 • The step-by-step execution of the program is as follows:

A Condition True or What happens?

False
1 1 <= 5 T • The statement between While…EndWhile
is executed.
o The value of Number (1) printed on screen.
o The value of Number is increased by 4,
becomes 5.
2 5 <= 15 T • The statement between While…EndWhile
is executed
o The value of Number (5) printed on screen.
o The value of Number is increased by 4,
becomes 9.

©Oxford University Press Small Basic Looping Stateme 14

 • The step-by-step execution of the program is as follows:

A Condition True or What happens?

False
3 9 <= 15 T • The statement between While…EndWhile
is executed.
o The value of Number (9) printed on screen.
o The value of Number is increased by 4,
becomes 13.
4 13 <= 15 T • The statement between While…EndWhile
is executed.
o The value of Number (13) printed on screen.
o The value of Number is increased by 4,
becomes 17.
5 17 <= 15 F • The statement While…EndWhile ends.

©Oxford University Press Small Basic Looping Stateme 15

 Graphics in Small Basic
• The GraphicsWindow object is used to draw lines, shapes
and, text in many colours.

• The coordinates used by the graphics window are:

©Oxford University Press Small Basic Looping Stateme 16

 • The window is Width pixel wide and Height pixels
high.

• The two values of the coordinates identify the pixel in the

window.

Height
x (x,y)

Width

©Oxford University Press Small Basic Looping Stateme 17

 • At the top left corner, the x and y coordinates are (0,0).

– The x co-ordinate increases from left to right.

– The y co-ordinate increases from top to bottom.

(0,0) y

Height
x (x,y)

Width

©Oxford University Press Small Basic Looping Stateme 18

 GraphicsWindow Properties
GraphicsWindow properties Explanation Default
with example value
GraphicsWindow.Width = 400 • It sets the width of the 624
graphics window.

GraphicsWindow.Height = • It sets the height of the 444

600 graphics window.

GraphicsWindow.Title = “ • It sets the title of the Small

Example Program” graphics window. Basic

GraphicsWindow.BackgroundC • It sets the background White

olor = “Yellow” colour of the graphics
window.

©Oxford University Press Small Basic Looping Stateme 19

 GraphicsWindow Properties
GraphicsWindow properties Explanation Default
with example value
GraphicsWindow.PenColor = • It sets the colour of the Black
“Red” pen used to draw
shapes on the graphics
window to red.
GraphicsWindow.PenWidth = • It sets the width of the 2
3 pen used to draw
shapes on the graphics
window to 3.
GraphicsWindow.BrushColor • It sets the colour of the SlateBlue
= “Pink” brush which is used to
fill shapes drawn on the
graphics window.

©Oxford University Press Small Basic Looping Stateme 20

 • You can draw text in the graphics window
– The font used to draw text in the graphics window is
specified by four different properties:
GraphicsWindow properties Explanation Default
with example value
GraphicsWindow.FontName = • It sets the font to Arial. Tahoma
“Arial”
GraphicsWindow.FontSize = • It sets the font size to 12
22 22.
GraphicsWindow.FontBold = • It has two values – true true
“true” and false.
o The true value makes
the font bold.

GraphicsWindow.FontItalic • It has two values – true false

= “true” and false.
o The true value makes
the font italics.

©Oxford University Press Small Basic Looping Stateme 21

 Graphics Window Methods
Methods
DrawLine (x1, y1, x2, y2)
DrawRectangle (x, y, w, h)
DrawTriangle(x1, y1, x2,
y2, x3, y3)
DrawEllipse(x, y, w, h)
©Oxford University Press Small Basic Looping Stateme
Explanation
• It draws a line from one point (x1,
y1) to another (x2, y2) using the
current pen.
• It draws a rectangle (width w,
height h) on the screen at (x, y)
using the current pen.
• It draws a triangle using three
points and the current pen.
• It draws a ellipse (width w height
h) at (x,y) on the screen using the
current pen.
22
 Graphics Window Methods
Methods
FillRectangle (x, y, w, h)
FillTriangle(x1, y1, x2,
y2, x3, y3)
FillEllipse(x, y, w, h)
DrawText (x, y, text)
©Oxford University Press Small Basic Looping Stateme
Explanation
• If fills the rectangle (width w,
height h) on the screen at (x, y)
using the current brush.
• It fills the triangle connecting the
three points on the screen using
the current brush.
• If fills an ellipse (width w, height
h) on the screen at (x, y) using the
current brush.
• It draws a line of text on the screen
at the specified location (x,y) using
brush and font properties.
23
 Fill in the blanks
1. For…EndFor
The _______________ looping statement is used to repeat a block of
statements a specific number of times.

2. GraphicsWindow
The ________________ is used to draw text and figures.

3. one
The default value of Step is ______________

4. DrawEllipse
The method to draw a circle is ____________

5. The ______________
PenColor property is used to set the colour of drawing pen.

©Oxford University Press Small Basic Looping Stateme 24

 True or False?
1. The BackColor property is used to set the background colour of the
False
GraphicsWindow: ________

2. True
You can also draw text in GraphicsWindow: ________

3. The default colour of the pen used for drawing figures on the
GraphicsWindow is black: ________ True

4. The co-ordinates of the top-left corner of the GraphicsWindow are 0,0:

________
True

True
5. You can draw a square using DrawRectangle method: ________

©Oxford University Press Small Basic Looping Stateme 25