index-bas.htm wywtk.com homepage What You Want To Know  Index to my pages about BBC BASIC

Drawing computer graphics with BBC BASIC for SDL

(Page's URL: bas3-move-draw.htm)

If, as I would recommend, you've read at least the first tutorial in this series, you might think that BBC BASIC for SDL is limited and boring.

It absolutely isn't! In this tutorial we start doing some things which I hope you'll find fun...

Drawing with a BBC Micro

The following...

MODE 12
PLOT 100,100
PLOT 500,500

x%=500
REPEAT
  PLOT x%,1000
  x%=x%+1
UNTIL x%=1500

... gave rise to something like this...

((image gra/bas3-1st.png goes here))

The letters (A, B and C) weren't on it. The dots and the line were much thinner.

If you put the code into your installation of BBC BASIC for SDL, you'll see it in all its hi-res glory! The resolution is so good that the dots at A and B would be hard to see in a screenshot, and even the C1 - C2 line might too thin to see.




((image gra/bas3-coods-20250223_1342.png goes here))

Before I discuss the BBC BASIC programming, I need to be sure that everyone understands coordinates. The diagram above is to help with that discussion.

Coordinates

Suppose you wanted to say "put a dot where the dot marked A" is.

You would use coordinates.

Any dot's position can be specified by just two numbers. Dot A is at 100,100. Dot C2 is at 1500,1000

The first number is called the dot's "x-axis coordinate", which is a grand name for how far across the page the dot is. I've shown the scale for the X axis in magenta (reddy/purple). The vertical dotted lines show a selection of places where any dot on that line would have the same X coordinate.

The distance is measured in "pixels" ("Picture ELements").

By the way, there is at least one deliberate mistake in the following. Stay awake! Don't believe everything you read. Can you spot the deliberate mistake. (I hope there aren't too many careless mistakes!)

Dot E's X-coordinate is 1000... it is 1000 pixels from the left side of the drawing area.

B and C2 are both 1000 pixels from the left edge, which is the long way of saying that their "X" ("X coordinate) is 1000.

Now! The Y coordinate...

Each dot, each place on the screen not only has an X coordinate, but it also has a Y coordinate. The Y coordinate tells you how far up the page the dot is.

ALL of the dots that make up the line from C1 to C2 have the same Y coordinate. (1000). (And each has a different X coordinate. As I said earlier, C1's X is 500, and C2's X is 1500.

Dot E's Y-coordinate is 750... it is 750 pixels up from the bottom of the drawing area.

People usually just say things like "E is at 1000,750". "Everyone knows" that you always give the X coordinate first.

All clear?

Maybe you knew all that? If you didn't, is it clear now? No? Re-read what's above!

Time for a test!

How would you say where dot D is? You'd tell us what its X and Y coordinates are!

And what do you think they are? (You'll have to make an estimate.) Does 1250, 450 seem about right? If not, what is right?

Answer later. Be sure you've thought carefully about the answer before you see it. It will be too late then to say, "Oh, I knew that."

Onward!

Hurrah! Now that we're all clear on coordinates, drawing with BBC BASIC programs is easy.

You start with a MODE 12 statement.

So far we've seen the PLOT statement. It puts a dot on the screen. It will have two arguments. (That's what we call numbers which "go with" a keyword.)

The arguments tell BBC BASIC where to put the dot. And they are very ordinary X, Y coordinates, so PLOT 100,200would put a dot on the drawing area 100 pixels across from the left edge and 200 pixels up from the bottom edge.

(I'm not sure of the maximum values allowed for the coordinates. If you said PLOT 2500,2500, BBC BASIC doesn't complain... you won't see any dot. The "dot" will "be" beyond the right hand edge and above the top edge of the drawing area.

You will see a dot very near the upper right hand corner if you doPLOT 1900,1520. (I don't know exactly how many columns/ rows of pixel are available.)

This resolution was unheard of in the days when the BBC Micro was new. MODE 12 wasn't 't available on it. It could do graphics, by the resolution was more modest.

Another lesson before we move on

I hope you now see dots A and B came from...

MODE 12
PLOT 100,100
PLOT 500,500

By the way, there were TWO deliberate mistakes in this section about coordinates. They were in "Does 1250, 450 seem about right [for where dot D is]?"

1250, 200 wouldn't have been a terrible answer... although it is still wrong. The right answer is 200,1250. How far across first, how far upsecond. You knew that. (I hope!)

The line from C1's X is 500 to C2

The line from C1's X is 500 to C2 was drawn by...

x%=500
REPEAT
  PLOT x%,1000
  x%=x%+1
UNTIL x%=1500

Study that! There's nothing "new" in it!

We could have done...

PLOT 500,1000
PLOT 501,1000
PLOT 502,1000
PLOT 503,1000
...etc down to...
.... PLOT 1500,1000

... if we had been gluttons for punishment.

The code was just So Much Better.

Study it. When you think you understand, try to write the program without looking at this page!

Good news!

Happily, the people who wrote the language realized that the way above which we used to draw the line from C1 to C2 was too tedious

So the also gave us MOVE and DRAW.

Each takes two numbers as arguments... the X and Y coordinates, as before.

We could have drawn the line from C1 to C2 with...

MOVE 500,1000
DRAW 1500,1000

The MOVE keyword moves "the pen" to the specified place. No mark is made on the screen because of a MOVE.

Next, DRAW cause a line to be drawn from wherever the pen happens to be at the moment (500,1000 when the program above is run) to 1500, 1000.

More fun!

White isn't the only color available! Do GCOL 4 at any point, and from that point on, the "ink" will be cyan. (A pretty shade of blue.

You can use 0-15 with GCOL... but beware: GCOL 0 makes the "ink" black. Drawing a black line on a black background doesn't get you very far... but it is useful for "erasing" a line you drew earlier!

GCOL 0-7 give you a selection of colors. 8-15 give you, respectively, the same colors but "intensified". (The "intensified" black is a gray.)

(Think about what...

MODE 12

GCOL 14
MOVE 500,1000
DRAW 1500,1000

WAIT(200)
GCOL 0
MOVE 500,1000
DRAW 1500,1000

... might do... and then try it. (And figure out why it did what it did, if it did something unexpected!)

What's all that good for?

By now, you should be able to draw a square!

MODE 12

GCOL 14
MOVE 500,1000
DRAW 600,1000
DRAW 600,1100
DRAW 500,1100
DRAW 500,1000

Ta da! You can draw things! Well, you SHOULD be able to draw things.

Challenges!

You should be able to do all of these, with the things explained above.

Can you draw a triangle? A house (a square, with a triangle on top.)

Can you draw two triangles, one above the other, with a small gap between them?

How about the following? The numbers are some coordinates which would "work". Hint. No one said you were only allowed one "MOVE". Think about how you would draw this, using pencil and paper. Then "just" tell the computer (program it) to do the same!...

((image gra/bas3-cube-coords.png goes here))

Bonus... and no thinking, remembering needed.

I said that BBC BASIC for SDL can do more that the textual stuff we did in the first tutorials.

I'm not going to say a lot about it, but the BBC BASIC emulator can (sometimes) make sounds like the original BBC did.

Try...

PRINT "The program is trying to make a sound."
PRINT "Don't worry if it doesn't succeed"
SOUND 1,-15,52,-1
SOUND 1,-15,56,50
WAIT 300
SOUND &11,-15,100,30

If you don't get any sounds, it will be because of the way your PC is set up.

By the way... you don't have to type all of that by hand. Select it. (Get help... even your grandmother probably knows how to select text, though she might not know the name!)

There are many ways to select text. Click just before the first letter. Press and hold the shift key. Use the down arrow first, and the others as needed to change the appearance of what you want to copy to the BASIC IDE.

The text selected. Release the shift key, if that's how you selected the text.

Right-click somewhere in the selected text. Click on "Copy".

Go to where you want to see the text appear. Right-click at the right place. Click "Paste".

If that didn't Just Work, get help from another human. Tell them you want help with "copy/paste". It's easy to do, a valuable skill, and hard to describe with mere words.


A few words from the sponsors...

Please get in touch if you discover flaws in this page. Please mention the page's URL. (wywtk.com/prgm/bas/bas3-move-draw.htm).

If you found this of interest, please mention in forums, give it a Facebook "like", Google "Plus", or whatever. If you want more of this stuff, help!? There's not much point in me writing these things, if no one feels they are of any use.



index sitemap
What's New at the Site Advanced search
Search tool (free) provided by FreeFind... whom I've used since 2002. Happy with it, obviously!

Unlike the clever Google search engine, this one merely looks for the words you type, so....
*    Spell them properly.
*    Don't bother with "How do I get rich?" That will merely return pages with "how", "do", "I"....

Please also note that I have four other sites, and that this search will not include them. They have their own search buttons.

My SheepdogSoftware.co.uk site, where you'll find my main homepage. It has links for other areas, such as education, programming, investing.

My SheepdogGuides.com site.

My SkyWoof.com site.

My site at Arunet.




How to email or write this page's editor, Tom Boyd. Please cite page's URL if you write.


Valid HTML? Page has been tested for compliance with INDUSTRY (not MS-only) standards, using the free, publicly accessible validator at validator.w3.org.

AND tested for... Valid CSS?



(eXTReMe tracker icon) Why is there a script or hidden graphic on this page? I have my web-traffic monitored for me by eXTReMe tracker. They offer a free tracker. If you want to try one, check out their site. Neither my webpages nor my programs incorporate spyware, but if the page has Google ads, they also involve scripts. Why do I mention the script? Be sure you know all you need to about spyware.

....... P a g e . . . E n d s .....