Smart BASIC Programming. Lesson 2

[Mr. Kibernetik]

Lesson 2 - Graphics

Smart BASIC can not only print text to screen, it can also draw. Graphics window exists for this purpose, and you need to switch to it with GRAPHICS command. TEXT command is used to switch back to text window. These two - text and graphics windows - don't affect each other and switching between them does not affect their contents. It is sufficient to switch to desired window once - and you can draw or print text there.

Program:

Code: Select all

GRAPHICS
DRAW LINE 0,0 TO 100,100

switches to graphics window and draws a line in it from point with coordinates 0,0 to point with coordinates 100,100.

Graphics window consists of points, each point having its own coordinates. Origin of coordinates is in top left corner of the screen. X-axis is directed to the right, Y-axis is directed to the bottom from the origin.

It is possible not only to draw lines but also to fill figures. For example program:

Code: Select all

GRAPHICS
FILL RECT 0,0 TO 100,100

fills rectangle with corners in points 0,0 and 100,100.

Of course you can set colors for drawing and filling. There are commands DRAW COLOR and FILL COLOR for this purpose. Color is set with three numbers: red, green and blue color components.

You change the color - and then can use it:

Code: Select all

GRAPHICS
DRAW COLOR 0,1,0
DRAW LINE 0,0 TO 100,100

FOR PROGRAMMERS
Point and pixel are two different things in smart BASIC. By measuring coordinates in points graphics commands work similarly both on retina and non-retina screens. For pixel-level access to the screen special commands can be used.

EXERCISE 2
Paint the screen in national flag colors.

Not only color but also transparency (which is also called an alpha-channel) can be set:

Code: Select all

GRAPHICS
GRAPHICS CLEAR 'we clear the screen
FOR X=0 TO 100
  DRAW ALPHA X / 100
  DRAW LINE X,0 TO X,100
NEXT X

You see a lot of new things here.
At first, there is a comment after " ' " character. So, you can leave notes right in your programs - after " ' " character and to the end of the string.
At second, you can see cycle here: variable X changes its values automatically from 0 to 100, increasing it on 1 with each loop. Command FOR is the beginning of cycle and command NEXT is its end. Cycle is finished when its value is iterated to the end.
At third, you can see that black screen background is not a totally "cleared" state of graphics window.

One more example of program with cycle:

Code: Select all

FOR X=1 TO 10
  PRINT X
NEXT X

EXERCISE 3
Draw rainbow on the screen.

[Jpalluin]

Bonjour,

Below my rainbow:

rem rainbow

graphics

graphics clear


for x=1 to 100

draw arc screen_width()/2,500,500-x,3.14,0,0
draw color 1,x*(0.02),x*(0.002)

next x

for x=100 to 200
draw arc screen_width()/2,500,500-x,3.14,0,0
draw color 1-(x*0.0013),x*(0.02),x*(0.005)

next x