QBasic Information Center Tutorials - Graphics Concepts
These tutorials were written to help you get a quick, but thorough, understanding of QBasic -
the scope of the language as well as it's specific capabilities.
QBasic is capable of displaying both text and graphics on the screen. In this
section, the graphics output features are discussed.
Looking at it one way, creating graphics is simply about controlling the color of
pixels on a screen. Of course, that description leaves out a ton of details
but it does describe the basic capability supported by QBasic - setting the
colors of pixels - individually, in groups, and quickly.
A QBasic program creates graphics by controlling the color of pixels on the
screen, but it can also control the screen resolution. High resolution graphics
(more pixels) creates smoother graphics whereas lower resolution graphics
(fewer pixels) can be written/updated faster.
Unfortunately the maximum resolution mode in QBasic is only 640x480 and supports only
16 colors. The most colors supported by any QBasic screen mode is 256 at a resolution of
320x200. These modes are useful for creating constrained, but sometimes
suprisingly good, graphics - particularly as compared to today's high resolution,
24 bit color graphics modes. Despite those limitations, QBasic games continue
to attract programmers and users all over the world, especially in the game
Here is a list of the QBasic functions that are discussed in this section.
view, window, pmap
color, palette, palette using
QBasic supports several graphics screen modes, where each screen mode
defines a combination of properties - resolution, colors, display pages,
text size, and more.
One of the screen modes limits the display to text only,
which is the default startup mode for all QBasic programs.
In order to display any graphics other than text, a QBasic program must
first change the screen mode.
QBasic supports 14 total modes, each assigned a simple number 0-13. Mode 0 is the default
mode and allows only text to be displayed. All other modes 1-13 support pixel-by-pixel
graphics creation in addition to supporting text display. Of these, only a few are used
extensively by programmers. You can look up information on all modes in QBasic Help,
but here are the most used graphics modes. All except mode 0 support a combination of
text and graphics.
Mode Resolution Colors Pages Text
0 80x25 64 to 16 4 80x25/43/50
7 320x200 16 to 16 0-7 40x25
12 640x480 256K to 16 1 80x60/30
13 320x200 64K to 256 1 40x25
Because of it's extended color range, and despite it low resolution,
mode 13 is probably the most popular mode for QBasic programmers.
Mode 7 is also popular because it's multiple pages can be used to provide flicker-free
graphics animation. Because of it's high resolution, mode 12 is also
The physical coordinates of a screen are the same as the resolution. The maximum X
physical coordinate corresponds to the width of the screen in pixels. The maximum Y
physical coordinate corresponds to the height of the screen in pixels. Actually,
since pixels start counting within zero, the last pixel coordinate is width-1 or height-1.
By default, the (0,0) coordinate center is at the upper-left corner of
the screen. Positive X is towards the right of the screen. Positive Y is
towards the bottom of the screen.
QBasic also supports the concept of "logical" coordinates. For example, a programmer
might want the logical height/width of a screen to be 1.0 to make it easier to
plot graphics of trignometric functions, whose values are -1 to +1. Defining a
logical screen size is discussed later in this tutorial.
Creating Graphics - Built-In Functions
QBasic has useful, though limited, abilities to create graphics. Here's a
list of the basic functions. All of these simply change the color of pixels,
but are methods of doing so with minimal code and effort on the part of the
|cls||clears the screen
|color||sets the foreground color
|point||returns cursor location or pixel color
|pset||set the color of a pixel
|preset ||set the color of a pixel (reverses fg/bg)
|circle||draws a circle, arc, or ellipse
|line||draws a line or a box
|draw||draws point to point composite lines
|paint||fills closed areas on the screen
The details of these commands are discussed in a separate
section of this tutorial.
It can be convenient to have the screen coordinates (edge-to-edge) be
different than the physical (pixel) resolution.
For example, in mode 12 (resolution 640x480) to get a full screen graphic
display of trigonometry function, the QBasic programmer has to scale
the results. Since trigonometry functions return values of -1 to 1, it would
convenient if the center of the screen could be set to (0,0),
the upper-left corner to (-1,1), and the lower-right corner to (1,-1). Then
trigonometry function value would fill the screen with no further effort on
the part of the QBasic programmer.
Simplifying source code by setting the coordinates on the screen to values
other than the physical resolution is a common programming practice.
The assigned coordinates are called "logical" coordinates and can be
accomplished using the window function.
In the first example, the value of sin is plotted over 360 degrees. The resulting
value is scaled by 320 to increase the position of the pixel to be seen. In the
second example, the scaling is not required because the logical coordinates are
to for the screen.
screen 13 # 320x200
for i = 1 to 360 # loop over 360 degrees
pset(i,sin(i*.017)*60+100),14 # sin result scaled
screen 13 # 320x200
window (-1,1)-(1,-1) # set logical coordinate
for i = 1 to 360 # loop over 360 degrees
pset(i,sin(i*.017)),14 # sin result scaled
For this simple code, the benefits are small. But when a program uses many
lines of code and several types of graphics commands, the saving can be
substantial, as can the impact on speed by reducing the number of calcuation
that must be made within a loop.
Logical coordinates have the added advantage of working in any screen mode
without having to change the code to match the screen mode resolution.
It's common in gaming to have an image that you want to put on the
screen and move around, including changing the image. Typically, these
images are small, such as a ball, a gem, a symbol, or even a small figurine
(human, animal, or somewhere inbetween). Such sprites are rectangular
and generally measure no more than 30 pixels on a side. There can even be
many sprites on a screen, new ones appearing, some moving off the
screen, and some simply disappearing - all under QBasic program and user control.
A more detailed look at sprites is found in this
section of the tutorial.
QBasic sets aside a fixed amount of memory to display screen content. In
lower resolution, where some of the memory is unused, QBasic divides the
total memory into equally sized pages, with up to 8 pages available,
depending on the screen mode (resolution).
Any of the available pages can be written to, just as though it were a screen.
But only one page may be displayed at a time. The advantage of this page
management scheme is that writing to a hidden page can take place without
being seen by the user. Then, one of the hidden pages can be made visible,
making it appear as though the graphics were drawn instantly. This perception
of speed is especially useful in creating games.
The screen function sets which pages are active or visible. Also, QBasic
provides a pcopy function to quickly transfer information from one page to
another. Here are examples of both.
screen 13,1,2,2 # page 2 becomes active/visible
pcopy frompage%, topage% # copies one memory page to another
Text in Graphics Mode
All graphics screen modes support the display of text. QBasic can control
font colors but has no built-in method of changing font type or size.
The print/print using/write statements are used to place text
onto the screen, each with a different approach to formatting the output.
The output of all three can be tailored using the tab/spc functions.
Color foreground (the text color) and background (on which the text is written)
can be set using the color statement.
Writing takes places at the current cursor location, which is reset under
user control at the end of a print/print using/write statement. The cursor
position may also be explicitly set using the locate statement.
Information about the screen (cursor position and screen content) can be
retrieved using the csrlin, pos, and screen functions. See the reference
information below for information on using these functions.
QBasic also supports settings limits to the area where QBasic functions can
create graphics or to write text, effectively creating a (usually) smaller
"window" on the (usually) larger screen. The window is called a viewport
and can be set using the view function as shown in the following example.
VIEW [[SCREEN] (x1!,y1!)-(x2!,y2!) [,[color%] [,border%]]]
The view function can used multiple times. The viewport defined by the
last usage will be used by QBasic's graphics statements.
Note that a viewport does not define a new starting point for coordinates.
If the upper left coordinate of a viewport is 100,100, then any graphic
function that uses coordinates less than 100,100 will simply not produce
a visible result because it falls outside the graphics viewport. Only
the results that fall within the viewport coordinates will be displayed.
QBasic also offers a function, pmap, which can convert from windows to
viewport (and back) coordinates.
pmap (coordinate#, n%) # syntax
n% = 0 enter window x to get viewport x coordinate
n% = 1 enter window y to get viewport y coordinate
n% = 2 enter viewport x to get window x coordinate
n% = 3 enter viewport y to get window y coordinate
Note that when a graphics viewport is set, graphics function which
fall outside the viewport simply do not display. This is different
that a text viewport, where text functions may wrap to the next line
in the text viewport. Graphics viewports have no wrap equivalent.
As with graphics, a text viewport can also be created on a screen. The
text and graphics viewports are independent of one another.
Normally, a QBasic program can write anywhere on the screen, over the entire
width/column settings for the screen mode. However, QBasic also supports
settings limits to the area where QBasic functions can write, effectively
creating a (usually) smaller "window" on the screen. The window is called
a viewport and can be set using the view print statements.
view print top% to bottom% # sets top/bottom rows
the col%/row% values depend on the screen mode
- col% is limited to 40 or 80 columns
- row% is limited to 25, 30, 43, 50,or 60 rows
The view print function sets the upper/lower rows which are available for output
by QBasic statements. Note that a text viewports always align with the left
side of the screen. It does not provide a "window" of print opportunity in the
same way that a graphics viewport does.
Note that when a text viewport is set, text output that extends to the right of
the screen (or the screen's current WIDTH setting) will wrap to
the next line (unlike graphics viewports which have no wrap equivalent).
Screen (Graphics) Function Reference
The following functions are available to display graphics.
- cls - clears the screen of all graphics and text
cls # clear entire screen
cls 0 # clear entire screen
cls 1 # clears viewport (screen if no viewport set)
cls 2 # clears text viewport
- palette - changes color assignments
palette attribute%, color& # changes a palette attribute
To use palette requires an EGA, VGA, or MCGA adapter.
- palette using - changes color assignment (array based)
palette using myarray(index%) # array has multiple changes
index% gives the starting index in the array from which to take
To use palette using requires an EGA, VGA, or MCGA adapter.
- pcopy - copies one video memory page to another
pcopy sourcepage%, destinationpage% # syntax
pcopy 1,3 # copy page 1 to page 3
To use pcopy, the screen mode must support memory pages.
- pmap - returns window coordinate equivalent to a viewport coordinate, or vice versa
pmap (coordinate#, n%) ' coordinate is window or viewport coordinate
' n% value to return
' 0 - window x coordinate
' 1 - window y coordinate
' 2 - viewport x coordinate
' 3 - viewport y coordinate
result% = pmap(42,1) ' returns window y coordinate
- screen - sets screen resolution/color and manages active/visual pages
SCREEN mode% [,[colorswitch%] [,[activepage%] [,visualpage%]]]
# colorswitch%: 0-color 1-monocolor
# activepage%: page to which graphics are written
# visualpage%: page to display
SCREEN 1 '320 x 200 graphics
LINE (110, 70)-(190, 120), , B
LINE (0, 0)-(320, 200), 3, , &HFF00
colorswitch% A value (0 or 1) that switches between color
and monocolor display (modes 0 and 1 only):
Mode Value Action
---- -------- --------------
0 0 Disables color
0 Nonzero Enables color
1 0 Enables color
1 Nonzero Disables color
activepage% page being written to (may be hidden)
visualpage% page currently displayed
- view - sets size/location of the text and graphics viewports
view (x,y)-(x,y),color%,border% # syntax
view (100,100)-(300,300), 12, 4 # relative to viewport
view screen (100,100)-(300,300), 12, 4 # relative to screen
- view print - sets boundaries of screen text viewport
view print top% to bottom% # syntax
view print 5 to 10 # viewport is rows 5-10
If you omit the toprow% and bottomrow% arguments, VIEW PRINT sets the
entire screen as the text viewport. Ranges for top% and bottom%
depend on the screen mode.
- window - sets the logical coordinates of the current graphics viewport
window (50,50)-(200,200) # (50,50) is lower left
# (200,200) is upper right
window screen (50,50)-(200,200) # (50,50) is lower left
# (200,200) is upper right
If you have any suggestions or correction, please let me know.