Learning to Program with the Cybiko Handheld Computer Using B2C

Chapter 14 : Simple Graphics

The Cybiko is a very capable graphics machine. In this section we cover the non-bitmapped graphics commands.  B2C has 5 basic graphic commands with which to draw on the screen. 

Cls – Clear screen

Cls stands for Clear Screen.  It will turn all pixels on the display to the background color (usually white).  It will also erase all text on the screen.  Cls takes no parameters

Cls

Paper – set the color of the background

B2C has a concept of a foreground color and a background color.  The background color is set with the Paper command.  Whenever you do a Cls – the entire display is set to the color defined by the Paper command.  There are 4 colors to chose from.  Color 0 is white.  Color 1 is light grey.  Color 2 is dark grey.  Color 3 is black.  There are constants defined for your use:

0 – White
1 – LtGrey
2 - DkGrey
3 - Black

Paper Black ' set the background color to black
Cls ' color the screen with the background color

Ink – set the color of the foreground

B2C's foreground color is used to draw text (Print) and lines (Line). There are constants defined for your use:

0 – White
1 – LtGrey
2 - DkGrey
3 - Black
 
 
Paper White ' set the background to White
Ink Black ' set the foreground to black
Cls ' clear the background
line -80, -50, 80, 50 ' draw a diagonal line

Line – draw a line on the screen

The B2C display area is an X/Y coordinate system.  You place a line on the screen by telling B2C to position the cursor at a horizontal (X) coordinate and a vertical (Y) coordinate.  The valid values for the screen coordinates are –80 to 79 in the X (horizontal) direction, and –50 to 49 in the Y (vertical) direction.  You may specify values as large as +/- 20,000 in either direction, but only the pixels, which are in the screen coordinates (-80 to 79 and –50 to 49), will be displayed.

Paper White ' set the background to White
Ink Black ' set the foreground to black
Cls ' clear the background
line -80, -50, 80, 50 ' draw a diagonal line

It is possible to use a different coordinate system.  The so-called 'C' coordinate system runs from 0 to 159 in the X direction and from 0 to 99 in the Y direction.  You can switch to this system by placing

OPTION C_COORDS

at the top of your program.

Point – draw a single pixel on the screen

Draw a single pixel at the x/y coordinates (see Line, above).

Paper White ' set the background to White
Ink Black ' set the foreground to black
Cls ' clear the background
Point 0, 0 ' draw a dot in the center

Example Program

'chapter 13
'qix line drawing
'requires B2C-2
'see below for B2C-1
 
dim n as int
print "Number of lines"
input n
 
dim n1 as int
dim n2 as int
n1=n-1
n2=n1-1
 
dim x0[n] as int
dim y0[n] as int
dim x1[n] as int
dim y1[n] as int
dim dx0 as int
dim dy0 as int
dim dx1 as int
dim dy1 as int
dim seed as int
 
sub newdirection(j as int)
  if (x0[j] < -80 or x0[j] > 80) then
    dx0 = -dx0
  end if
  if (x1[j] < -80 or x1[j] > 80) then
    dx1 = -dx1
  end if
  if (y0[j] < -43 or y0[j] > 43) then
    dy0 = -dy0
  end if
  if (y1[j] < -80 or y1[j] > 80) then
    dy1 = -dy1
  end if
end sub
 
' for B2C1 do the following
' dx0=-3
' dx1=-1
' dy0=1
' dy1=2
'and remove the while loops...
 
' select random motion offsets
while dx0=0
  dx0 = 4-rnd(9)
wend
while dx1=0
  dx1 = 4-rnd(9)
wend
while dy0=0
  dy0 = 4-rnd(9)
wend
while dy1=0
  dy1 = 4-rnd(9)
wend
 
'select initial random line
x0[0] = rnd(80)
x1[0] = rnd(80)
y0[0] = rnd(43)
y1[0] = rnd(43)
line x0[0], y0[0], x1[0], y1[0]
 
cls
 
'fill up queue with trailing lines and print them
for i=1 to n-1
  x0[i] = x0[i-1] + dx0
  x1[i] = x0[i-1] + dx1
  y0[i] = y0[i-1] + dy0
  y1[i] = y1[i-1] + dy1
  line x0[i], y0[i], x1[i], y1[i]
  newdirection(i)
next
 
for i=0 to 1 step 0
  ink 0
  line x0[0], y0[0], x1[0], y1[0]
  ink 3
  for j=1 to n-1 
    x0[j-1] = x0[j]
    x1[j-1] = x1[j]
    y0[j-1] = y0[j]
    y1[j-1] = y1[j]
  next
  x0[n1] = x0[n2] + dx0
  y0[n1] = y0[n2] + dy0
  x1[n1] = x1[n2] + dx1
  y1[n1] = y1[n2] + dy1
  line x0[n1], y0[n1], x1[n1], y1[n1]
  newdirection(n1)
next

  .