How to Draw a Circle in Qbasic
to PART 1
�
2.1 - Graphics
Let's diverege for a while into a very important topic in programming. If you want to pattern games, as this tutorial uses what you learn to prove yous how to exercise, graphics will be a big part.
In that location'south a whole lot of graphics commands in Bones. Let'due south first cover the basic ones. You'll probably toss them out later on in favor of sprites, tiles, and other such avant-garde techniques, but it's a good start.
Here's what we'll cover here:
SCREEN (a dissimilar command with unlike syntax but the same name)
LINE
CIRCLE
PAINT
DRAW
PSET
And then far we've but put text on the screen. But you can put graphics on the screen too. However, if you didn't get locate, get dorsum and review - there will exist a lot of stuff with coordinates. In fact, graphics are all about coordinates!
You lot may know already that computer screens (as well as TVs) draw a moving picture with little dots of color called pixels. If you're just dying to know, pixel is brusque for PICture ELement, (and i judge somehow that C becomes and X when they're put together).
With the locate statment, we can make pictures like the maze out of text. But if nosotros could make a picture with even more tiny parts to it, it would look ameliorate. The amount of pixels a picture has is called its resolution (sometimes people say res or rez for short)
For case, take an impressionist painting made out of unmarried dots. With thounsand of petty dots close together, it looks like a picture. The more dots we cram into information technology, the better it looks - and the harder it is to see every lilliputian dot.
So, depending on how loftier a resolution you want, Bones has unlike screen modes. Each i has a dissimilar amount of dots across and downwardly, therefore, it has a different resolution. Just like with some commands we've already encountered, each screen mode has a code number. We'll utilise screen #12 - or screen 12. So, how do nosotros tell BASIC to change the screen to this mode? With the screen control. Equally simple as this:
Screen 12
Yeah, this is a unlike command than the SCREEN () you're already familiar with.
Screen 12 is BASIC's highest resolution screen. You have 640 dots across, and 480 down, to draw with. That's about 300,000 dots in total! So, let'due south look at our first graphics command, LINE.
It's kind of like locate, simply information technology has a different range of coordinates allowed, and needs 2 sets of numbers - of course, since it draws a line; a line must start somewhere, and go somewhere. Also, you lot give information technology what color you desire the line to be
For example:
Line (0,0) - (639,0), 1
Will draw a line blueish across the superlative of the screen. Or this:
Line (0,0)-(0,479), two
makes a dark-green line down the left side
Line has another special matter about it though. It makes boxes likewise! If you want a box, write B after the color:
Line (0,0)-(x,90),five,B
will brand a tall purple rectangle in the upper left corner of the screen.
This, however is an empty box. If you lot say BF ranther than only B it will make a solid box (in this case, information technology would be a solid royal rectangle in the upper left corner instead)
That's covered pretty well.
Next command: Circle
Circle needs at to the lowest degree 4 parameters. Where to put it (an ten & y), a size (or radius), and a colour. Like and so:
Circle (320, 240), 10, 4
Circle (320, 240), fifty, iii
Yous should see a little red circle in about the center of the screen, with a much bigger light blue circle effectually it.
Pretty elementary, then let'due south move on. Now for Paint
Paint can sometimes be tricky to get it to practise what you desire. What paint does is starts from where you tell it, and paints within something. But, y'all have to tell it what color to stop painting at. So, you give information technology a color, and a border color (the color where it should stop painting). This way you lot can paint solid inside of figures, like circles you lot only learned about. Or, inside hollow boxes, if y'all don't desire the inside to be the aforementioned color every bit the border. Take a look at this:
Circle (320,240),25,4
Pigment (320,240),fifteen,4
Here's a red circle in the middle of the screen once again [this time a little bigger], and we'll paint the inside white. Now try chaning the four in the paint statement only to something else.... It paints the whole screen white! Because it didn't hit whatever color you told information technology (since it wasn't in that location) and just kept right on painting.
I don't know what more i can say almost this control. Have fun with what you know, experiment around with things.
Now for the last two commands that kind of go together. Outset let'due south start with Describe. Almost programmers despise this control, and think it'southward a terrible waste to even learn. I sort of agree; about despising information technology, i hateful. It's only something very cumbersome and tedious, but you lot can accept fun messing around with it, and information technology's an like shooting fish in a barrel way to draw circuitous graphics from the start. Draw goes like this: You give it a string of different things to to and it draws them. It has picayune commands of its ain in a way. Here's a partial list:
B movement, no line N line, no movement Un Upwards Dn Downward Ln Left Rn Correct En Up and right Fn Downward and correct Gn Downwardly and left Hn Up and left
The piddling n past something means yous put a number there. That's how many pixels you lot desire to depict in that direction. Let's see a few examples of how draw works:
Depict "R50 D50 L50 U50"
You're telling draw to go right for 50 pixels, then get down for 50 pixels, the left 50, then upward 50. Congrats! You made a square!. How about this:
Draw "e10 f10 g10 h10"
You go upwardly and left, then down and right, and so down and left, then up and left, 10 pixels each time. You've at present made a diamond!
Now allow's change slightly what we did earlier:
Describe "nr50 nd50 nl50 nu50"
perhaps y'all're saying it volition draw a foursquare again. No... - why? Notice Due north says "Line, no move". That means it volition draw something in that direction, then go dorsum to where it was to draw the next thing. Actually, it will draw more of a cross. If you put n in front of each part of the second example, you become an 10. Without B and North, the draw argument is much like an Etch-A-Sketch.
B is like the opposite of Due north - instead of drawing without moving, you move without drawing. So this:
draw "r10 br10 r10 br10 r10 br10"
Will give you dashed line. Describe 10, move silently along for 10, draw 10..... and so on.
Our final command for this section, PSET , helps out with DRAW. It's short for Pointer Gear up. You lot'll notice that when you use draw, it's in the upper left corner to start. That's the default position of the imaginary pointer that tells basic where to depict at. Y'all tin tell it to get somewhere else on the screen past using PSET. For case, if you lot want to get to the other corner:
PSET (639, 479)
then maybe yous desire to get dorsum to the upper left once again:
PSET (0,0)
I tiny thing y'all should discover. PSET makes a dot on the screen at the bespeak yous tell it to become to. This will be very handy later.
ii.two - Treatment lots of data - Arrays
At this bespeak is gets harder to make an even, flowing progression. So, i'll try to bear witness y'all of import parts of the linguistic communication, nonetheless, they're not necessarily woven interconnectingly.
This department volition cover, like it says, how to handle big amounts of data. For case, a variable only holds 1 type of data, and just 1 affair. Now that'due south almost to change equally we discuss arrays: they're similar a bunch of variables rolled into 1. For example, a elementary program to find boilerplate, without the employ of arrays:
Impress "Enter four numbers, i'll find their boilerplate"
Input a
Input b
Input c
Input d
average = (a+b+c+d) / 4
Print "Their average is "; average
( the slash / means to divide) Print "Enter 50 numbers. Enter -1 to finish"
That's great and all, but it'south non very flexible. Say perhaps you wanted the program to be able to find the average of 50 numbers; You'd have to modify the plan and so that information technology had 50 variables, add them al together, and divided them by fifty. Or fifty-fifty worse, what if you wanted to modify it for up to 50 numbers - you'd take to ask them how many numbers at that place were putting in, information technology would have lots of IFs, and be generally of poor quality.
Arrays solve the trouble of storing and retreiving lots of numbers with footling code and effort. That's because they go paw-in-manus with For...Next loops. To start, here's a programme that just gets 50 numbers - it doesn't average them... yet:
DIM numbers(fifty)
For a = 1 to 50
input n
if n <> -1 then numbers(a) = n else exit for
next a
Like always, i threw in a new command, which you lot probably gauge has something to do with arrays. The DIM command makes an array. Unlike variables, which you don't have to "make" before y'all use them (although you tin can, and information technology'south a really practiced addiction to exercise so) you exercise have to with arrays (the correct term is declare, rather than "make"). You say DIM arrayname() with some number in the parenthesis. This is how high you want your array to go. Your array holds fifty things in this case, and each one is numbered. And so, treat it just like a normal variable. This is perfectly legal:
numbers(1) = 12
numbers(6) = x + y - five
then on - anything you could do with normal numeric variables.
Since each function of the array is numbered, they work really well with loops as was aforementioned.
To intermission down our program: First, it makes an assortment, which holds upward to fifty things. And then it tells you lot to enter up to 50 numbers, and blazon in -1 to stop. Information technology gets the number from yous, then checks it to see if you want to finish. If non, it actually puts it into the assortment. Yes, you COULD do this:
input numbers(a)
if numbers(a) = -1 then exit for
but then when they do -1 to terminate, -one will get recorded earlier information technology breaks out of the loop. average = sum / (a - i)
Now let's average them, which isn't too difficult. Add this to the end of the programme:
FOR b = one TO a - i
sum = sum + numbers(b)
NEXT b
PRINT "The boilerplate is: "; boilerplate
Just to clarify, why a-1? Since a holds how many times we looped when entering numbers, we use it to decide how many numbers become into the boilerplate. But retrieve they accept to enter a number to go out of the loop too - that number doesn't gene in. So, if they entered two numbers, then entered -1 to get out, nosotros'd have looped 3 times. So, a-1 tells us how many numbers really figure into the boilerplate.
Now to break down the 2d part:
After all the numbers are entered, we have another loop with a dissimilar variable go back an add them all together. And so we find the average by taking the sum and dividing (the slash means divide) by how many numbers at that place were, then print it out.
In summary, yous tin see arrays are good for storing a bunch of numbers that are all for the same matter. They likewise happen to get well with For... Side by side loops. However, permit'south take a await at another thing they go well with: Information statements. Restore daynameslist Print "Enter the day, in ALL caps. For a = 1 to 7
Data statements are in themselves inert. You lot just put them in your program, and they concord data. What they hold tin't be changed from inside the program - you want them changed? you lot practise it past hand! Basically, they're non like arrays and variables, because they don't agree data quite the same and can't be inverse past your program. A quick example:
Exist enlightened of these things invloved with Data statements:
RESTORE
READ
Data
Line labels
This plan tells you what day of the week (The first twenty-four hours, second day, third day, etc) it is, by yous giving it the name of the mean solar day it is (sunday, monday....):
Dim daynames(seven) as string
For a = i to seven
read daynames(a)
Next a
Print "For example, WEDNESDAY non Wed"
input dayname$
if daynames(a) = dayname$ and then impress "It is mean solar day number "; a ; " today!"
Adjacent a
daynameslist:
DATA Lord's day, Mon, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY, Sabbatum
Come across, data records a agglomeration of stuff within the programme and lets united states of america look at it. It doesn't Practice anything, in a sense. Notice daynameslist: earlier it, and that there's a line that says Restore daynameslist. Yes, these two are definitely connected. Suppose you had more than i chunk of data - you're gonna want to look at one at a time obviously. Past putting a label (followed with a colon!!!!) yous requite your information a proper name. Then with restore, you tell information technology that name, letting it know you want to look at the information with that name. Read reads the information. Each fourth dimension you do read, information technology reads the next piece of data (each piece is separated by a comma, notice) unless you do a restore, where information technology goes back to the start of the data. When it reads it, it puts it in whatever variable y'all desire it to - hither i put information technology in an assortment, considering if yous tin put it in a variable, yous can put it in an array.
So, to step through this plan.
At the finish, we have our data. Information ususally goes at the end. Nosotros make an array to hold the daynames so we tin can expect at them easily. Our loop reads them from the data. Now we're ready to do something. We ask the user what day it is - it's gotta exist in all caps, because to bones SUNDAY = Sunday, but SuNDAY doesn't = SUNDAY. Then nosotros look at all names, which nosotros have in an array. If it sees the right mean solar day, it tells you the matching number. Okay, it's not the best example, but information technology gets the point across.
Why learn this? Mainly, because arrays are very very very important. Only besides, because arrays are very very very important.
And lastly because they brand doing complex graphics sooooo much easier.
2.three - Arrays and graphics: So happy together SPRITES!
Finally, you have the background knowledge necessary to larn most sprites. What'south a sprite you say? If you lot've e'er played old video games, you've seen tons of them. They're the principal part of a 2D video game, and are on occasion (with ugly results) used in 3D games. A sprite is any little picture made to be moved around. Hither's a couple of sprites from super nintendo games (bomberman actually)
Truthful, bomberman has tons of animations, all which are a dissever picture, but bomberman is notwithstanding considered 1 sprite, every bit is that little scarlet thing...
As we know, reckoner graphics are made up of lots of tiny little dots. Rather than describe each of those dots, we can draw with commands like Circle, LINE, etc.
But, as we have the demand for more complex graphics, it becomes necessary to practise just that - draw every little dot. That's esentially a sprite.
To start, permit'due south jump correct in and make a simple sprite. We'll practise this past saving a dot-by-dot epitome in Data statements. Of form the important peice of data yous need to know about a dot is information technology'south color. So we'll of course put the colour number of each dot in the information statement.
A unproblematic yellow smiley face up. Take a look at this little program:
SCREEN 12 FOR y = 0 TO fifteen FOR x = 0 TO 7 READ col PSET (x, y), col Next 10 NEXT y Data 00,fourteen,xiv,fourteen,xiv,14,14,00 DATA 14,00,00,00,00,00,00,14 Data 14,00,00,00,00,00,00,xiv Information fourteen,00,fourteen,00,00,xiv,00,14 Data 14,00,xiv,00,00,14,00,14 DATA 14,00,14,00,00,fourteen,00,xiv DATA 14,00,00,00,00,00,00,14 Data 14,00,00,00,00,00,00,14 DATA xiv,00,00,00,00,00,00,14 DATA fourteen,00,00,00,00,00,00,14 DATA 14,00,fourteen,00,00,fourteen,00,14 DATA 14,00,00,14,fourteen,00,00,xiv Information 14,00,00,00,00,00,00,fourteen DATA 14,00,00,00,00,00,00,14 Information 14,00,00,00,00,00,00,14 DATA 00,14,14,fourteen,14,xiv,fourteen,00 The data is the bulk of the program. It contains color numbers, either 00 (black), or 14 (yellow). They're arranged in such a way that if yous were to take those colour numbers and depict them as pixels rather than write them as #'south, they'd form an epitome of a smiley face.
And so wait at the 2 loops. Our picture is made 8 pixels beyond and sixteen downward. Discover the inside loop draws 8 pixels. The outside loop makes it loop xvi times. So, this draws xvi lines of viii pixels, the end result being our smiley face.
How practice arrays fit into this equally they were mentioned to. The answer - suppose yous need to describe that smiley confront over and over (to move it around, for example). Doing information technology this way, you'd need to RESTORE and READ every time you drew it. To make it easier and more efficient, yous should simply store all the numbers somewhere. As we know, arrays are corking for storing a whole lot of numbers which you basically use for the same matter. A modified version of the program:
DIM Smiley(127) For a = 0 to 127 READ smiley(a) Next a SCREEN 12 FOR y = 0 TO fifteen FOR x = 0 TO seven PSET (x, y), smiley((8*y)+10) NEXT ten Adjacent y ( * means 'times' or 'multiply')
You'll merely have to accept that (viii*y)+x formula on faith for now.... An assortment is esentially 'one-dimensional', but the screen is 2-dimensional, so we must convert between the two.
This method is very deadening, although non too noticable with such a minor sprite.
Let's add in the necessary code so nosotros tin can movement the face around. To clarify it, look dorsum at the pac-human being example:
DIM Smiley(127) SCREEN 12 Smileyx = 0 Smileyy = 0 For a = 0 to 127 READ smiley(a) Side by side a DO FOR y = 0 TO 15 'Draw smiley face FOR x = 0 TO 7 PSET (smileyx + x, smileyy + y), smiley((8*y)+x) NEXT x Next y Do A$ = inkey$ loop until a$ <> "" 'Look until they striking a central Line (smileyx, smileyy)-(smileyx+7, smileyy+xv),0,bf 'Depict over old smiley before coords change 'and earlier new smiley is drawn If a$ = "4" then smileyx = smileyx - 8 'Left If A$ = "vi" and so smileyx = smileyx + 8 'Right If a$ = "viii" and then smileyy = smileyy - 8 'Upward If a$ = "two" then smileyy = smileyy + viii 'Down Loop until a$ = chr$(27) 'The ASCII lawmaking for 'escape' - quit when they hitting it
Notice the alter in in the PSET command. The coordinates are not merely (ten,y). If you drew at x,y every time, the smiley would non move! however, if yous add x to the smiley'south ten position, and y to the smiley'due south y position, the movie is fatigued wherever the smiley's been moved to.
Just similar in the pac-man case earlier, nosotros must draw over the erstwhile moving picture earlier cartoon a new one, otherwise there'd exist a trail of smileys across the screen. This is what
Line (smileyx, smileyy)-(smileyx+seven, smileyy+xv),0,bf
does. The rest of the program is pretty easy to effigy out.
2.4 - Get/Put
I mentioned earlier that this method of drawing would exist pretty slow with a large spryte. The more than commands that have to exist done, the longer the programme takes.
The loop to describe the smiley loops 128 times total (8 on the inside * 16 on the outside). That non a lot, merely it'south not exactly efficient. Remember that it loops 128 times every time you hitting a key. If your picture was say, 100 * 200, that would take considerably longer - xx,000 pset commands! Simply nonetheless it's often necessary to draw lots of graphics at in one case. For this reason, basic has the Go and PUT commands.
Go takes an rectangular area of the screen and copys information technology and then it can be drawn once again and again. And then, the PUT command draws what you copied with GET. The advantage is that GET and PUT are very fast (compared to doing a bunch of PSETs, anyway)
For an example, lets go back to our original smiley face up program, that only draws the smiley confront and add in Go and PUT commands:
SCREEN 12 DIM Smiley(127) FOR y = 0 TO 15 FOR x = 0 TO seven READ col PSET (10, y), col Next x NEXT y Get (0,0)-(7,15), smiley Put (320, 240), smiley
(again, i didn't include the Information statments to save space. Make certain you include them when you lot run the program for yourself)
Get works like this:
Become (x1, y1) - (x2, y2), arrayname
which means you requite it starting coordinates (x1, y1) and ending coordinates (x2, y2), and it GETs an image from that area of the screen. Kind of like line when y'all fabricated a box (with BF), this gets a rectangular area of the screen. It stores the image information technology gets in whatever assortment yous specify. As a full general rule i simply use an array as big as how many pixels the epitome will have. Still, this may be too much depending on what screen mode you use... Don't worry about this right now, it gets more than technical than you lot care to know, i'm sure.
Once we have the image, we use put, which is very like:
PUT (10, y), arrayname
This takes the image yous stored with become from any array you tell information technology and puts information technology on the screen at coordinates x, y
Mayhap you can see where i'one thousand going with this: Offset we went over how to begin to make a game and started to talk about graphics. Then we digressed into other topics, and at present we know how to do graphics even faster, and more efficient methods of storing/using them.
The side by side logical step is to apply our new knowledge of become and put to our game from before. Let's begin to put a pac-man game together. I choose pac-man considering it's pretty elementary, only complex enough to give united states of america alot of material to encompass. don't limit yourself - accept what you learn here and do what y'all want with it.
At present that we tin use real graphics - not those sucky text.. erm "graphics" from before, let's use real graphics!
Allow's brand pac-homo expect like pac-man, and the pac-human being maze look like a pac-human being maze.
to PART i
Originally posted at http://www.doorknobsoft.com/
Source: http://www.petesqbsite.com/sections/tutorials/tuts/doorknob/qbasic_tutorial2.html
0 Response to "How to Draw a Circle in Qbasic"
إرسال تعليق