Авторский курс программирования на yabasic от @Terrazocultor

[Anton]

Канал YouTube @Terrazocultor

Глава 1. ВВОДНАЯ ИНФОРМАЦИЯ, ПЕРВЫЕ ШАГИ

Показать

1. Представление курса
2. Скачивание и установка YaBasic
3. Интерпретируемые и компилируемые языки
4. Термины и концепции ИТ, которые полезно знать
5. Ограничения памяти. Проверяем доступные объемы
6. Контроверсийные номера строк (уже устарели)
7. Скорость вычислений. Сколько времени займёт расчёт одного миллиона квадратных корней?
8. Бонус: Программа игры «Четыре в ряд», против компьютера, создана мной в течение двух месяцев. Содержит более 3000 строк кода.
9. Видеоматериал

Глава 2. ТЕКСТОВЫЙ РЕЖИМ. Print, Chr$,…

Показать

1. Текстовый режим
2. Настройка текстового окна
3. Команда CLEAR SCREEN
4. Команда PRINT
5. Функция CHR$()
6. Функция ASC()
7. УГОЛОК ТЕОРИИ
   7.1 Таблица ASCII. Символ
8. Видео

Глава 3. ГРАФИЧЕСКИЙ РЕЖИМ

Показать

1. Графический режим. Пиксель
2. Вход в графический режим. Open window
3. Системные переменные WinWidth и WinHeight (ширина и высота в пикселях)
4. Рисование отдельных пикселей. Команда Dot
5. Установка цвета рисования и фона: Color и Backcolor
6. Проведение прямой линии между двумя точками. Команда Line
7. Рисование окружности. Circle
8. Рисование прямоугольника. Rectangle
9. Рисование треугольника. Triangle
10. Вывод текста в графическое окно. Команда Text
11. Очистка содержимого графического экрана. Clear window
12. Вернуть всё как было: закрыть графическое окно. Close window
13. Уголок ТЕОРИИ: Важность документирования программы. Оператор REM
14. Видео

[Anton]

[Anton]

1. Графический режим. Пиксель

В предыдущей главе (2) мы рассмотрели текстовый режим, в котором наименьшей единицей информации на экране является символ. В этой главе речь пойдёт о графическом режиме, где наименьшей единицей информации является пиксель. Пиксель — это точка, крошечная точка на экране или мониторе, которая может светиться с большей или меньшей интенсивностью, тем или иным цветом.

На самом деле пиксель — это не одна точка, а три очень близко расположенные точки. Но наш глаз видит только одну точку — совокупность этих трёх. Каждая из трёх точек светится своим цветом: красным, зелёным и синим — основными цветами аддитивного смешения (свет, а не пигменты). Модулируя интенсивность свечения каждой из этих трёх точек, образующих пиксель, можно получить любой цвет — от чёрного до белого, со всеми промежуточными оттенками.

Объединяя несколько пикселей, можно формировать изображения.

Применяя математические формулы, можно легко генерировать геометрические фигуры, хотя некоторые из них уже предопределены в языке Basic.

Поскольку мы можем работать на уровне пикселей, теоретически можно нарисовать на экране что угодно.

primer_ekrana.jpg

У пикселя есть несколько атрибутов:

1. Позиция на экране — координаты x, y
2. Цвет

Графический экран также организован в строки и столбцы, но теперь это не символы, а пиксели, и их гораздо больше, чем символов. Чем больше пикселей на экране, тем выше его разрешение. Обычное разрешение — 1500 пикселей по горизонтали и 800 по вертикали, говорят: 1500×800 пикселей. Именно такое разрешение используется в графическом окне игры «Четыре в ряд» из главы 1. Для сравнения вернёмся к текстовому режиму: типичная конфигурация 80×25 символов = 2000 символов, а теперь сравните с графическим режимом 1500×800 = 1 200 000 пикселей. Вот такая разница…

К сожалению, в Yabasic нет библиотеки продвинутых графических процедур, поэтому, если кто-то захочет их иметь, ему придётся создавать их самостоятельно. Я имею в виду, что довольно легко сделать более-менее базовые элементы, такие как окно, рамку, статистический график, кнопку и т. п., но для создания продвинутой графической процедуры потребуются заметные усилия (и время).

С точки зрения скорости обработки графический экран всегда обрабатывается медленнее текстового, а также потребляет значительно больше памяти. Поэтому программы, интенсивно использующие графические возможности, часто требуют специального оборудования, например мощных видеокарт, как в случае с современными видеоиграми, авиасимуляторами…

[Anton]

2. Вход в графический режим. Open window

При запуске программы Yabasic по умолчанию подразумевается текстовый режим. Чтобы перейти в графический режим, необходимо открыть графическое окно. То есть текстовое окно не «переключается» в графический режим, а создаётся новое окно: у нас будет ДВА окна — текстовое (которое можно использовать или нет) и только что открытое графическое окно.

Для этого используется команда Open window, её синтаксис:

Код: Выделить всё

Open Window  Ancho, Alto, "Fuente"

• «Ancho» — число, указывающее ширину окна в пикселях.
• «Alto» — число, указывающее высоту окна в пикселях.
• Третий параметр «Fuente» необязателен и задаёт шрифт, который будет использоваться для вывода текста в графическом окне. Его можно изменить в любой момент в команде Text, которая является аналогом Print в графическом режиме.

Одновременно можно открыть только одно графическое окно.

Оба окна (текстовое и графическое) можно свободно перемещать по экрану (с помощью мыши), накладывать друг на друга в любом порядке. Существует «правильный» способ закрыть графическое окно (мы его рассмотрим), но можно закрыть и «грубо»: щёлкнув мышью по крестику в правом верхнем углу окна (закрыть окно). Это равносильно прерыванию и завершению программы.

Пример использования Open window:

Код: Выделить всё

Clear Screen
Open window 1500,750,"arial"
Circle 100,100,70
Inkey$
Close window
End

На следующем экране открывается графическое окно размером 300 пикселей по горизонтали и 200 по вертикали (Open Window 300,200). Затем рисуется окружность с центром в точке (100,100) и радиусом 70 пикселей. Инструкция Inkey$ приостанавливает программу в ожидании нажатия клавиши, чтобы программа не завершилась сразу: иначе мы ничего не успеем увидеть. Close window закрывает графическое окно, его содержимое (окружность) исчезает, после чего программа завершается.

open_window.jpg

[Anton]

3. Системные переменные WinWidth и WinHeight (ширина и высота в пикселях)

Эти две переменные хранят текущий размер графического окна в пикселях.

Программист или любой человек может узнать размер окна, посмотрев на инструкцию open window и просто прочитав её аргументы. Но ни компьютер, ни программа этого сделать не могут. Для этого и существуют эти две переменные:

• WinWidth — ширина графического экрана в пикселях.
• WinHeight — высота графического экрана в пикселях.

Сами по себе эти переменные не используются; их нужно применять в сочетании с командой Peek(), которую мы рассмотрим позже, поскольку Peek() очень универсальна и служит для многих разных целей. Следующая программа показывает, как с помощью этих двух переменных узнать размеры графического окна.

Код: Выделить всё

Clear Screen
Open window 300,200
Ancho = peek("winwidth")
Alto = peek("winheight")
Print "La ventana grafica es de ",Ancho," x ",Alto," pixeles"
Inkey$
Close window

gradica.jpg

Код выше очищает текстовое окно, открывает графическое окно 300×200, затем с помощью Peek определяет ширину и высоту окна; командой Print выводит их на экран, после чего Inkey$ ждёт нажатия клавиши, закрывает графическое окно и завершает программу.

Важно отметить, что открытие графического окна не мешает продолжать использовать текстовое окно, как в этом случае, хотя у каждого окна свои команды. Например:

• Для вывода текста в текстовое окно используется PRINT.
• Для вывода текста в графическое окно используется TEXT (эту команду мы рассмотрим позже в этой же главе).

[Anton]

4. Рисование отдельных пикселей. Команда Dot

Инструкция Basic, позволяющая нарисовать отдельный пиксель, — DOT.

Синтаксис:

Код: Выделить всё

Dot x,y

где x и y — координаты пикселя в графическом окне.

Здесь могут пригодиться две переменные из предыдущего пункта (3): peek("winwidth") и peek("winheight"), которые дают размеры графического окна. Так мы избежим вывода пикселей за пределы окна. В таком случае ничего не сломается, но, естественно, пиксель не будет нарисован, если выйти за границы.

Пример рисования пикселей:

Код: Выделить всё

Clear Screen
Open window 300,300
For x = 10 To 250
   Dot x,150
Next x
Inkey$
For x = 10 To 250
   Clear Dot x,150
Next x
Inkey$
Close window
End

dot.jpg

• Строка 1: очистить текстовый экран (Clear Screen)
• Строка 2: открыть графическое окно 300×300
• Строки 3–5: цикл, который несколько раз повторяет команду Dot с координатой x, возрастающей от 10 до 250 с шагом 10 (благодаря циклу), а координата y фиксирована и равна 150
• Строка 6: уже знакомый Inkey$ приостанавливает программу до нажатия клавиши

В графическом окне можно увидеть горизонтальный ряд пикселей примерно посередине высоты окна. Они действительно маленькие, их почти не видно.

После нажатия любой клавиши программа продолжается со строки 7, где находится ещё один цикл for-next, но теперь в команде Dot используется ключевое слово Clear, поэтому на этот раз пиксели не рисуются, а стираются.

После ожидания ещё одной клавиши с помощью Inkey$ в строке 10 программа закрывает графическое окно и завершается командой End в последней строке 12.

[Anton]

5. Установка цвета рисования и фона: Color и Backcolor

До сих пор мы работали в графическом режиме, не обращая внимания на цвет.

Как и в текстовом режиме, можно выбрать цвет рисования и цвет фона. Инструкции для выбора цвета в графическом режиме — Color и BackColor.

Color задаёт цвет переднего плана (рисования) и имеет следующий синтаксис:

Код: Выделить всё

Color Red, Green, Blue

Red, Green и Blue (красный, зелёный и синий) — три числа от 0 до 255, с помощью которых можно задать количество каждого из трёх цветов (0 — ничего; 255 — максимум). Таким образом получается 256 × 256 × 256 = почти 17 миллионов различных цветов.

Для белого используется Color 255, 255, 255, для чёрного — Color 0, 0, 0.

В качестве альтернативы можно сохранить три числа в строковую переменную и дать ей имя цвета — так гораздо понятнее, чем работать с тремя числами. Следующий пример рисует жёлтую окружность:

Код: Выделить всё

Clear Screen
Open window 200, 200
Yellow$ = (255, 255, 0)    
Color Yellow$
Circle 100, 100, 50
Inkey$
Close window
End

На следующем графическом экране показан ряд окружностей с предустановленными цветами. В левой части виден код программы, где выполнены все 8 возможных комбинаций, присваивая значения 255 или 0 красному, зелёному и синему.

Код: Выделить всё

Clear Screen
Open window 700,500
Negro$="0,0,0"
Blanco$="255,255,255"
Rojo$="255,0,0"
Verde$="0,255,0"
Azul$="0,0,255"
Amarillo$="255,255,0"
Magenta$="255,0,255"
Cyan$="0,255,255"
Color Negro$
Fill Circle 40,200,30
Color Blanco$
Fill Circle 110,200,30
Color Rojo$
Fill Circle 180,200,30
Color Verde$
Fill Circle 250,200,30
Color Azul$
Fill Circle 320,200,30
Color Amarillo$
Fill Circle 390,200,30
Color Cyan$
Fill Circle 460,200,30
Color Magenta$
Fill Circle 530,200,30
Inkey$
Close window
End

colores.jpg

Также важно установить цвет фона.

Это делается с помощью инструкции BackColor со следующим синтаксисом:

Код: Выделить всё

BackColor Red, Green, Blue

Использование этой переменной такое же, как и у Color, и также можно заранее сохранить цвета в строковые переменные, давая им имена, которые ясно говорят, какому цвету они соответствуют:

Код: Выделить всё

Blanco$ = "255,255,255"
Amarillo$ = "255,255,0"
Magenta$ = "255,0,255"

Гораздо понятнее написать BackColor Magenta$, чем BackColor 255,0,255, не так ли?

Чтобы BackColor возымел действие, нужно сначала открыть графическое окно с помощью open window. Простое объявление цвета фона через BackColor ничего не изменит. Необходимо использовать ещё одну очень простую команду — Clear window, аналог Clear screen для текстового режима, но в графическом. Тогда цвет фона будет установлен.

Это показано в следующей программе и её результате: фон графического окна становится синим, а затем рисуется красный круг. Есть новшество: теперь это не просто окружность, а закрашенный круг, потому что в команде circle использована клавиша fill (заливка).

Код: Выделить всё

Clear Screen
Rojo$="255,0,0"
Azul$="0,0,255"
Open window 400,300
BackColor Azul$
Inkey$
Clear window
Inkey$
Color Rojo$
Fill Circle 200,150,80
Inkey$
Close window
End

backcolor.jpg

Маленькая деталь, но я её упомяну: можно взаимозаменяемо использовать слова Color и Colour, а также BackColor и BackColour. Работают они совершенно одинаково.

[Anton]

6. Проведение прямой линии между двумя точками. Команда Line

Мы можем провести линию между двумя точками (двумя пикселями) определённого цвета с помощью команды Line. Эта команда проста, но имеет разные варианты использования, и её синтаксис немного меняется. Рассмотрим их все.

Самый простой и очевидный вариант:

Код: Выделить всё

Line xo,yo,xd,yd

Рисует линию из точки с координатами xo,yo (x начала, y начала) в точку xd, yd (x конца, y конца). Пример:

Есть вариант с частицей To («к», «до»), который делает структуру команды более понятной. Этот вариант делает то же самое, меняется только форма записи.

Код: Выделить всё

Line xo,yo to xd,yd

Пример обоих форматов Line. Прямые пересекаются, потому что координаты начала и конца каждой линии так заданы. Код программы слева. Я выбрал красный цвет фона и жёлтый — для рисования.

Код: Выделить всё

Clear Screen
Rojo$="255,0,0"
Amarillo$="255,255,0"
Open window 400,300
BackColor Rojo$
Clear window
Color Amarillo$
Line 40,40,300,250
Line 100,280 To 200,70
Inkey$
Close window
End

line1.jpg

Это классический способ использования Line: провести линию от одного пикселя до другого. В Yabasic есть и другой способ использования Line: New curve и Close curve.

Начнём с того, что «curve» (кривая) — понятие относительное, ведь из прямых линий мы вряд ли нарисуем настоящие кривые (разве что работая с очень маленькими интервалами; вспомним, что окружность — это многоугольник с бесконечным числом сторон). Поэтому под «curve» следует понимать скорее многоугольники. Действительно, из множества прямых можно составлять фигуры.

Чтобы показать, как использовать New curve в сочетании с Line, лучше всего подойдёт пример:

Код: Выделить всё

Clear Screen
open window 200,200
new curve
line to 100,50
Inkey$
line to 150,150
Inkey$
line to 50,150
Inkey$
close curve
Inkey$
Close window
End

newcureline.jpg

Четвёртая строка программы задаёт начальную точку (100, 50).
Шестая строка проводит первую линию треугольника.
Восьмая строка проводит вторую линию треугольника.
Как провести третью, последнюю линию?
Команда Close curve (замкнуть кривую) завершает многоугольник.

Здесь, чтобы нарисовать линию, мы отталкиваемся от предыдущей позиции, поэтому не нужны четыре параметра: достаточно двух (координат конечной точки). Поэтому используется: Line to x,y.

Чтобы нарисовать n линий, потребуется n-1 инструкций Line x,y, так как последняя линия (замыкающая) рисуется автоматически, когда программа встречает инструкцию Close curve.

Для рисования фигур этот метод выгоден, поскольку экономит по паре координат в каждой команде Line.

[Anton]

7. Рисование окружности. Circle

Есть четыре варианта:

• Circle x,y,r — рисует окружность с центром в (x,y) и радиусом r. Внутренняя область не закрашивается.
• Clear Circle x,y,r — стирает окружность (её контур) с центром в (x,y) и радиусом r.
• Fill Circle x,y,r — рисует закрашенную окружность (то есть круг) текущим активным цветом, с центром в (x,y) и радиусом r.
• Clear Fill Circle x,y,r — стирает всю область круга с центром в (x,y) и радиусом r.

В следующем упражнении открывается графическое окно и рисуются три окружности: одна — только контур (команда Circle), а две другие — с клавишей fill, то есть закрашенные круги. После этого программа ждёт нажатия клавиши и затем стирает все три круга:

• Левый стирается полностью, так как это только контур — используется Clear Circle.
• У среднего стирается только периферия — также Clear Circle.
• Правый стирается полностью, потому что используется Fill Clear.

Поскольку это «динамическое» упражнение, здесь я не привожу скриншот; рекомендую посмотреть его в видео.

Как видим, Fill закрашивает окружность и при создании, и при стирании. Команда Circle без Fill работает только с периметром, то есть, строго говоря, с окружностью.

Программа «Четыре в ряд» использует Circle, Fill и Clear, чтобы отображать фишки и создавать анимацию «падения» фишки.

Если окружность частично выходит за пределы графического экрана, никакой ошибки не возникает — программист должен сам это учитывать.

Не связано с предыдущим упражнением, но показано несколько окружностей и кругов, созданных с помощью Circle и Fill Circle. Соответствующая программа — в левой части экрана.

Код: Выделить всё

Clear Screen
open window 500,300
Blanco$="255,255,255"
Magenta$="255,0,255"
Color Magenta$
BackColor Blanco$
Clear window
For x = 1 To 400 Step 80
   Circle x+80,60,30
   Circle x+80,150,20
   Fill Circle x+80,230,30
Next x
Inkey$
Close window
End

circle2.jpg

[Anton]

8. Рисование прямоугольника. Rectangle

С помощью команды Rectangle можно рисовать прямоугольники (и, конечно, квадраты). Также допустимы две сокращённые формы — синонимы Rectangle: Rect и Box.

Необходимы координаты двух точек, соответствующих двум противоположным вершинам прямоугольника, который мы хотим нарисовать. Следующий пример рисует прямоугольник от координаты (50,50) до координаты (150,100), то есть шириной 100 пикселей и высотой 50 пикселей.

Код: Выделить всё

Rectangle 50,50,150,100

Также можно записать так:

Код: Выделить всё

Rectangle 50,50 To 150,100

И так:

Код: Выделить всё

Rect 50,50,150,100

И так:

Код: Выделить всё

Box 50,50,150,100

Команда Rectangle также допускает клавишу Fill (для заливки цветом) и Clear (для стирания прямоугольника).

Ниже пример, в котором на голубом фоне рисуются:

• пустой прямоугольник,
• закрашенный жёлтым прямоугольник,
• пустой квадрат (все четыре стороны равны),
• ещё один квадрат, закрашенный синим.

Код: Выделить всё

Clear Screen
Cyan$="0,255,255"
Azul$="0,0,255"
Amarillo$="255,255,0"
Open window 500,400
BackColor Cyan$
Clear window
Color Azul$
Rectangle 50,50,250,150
Color Amarillo$
Fill Rectangle 50,200,250,300
Color Azul$
Rectangle 300,50,400,150
Fill Rectangle 300,200,400,300
Inkey$
Clear Fill Rectangle 50,200,250,300
Inkey$
Close window
End

restrigl.jpg

[Anton]

9. Рисование треугольника. Triangle

Помимо Circle и Rectangle есть команда Triangle, предназначенная для рисования треугольников.

Ей нужны три пары чисел — координаты трёх точек (вершин треугольника), их можно указывать в любом порядке. Компьютер соединит эти точки и построит треугольник. Здесь также можно использовать клавиши Fill (заливка) и Clear (стирание), так что об этой команде больше сказать нечего.

Следующая команда Triangle нарисует треугольник по заданным координатам:

Код: Выделить всё

Triangle 200,20,300,160,100,160

Код: Выделить всё

Clear Screen
Open window 300,300
Triangle 150,60,250,220,50,220
Inkey$
Clear Triangle 150,60,250,220,50,220
Inkey$
Close window
End

trangle.jpg

Далее — скриншот результата вывода нескольких треугольников на экран: одни с помощью команды Triangle (только контур), другие — с помощью Fill Triangle (закрашенные).

Код: Выделить всё

Clear Screen
Open window 300,300
For i = 1 To 50
   x = Int(Ran(300))+1
   y = Int(Ran(300))+1
   Triangle x,y,x+30,y,x+15,y-30
   Fill Triangle x,y+30,x+30,y+30,x+15,y
   wait(.1)
Next i
Inkey$
Close window
End

trangle2.jpg

Два замечания о небольшой программе выше:

• Использованы функция случайного числа Ran() и функция Int() для случайного выбора координат треугольников. Эти две функции будут рассмотрены позже в другой главе.
• В строке 8 команда wait(.1) создаёт паузу в 0,1 секунды, чтобы успеть увидеть, как рисуются треугольники; иначе всё произойдёт так быстро, что треугольники появятся по одному.