An easy to use BASIC language
and IDE for education.

Tutorial Three

Tutorial Three - Drawing Pictures

One of the most exciting things to do with a computer is to draw things with it. Usually you would do this with a paint program, but what if you didn't have one? Or what if you wanted to draw a circle, and then have it move across the screen? This tutorial will show you how to do basic drawing.

First, let's try drawing a few dots.

plot 2,2 
plot 2,3
plot 3,3

When you run the program, you should see a very small L-shaped dot on the Graphics Output window, near the upper left corner. Look closely, the dots are small! A magnified version of the screen is shown here:


From this picture, you can see how the screen is divided into a grid. Each dot on that grid has a location. You can follow the number at the top of the grid and on the side to see which dot is which. The top dot of the L is at 2,2 (2 on top, 2 on the side). The next one down from that is at 2,3 (2 on the top, 3 on the side). The bottom right dot is at 3,3 (3 on the top, 3 on the side). So, to add dots, you can add plot commands with the location of other dots that haven't been filled in yet.

Each dot on the screen is called a "pixel." The numbers that show where the pixel is are called its "coordinates." We can draw pictures by changing the colors of the pixels. This is what the plot command does. There are a few other commands that will help us draw, too.

What if we wanted to draw a large rectangle? It would take a long time to type in each of those pixels one at a time. Luckily, BASIC-256 has the RECT command to draw rectangles and squares. Let's try it now.

rect 2,2,6,5

When you run the program, you should see a small rectangle in the upper left hand side of the Graphics Output window. The magnified version of this is shown below:


Here's how the RECT command works. The first two numbers are the location (coordinates) of the top left corner of the rectangle. The next number is how many pixels wide the rectangle will be, and the last number is how many pixels tall the rectangle will be. You can try changing these numbers to see what happens.

Finally, there's the CIRCLE command, which draws a (you guessed it) circle on the screen. It's used like this:

circle 60,60,10

Again, those first two numbers are the coordinates of the middle of the circle. The third number is how wide you want the circle to be. You can try changing these numbers to see what happens.

By now, you might be tired of the color black. There's one more command, COLOR, which changes the color of whatever you draw next. You can try it like this:

color red
circle 70,70,10
color green
circle 90,90,10

Ooooh, pretty. You can try other colors and draw more circles, or you can quit now and try to sell your art as an abstract painting. But if you want to use more colors, here are the names of the ones BASIC-256 knows about:

white black
red darkred
green darkgreen
blue darkblue
cyan darkcyan
purple darkpurple
yellow darkyellow
orange darkorange
gray darkgray

The "clear" color really isn't a color, however. You can think of it as an eraser. When you draw with the clear color, it will erase everything underneath it. Let's try it:

color yellow
circle 120,120,20
color clear
circle 128,120,15

You should see the first, bigger yellow circle with a smaller circle cut out of it, so that it looks like a moon. That cut-out part was the clear color circle. You could draw a face this way, with a big yellow circle with eyes and a mouth cut out with smaller clear circles.

Congratulations! You've finished the third tutorial. By now, you should understand:

  • How to draw using PLOT, RECT, and CIRCLE
  • How to change the color using COLOR
  • How to erase using the clear color


Find us on Facebook.    So You Want to Learn to Program?

BASIC-256 is licensed under the GNU General Public License.
Last modified: 2010-06-04, 11:58

© 2010 Contributors to the BASIC-256 Project

powered by phpSQLiteCMS

Warning: Cannot modify header information - headers already sent by (output started at /home/content/17/4039117/html/basic256/templates/b256.tpl:2) in /home/content/17/4039117/html/basic256/cms/includes/ on line 12

Warning: Cannot modify header information - headers already sent by (output started at /home/content/17/4039117/html/basic256/templates/b256.tpl:2) in /home/content/17/4039117/html/basic256/cms/includes/ on line 13

Warning: Cannot modify header information - headers already sent by (output started at /home/content/17/4039117/html/basic256/templates/b256.tpl:2) in /home/content/17/4039117/html/basic256/cms/includes/ on line 14
BASIC-256 - Error



An error occurred while processing this directive.

Message: SQLSTATE[HY000]: General error: 11 database disk image is malformed
Code: HY000
File: /home/content/17/4039117/html/basic256/templates/
Line: 20