QB Graphics TUTORIALS

QB Graphics TUTORIALS (c) 98 by RokFOX
An easy way for adding graphics support to your own QB programs
Issue: #001

Release date: 11/18/98 (mm/dd/yy)
Document version: 2.0
You can find new tutors and last updates at: http://surf.to/RokFOX
Email: RokFOX@mail.tfz.net
To send me encrypted emails check out my pgp public key

This tutorial is totally free. You're allowed to distribute it over the Internet for non commercial use.
Below you can see all files which should be included along with this tutorial.

GFX-TUT1.HTM	You should be viewing this file right now
GFX-TUT1.HTM.SIG	PGP signature file
RokFOX.PGP.TXT	My PGP PUBLIC Key
ARRAYE1.BAS	First example code
ARRAYE2.BAS	Second example code
GTUTOR1.BAS	3rd example code

Well guys, first of all I'd want to tell you why I decided to write this tutor. A friend of mine asked me to write something helpful about developing graphics applications in qb and here I am.
I don't live in an English speaking country, I'm sorry for any possible grammatical mistake ;)
This first tutor deals with basics of qb gfx. I hope to release new gfx tutorials soon. They will deal with more complex concepts. However this one is for everybody, all you need to figure it out is knowing some basics programming, that's all it requires. If you've never written a proggie in qb you'd better give up now.
I strongly recommend that you read carefully my tutor, running all the example sources and understanding what they do.
You don't have to be afraid if something in the sources isn't clear, because at the end of every source file there is a full explanation of what it really does. I do my best for making this tutor as easy as possible and I really hope it will be helpful to you.

A great deal of people asked me how to create a own graphics format for loading and saving images. We don't use the well known bload and bsave statement. We use arrays (we discuss about arrays in the next paragraph).
We create a random image, store it to an array, save the array to a file then loading the image from the file. I promise that this task is really easy; however some concepts must be clear to the reader.
If you've probably get up to this point, that means you're going to accomplish this tutorial. Now the advice is to chronologically read, understand and run everything you find on this paper.
The next section is about arrays and explains what they are and why we need them. If you fell already experienced with arrays you can skip the next paragraph and advance to the 4th.

Here we go. The usual question is: what is an array ? you can think of an array like a big variable containing n sub variables which may be either of the same or different type. As every programming language, qbasic allows you to use arrays in your programs. An array is usually used when you have to play with many variables and want to get easy access to all of them, in such case you may decide to add an array to your program.
Below is shown the syntax with a brief sample code to declare a shared array (which may be read and written from any sub routine).

SHARED	The optional SHARED attribute allows all procedures in a module to share arrays and simple variables.
ArraySize	The dimensions of the array. Multiple dimensions such as (10,5,5) can be declared.
ArrayName	A simple qbasic name
AS TYPE	Declares the array type (INTEGER, LONG, SINGLE, DOUBLE, STRING)

EG1: DIM SHARED Image(1000) AS INTEGER
The above code declares an array named 'Image' as integer whose index (arraysize) is 1000.

EG2: DIM SHARED GuestBook(200) AS STRING
Declares an array named 'GuestBook' as string whose index is 200. For instant, it may be filled with gusts names.

SAMPLE-CODE 1 File: ARRAYE1.BAS
--- CUT HERE ---

'// Source code dealing with how to use arrays
'// (c) 98 by RokFOX - Included with the QB-GFX #1 TUTORIAL
CLS
DIM SHARED WorldCup(3) AS INTEGER '// Declares the array: WorldCup as INTEGER, its dimension is 3

'// Fills the array with the historical dates when Italy won the World Cup.
WorldCup(1) = 1934
WorldCup(2) = 1938
WorldCup(3) = 1982

'// Prints what's inside the WorldCup array
FOR n = 1 to 3
PRINT WorldCup(n)
NEXT

All the above code does it daclaring an array (WorldCup) as integer, whose index is 3. Then it stores some historical dates to the array. At the end it prints the array contents on the screen.

'// Source code dealing with how to use arrays
'// (c) 98 by RokFOX - Included with the QB-GFX #1 TUTORIAL
CLS
DIM SHARED ArraySize AS INTEGER '// We declare the ArraySize variable as integer
ArraySize = 5 '// We store the array size into this variable
DIM SHARED OurArray(ArraySize) AS STRING '// The array is named: OurArray

'// Fills OurArray with some silly text ;)
OurArray(0) = "Hello guys !"
OurArray(1) = "Welcome to RokFOX' QB GFX TUTORIALS"
OurArray(2) = "I hope you enjoy 'em"
OurArray(3) = "I also hope they'll be helpful to you"
OurArray(4) = "This's a little demo on how to use arrays"
OurArray(5) = "- The End -"

'// Now the below code prints OurArray on the screen
FOR n% = 1 TO ArraySize
PRINT OurArray(n%)
NEXT
END '// Goodbye!

This code is very similiar to the previous one. The only different is that this one declares an array as string then fills it with some silly text. As usual, in the end, it prints the array contents on the screen.

In qbasic declaring arrays and variables is not required, in other programming languages such as c/++ that is a must. I highly recommend you that you declares arrays and/or variables before before storing data to them.
As you probably realized the above samples are nothing about graphics yet, but the arrays knowledge is a must for every programmer, in particular the ones who are going to deal with graphics, that is, us ! ;-)
At this point, if everything's clear, you can advance to the next section.

Now it's time to show the world what we've just learnt. Before steeping into this final section, something to drink is recommend...After freshing your mouth with an ice beer let's get back programming. Our program has to do the following things:

'// QB GFX Tutorial (c) 98 by RokFOX
'`` ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
'// This file is included along with QB-GFX Issue #1
'// You can contact me via email: RokFOX@mail.tfz.net
'// or throught my DCCD server (to know more about it check out my webpage)
'// ADDRESS: DCCDRokFOX.dyn.ml.org
'// PORT: 1024
'// USER: Guest
'// PASS: Guest
'// -
'// Get last updates and new issues at: http://surf.to/RokFOX
'
SCREEN 13 '--> 1 <-- Sets screen mode to 320*200; 256 colors
RANDOMIZE TIMER
DIM SHARED Picture(1251) AS INTEGER 'The array which will hold the picture
DIM SHARED LoadPicture(1251) AS INTEGER, ArraySize AS INTEGER
COLOR 11 'Sets fonts color to 11
ArraySize = 1251

'--> 2 <-- The below code draws a random picture
FOR y% = 1 TO 50
   FOR x% = 1 TO 50
      PSET (x%, y%), RND * 256
   NEXT
NEXT

LOCATE 8: PRINT "a) Image generated !"

GET (1, 1)-(50, 50), Picture '--> 3 <-- Stores the generated image to an array

PRINT "Press any key to load it"
a$ = INPUT$(1)

PUT (1, 80), Picture 'Put the picture on the screen

LOCATE 18: PRINT "b) Picture loaded from memory!"
PRINT "Now hit anykey to save it to 'your.pic'"
a$ = INPUT$(1)

OPEN "your.pic" FOR BINARY AS #1 'We'll save our pic into this file
FOR p% = 0 TO ArraySize
   PUT #1, , Picture(p%) '--> 4 <-- Saves the picture array to 'your.pic'
NEXT
CLOSE #1

PRINT
PRINT "c) Picture saved to file: 'your.pic'"
PRINT "Press anykey to load it from: 'your.pic'"

a$ = INPUT$(1)

LOCATE 1, 12: PRINT "d) Loading: 'your.pic' ..."
OPEN "your.pic" FOR BINARY AS #1 'Opens the file to load the pic
FOR p% = 0 TO ArraySize
   GET #1, , LoadPicture(p%) '--> 5 <-- Loads the array from file
NEXT
CLOSE #1

PUT (230, 11), LoadPicture '--> 6 <-- Put the picture on the screen
LOCATE 9, 29: PRINT "Loaded !"

This demo is really easy to figure out and it's fully commented. As in the previous samples the 'FOR' statement is used to read an array. The picture is saved to a binary file therefore we had to use file I/O statements to access the file.
Now let's spend some time talking about the 'GET' and 'PUT' statement. 'PUT' is issued to store data to a file, 'GET' is used to retrieve stored data from a file. Look at the tables below for more info about them.

GET is a file I/O statement that reads from a disk file into a random-access buffer or variable/array
SYNTAX: GET [#]filenumber[,[recordnumber][,variable]]

#	filenumber is the number of an open file.
RecordNumber	We're not accessing to a random file however, for random-access files, the number of the record to be read. For binary-mode files, the byte position in the file where reading starts. The first record or byte position in a file is 1. If you omit recordnumber, the next record or byte (the one after the last GET or PUT, or the one pointed to by the last SEEK) is read into the buffer. The largest possible record number is 2^31 -1, or 2,147,483,647.
Variable	The variable used to receive input from the file.

PUT is a file I/O statement that writes from a variable or a random-access buffer to a file
SYNTAX: PUT [#]filenumber[,[recordnumber][,variable]]

#	filenumber is the number of an open file.
RecordNumber	recordnumber is the file position to write to (a record number for random-access files, a byte number for binary files). If the record number is omitted (our case) the next byte or record is written to.
Variable	variable contains the information to be written.

My tutorial is over, if something isn't still clear, read again carefully. I really hope you enjoyed it and it was helpful to you. Take a look at the next section if you whish to contact me.

For any suggestions, comments, corrections and questions fell free to email me. If you whish to directly talk to me you can you use my own chat program: DCCD, for more info check out my homepage. If you have a qbasic page... putting my tutorial there would make me happy ;-)

-=- RokFOX -=-
http://surf.to/RokFOX
Email: RokFOX@mail.tfz.net | PGP Public Key
T.H.C. Member (Terran Hacking Confederacy)
IRC Network: DALnet, Channel(s): #THC-DAL
DCCD Server: DCCDRokFOX.dyn.ml.org:1024
LOGIN: Guest PASS: Guest