        Vic's QBasic Programming Tutorial

                           Basic Tutorial II

                               GRAPHICS!


-----------------------------------------------------------------------------
1. Graphics explained.
2. Graphic commands...
-----------------------------------------------------------------------------

1. Graphics Explained...
-----

        The most important thing in game programming is graphics.  In order
to get good graphics you must know how to achieve the special effects.  You
must learn these.  Most people can't figure out how to achieve good graphics
on thier own.  I know that I had to be taught.  If you are one of the people
who say "I can figure it out by myself, I'm not stupid..." then why are you
reading this?
        This tutorial will cover very basic graphics and very ADVANCED
graphics.  There are (in my opinion) two ways of geting graphics.  One is
the very basic built in commands like drawing a line, circle, square, and

a filled in circle/square...  For a beginner this is great.
The other type of graphic programming is drawing PIXEL by PIXEL what you
want.  The thought used in this type of graphics programming is a bit more
complex...

First I will give you a few definitions...

1. Pixel
A pixel is one Dot on the screen.  If you don't allready know, you computer
screen is made with about 1 Million little squares of color.  Each one of
of those little squares is called a pixel.

here is an example if for some weird reason you don't understand this...
(type this into QBasic) (Without the ----'s of coarse)

---

SCREEN 13
PSET (40,40),4

---
when you run the programm you should see a red dot in the upper left part
of your screen.  That is one PIXEL...
(if you havn't guessed, PSET means PIXEL SET...)
-----

Now I will talk about the screen's Setup...

The screen is setup just like a multiplication Table

0  1  2  3  4
1  1  2  3  4
2  2  4  6  8
3  3  6  9  12
4  4  8  12 16

if you wanted to know what 3 x 4 is then you would find the three and then
move over until you are on the 4, then you would be on the number 12...

if I wanted to put a pixel where the 12 is I would tell the computer to
PSET a pixel at 4,3...

If i wanted to put a pixel where the 16 is I would tell the computer to
PSET a pixel at 4,4...

I really hope you understand this concept.. If you don't understand this than
you are totally screwed...  sorry,

-------

If you look at the program that I wrote earlier you would see that the first
command that is given is SCREEN 13.
Screen 13 has a pixel value of 320 x 200
(320 going left to right)
(200 going up and down)

like this

   ------------------------------------->
   |            <-- 320 -->             |
   |                                    |
   |                                    |
   |200                              200|
   |                                    |
   |            <-- 320 -->             |
   ------------------------------------->

For right now, in this tutorial at least, we will use only screen 13.
pretend, I wanted to put a pixel where the X is Below...

   ------------------------------------->
   |            <-- 320 -->             |
   |                                    |
   |                                    |
   |200                              200|
   |                          X         |
   |            <-- 320 -->             |
   ------------------------------------->

If I was to guess, It looks like the X is at about, 255,150...
That Would be 255 across and 150 up and down.

!!! THIS IS IMPORTANT !!!
When you refer to a point in graphics you must put the one going left and
right first, and the up and down Second!!!  It will allways be like this...
MEMORIZE THIS!!!!

The first number will be known as the X value and the second will be known
as the Y value, so in this example

X = 255
Y = 150

This is also a very important thing to know...

Remember this!!
X = Left to Right
Y = Up and Down

Remember this!!
X = Left to Right
Y = Up and Down

Remember this!!
X = Left to Right
Y = Up and Down

Remember this!!
X = Left to Right
Y = Up and Down

Remember this!!
X = Left to Right
Y = Up and Down

Remember this!!
X = Left to Right
Y = Up and Down

Remember this!!
X = Left to Right
Y = Up and Down


Do you have it yet?

X = Left to Right
Y = Up and Down

X = Left to Right
Y = Up and Down

X = Left to Right
Y = Up and Down

OK?
X is first and Y is second (alphabetic order...)
X is first and Y is second
X is first and Y is second
X is first and Y is second
X is first and Y is second
X is first and Y is second
X is first and Y is second

You must remember all this or you will never learn Graphics programming!!
Don't worry if at first you don't get this, or you don't get it that well.
All hope is not lost.  Things will eventually sink in.

----------------------

Ok, Here we go.
Remember the first(only) programming example?

SCREEN 13
PSET (40,40),4

All your programms should start with SCREEN 13, if you don't put that then
it will cause an error when the programm is started...

Now, look at the command PSET(40,40),4
This could also be known as
PSET (X,Y),Color

You should be able to figure out everything except for the Color Part...
Colors in programming are not known like BLUE,GREEN,RED...
It is all Numbers...

For example...
the color BLUE is known as the number 1...
the color RED is known as the number 4...
==---==

So, If I wanted to put a Blue pixel at 50,100 then I would say...

SCREEN 13
PSET (50,100),1

If I wanted to put a red pixel at 5,17, then I would say...

SCREEN 13
PSET (5,17),4

If I wanted to put a red pixel at 5,6 and a blue pixel at 74,46 I would say,

SCREEN 13
PSET (5,6),4
PSET (74,46),1

-----
NOTE:  You only need to put the SCREEN 13 once in your programm...

-----------------------------------------------------------------------------

OK, now it is time to learn the LINE command...

Start with an example...

---

SCREEN 13
Line (16,20)-(44,50),1

---

In this example, The program will draw a line from the points 16,20 all the
way to the points at 44,50...

Remember how this is set up...
LINE (x1,y1)-(x2,y2),Color
-----

If you wanted to draw a square, then you would do it like this...
LINE (x1,y1)-(x2,y2),Color,B
( the B means BLOCK, I think)

IF you wanted to draw a filled in square you would do it like this...
LINE (x1,y1)-(x2,y2),Color,BF
( the BF means BLOCK FILL, I think)


-----------------------------------------------------------------------------

Next command, Circle...

Here is an example...
---
screen 13
circle (50,50),5,1
---

in this example a circle is drawn at the points 50,50
it has a radius of 5 and the circle is the color blue (1)

here is the set up...

circle (x,y),radius,color
(the bigger the radius the bigger the circle)
-----------------------------------------------------------------------------



COLORS:

Here is a program that will show you all of the main 16 colors...
NOTICE:  The 16 colors are from 0 to 15. 0 is black and 15 is white
just type this program into QBASIC and run it
You don't have to understand this program yet.  This is just to help you
out on what colors to choose. Make sure you copy it word for word
(not the ---'s of coarse)
you can copy this into qbasic by starting QBasic in windows 95/98
and then push ALT and ENTER to shrink it, then look and copy...
or, you can copy what is below, goto file, new and paste it in the new
document, then, save it as color.bas... and run it from there,or you
could print it out.
I would recomend using the first one...


---

SCREEN 13
FOR i = 1 TO 16
LINE (i * 20, 0)-(i * 20 + 20, 20), i, BF
NEXT
LOCATE 4, 1: PRINT "0"
LOCATE 4, 39: PRINT "15"

---
Thats it.  This will show you the 16 main colors...
There are 256 colors in SCREEN 13, but the first 16 are the colors that are
in every screen...

Here is a program that will show you all 256 (0 to 255) colors in screen 13
once again, you don't have to understand it, just look at it...
(copy it word for word)
---

SCREEN 13
la = 10
FOR y = 1 TO 16: FOR x = 1 TO 16
LINE (x * la, y * la)-(x * la + la, y * la + la), i, BF
i = i + 1
NEXT: NEXT

---
pretty huh?
-----------------------------------------------------------------------------

SCREEN MODES...

SCREEN MODE     DESCRYPTION                  

0               Textmode only, you cant use any graphics

1               320 x 200,  Only has 4 colors!!! (Useless)

2               640 x 200,  Only 2 colors !!!!(USELESS) (Black and White)

7               320 x 200,  16 colors and supports pages(get to later)
                This screen mode is very very usefull...

8               640 x 200,  16 colors no pages (useless)

9               640 x 350,  16 colors supports pages (very usefull!)

10              640 x 350,  2 colors (black and White) (useless)

11              640 x 480,  2 colors (almost useless)

12              640 x 480,  16 colors (very usefull)

13              320 x 200,  256 colors (extremely usefull!!!)
                The absolute most popular screen mode for QBasic Programmers

--------
Not to confuse you, but when you get more into programming you will descover
that there are other ways to get other screen modes, but that gets extremely
complicated.  but in time you will understand...

-----------------------------------------------------------------------------