Программирование на smart BASIC. Урок 2

[Mr. Kibernetik]

Урок 2 - Графика

Кроме возможности выводить текст на экран, smart BASIC умеет рисовать. Для этого есть специальное графическое окно, в которое нужно переключиться командой GRAPHICS. Для переключения обратно в текстовое окно служит команда TEXT. Эти два окна - текстовое и графическое - никак не зависят друг от друга, и переключение между ними не влияет на их содержимое. Достаточно один раз переключиться в нужное окно - и можно в нем рисовать или выводить текст.

Программа:

Code: Select all

GRAPHICS
DRAW LINE 0,0 TO 100,100

переключается в графическое окно и рисует в нем линию из точки с координатами 0,0 в точку с координатами 100,100.

Графическое окно состоит из точек, каждая точка имеет свои координаты. Начало координат - в верхнем левом углу. Ось X направлена вправо, ось Y - вниз от начала координат.

Можно не только рисовать линии, но и заливать цветом фигуры. Например программа:

Code: Select all

GRAPHICS
FILL RECT 0,0 TO 100,100

закрасит прямоугольник с вершинами в точках 0,0 и 100,100.

Конечно, как цвет линий, так и цвет заливки можно менять. Для этого существуют команды DRAW COLOR и FILL COLOR. Цвет в этих командах задается тремя величинами: красной, зеленой и синей компонентами цвета.

Сменили цвет - и можно им пользоваться:

Code: Select all

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

ДЛЯ ПРОГРАММИСТОВ

В smart BASIC точка и пиксел - это разные понятия. Благодаря измерению координат в точках графические команды работают одинаково как на retina, так и на не-retina дисплеях. Для доступа к экрану на уровне пикселов существует специальный набор команд, позволяющих это сделать.

ЗАДАЧА 2
Раскрасьте экран в цвета национального флага.

Кроме цвета также можно изменять прозрачность, которая еще называется альфа-каналом:

Code: Select all

GRAPHICS
GRAPHICS CLEAR 'очистили экран
FOR X=0 TO 100
  DRAW ALPHA X / 100
  DRAW LINE X,0 TO X,100
NEXT X

В этой программе вы видите много нового.
Во-первых, здесь после символа " ' " стоит комментарий. Таким образом вы можете писать для себя пояснения прямо в тексте программы - после символа " ' " и до конца текущей строки.
Во-вторых, здесь используется цикл: переменная X автоматически меняет свое значение от 0 до 100, увеличивая его каждый раз на единицу. Началом цикла служит команда FOR, а концом цикла - команда NEXT. После того, как все значения будут перебраны, цикл закончится.
В-третьих, вы видите, что черный фон графического окна - это еще не самое "очищенное" графическое окно.

Для примера еще одна программа с циклом:

Code: Select all

FOR X=1 TO 10
  PRINT X
NEXT X

ЗАДАЧА 3
Нарисуйте на экране радугу.

[Dedjto]

В-третьих, вы видите, что черный фон графического окна - это

Здесь что-то не дописано?

[Mr. Kibernetik]

В-третьих, вы видите, что черный фон графического окна - это

Здесь что-то не дописано?

Верно! Спасибо, что подметили - я дописал

[Dedjto]

Флаг быстро сделала, а вот с радугой загвоздка.
Код:
GRAPHICS
draw color 1,0,0 'красный
FOR y=0 TO 100
DRAW ALPHA y / 100
DRAW LINE 0,y TO 800,y
NEXT y

draw color 1,0,0 'оранжевый
FOR y=100 TO 200
DRAW ALPHA y / 200
DRAW LINE 0,y TO 800,y
NEXT y

draw color 1,1,0 'оранжевый
FOR y=100 TO 200
DRAW ALPHA y / 300
DRAW LINE 0,y TO 800,y
NEXT y

draw color 1,1,0 'желтый
FOR y=200 TO 300
DRAW ALPHA y / 300
DRAW LINE 0,y TO 800,y
NEXT y

draw color 0,1,0 'зеленый
FOR y=300 TO 400
DRAW ALPHA y / 400
DRAW LINE 0,y TO 800,y
NEXT y

draw color 0,1,1 'голубой
FOR y=400 TO 500
DRAW ALPHA y / 500
DRAW LINE 0,y TO 800,y
NEXT y

draw color 0,0,1 'синий
FOR y=500 TO 600
DRAW ALPHA y / 600
DRAW LINE 0,y TO 800,y
NEXT y

draw color 1,0,0 'фиолетовый
FOR y=600 TO 700
DRAW ALPHA y / 700
DRAW LINE 0,y TO 800,y
NEXT y

draw color 0,0,1 'фиолетовый
FOR y=600 TO 700
DRAW ALPHA y / 800
DRAW LINE 0,y TO 800,y
NEXT y

Радуга прямоугольная только получилась. Дугу не получается нарисовать....

[Mr. Kibernetik]

Радуга прямоугольная только получилась. Дугу не получается нарисовать....

Code: Select all

graphics
option angle degrees
draw arc 150,150,100,-180,0

команда OPTION ANGLE DEGREES здесь для удобства ввода начального (-180) и конечного (0) углов дуги - чтобы угол можно было указать в градусах, а не в радианах

[Dedjto]

Спасибо за подсказку.

[Dedjto]

Вот такая радуга теперь ...

Код:

GRAPHICS

option angle degrees

DRAW color 1,0,0 'красный
DRAW SIZE 30
DRAW ARC 400,400,300,-180,0,0

DRAW color 1,0.5,0 'оранжевый
DRAW SIZE 30
DRAW ARC 400,400,270,-180,0,0

DRAW color 1,1,0 'желтый
DRAW SIZE 30
DRAW ARC 400,400,240,-180,0,0

DRAW color 0,1,0 'зеленый
DRAW SIZE 30
DRAW ARC 400,400,210,-180,0,0

DRAW color 0,1,1 'голубой
DRAW SIZE 30
DRAW ARC 400,400,180,-180,0,0

DRAW color 0,0,1 'синий
DRAW SIZE 30
DRAW ARC 400,400,150,-180,0,0

DRAW color 0.5,0,1 'фиолетовый
DRAW SIZE 30
DRAW ARC 400,400,120,-180,0,0

[Mr. Kibernetik]

Классная радуга!

[DmitryiS]

Флаг это не сложно.

graphics
fill color 1,1,1
fill rect 100,100 to 700,200
fill color 0,0,1
fill rect 100,200 to 700,300
fill color 1,0,0
fill rect 100,300 to 700,400

[DmitryiS]

Радуга

graphics
fill color 0,0,1
fill rect 0,0 to 800,400
fill color 0,1,0
fill rect 0,400 to 800,800
fill color 1,1,0
fill circle 650,100 size 50
option angle degrees
draw size 20
draw color 1,0,0
draw arc 400,400,300,-180,0,0
draw color 1,0.5,0
draw arc 400,400,280,-180,0,0
draw color 1,1,0
draw arc 400,400,260,-180,0,0
draw color 0,1,0
draw arc 400,400,240,-180,0,0
draw color 0,1,1
draw arc 400,400,220,-180,0,0
draw color 0,0,1
draw arc 400,400,200,-180,0,0
draw color 0.5,0,1
draw arc 400,400,180,-180,0,0

А как задавать сложные цвета по системе RGB?
Как в этом списке: https://ru.wikipedia.org/wiki/%D0%A1%D0 ... 0%BE%D0%B2
Если значения каждой из трех позиций могут быть от 0 до 255, а в документации к программе сказано, что эти значения могут быть от 0 до 1.