Построить дом в бейсике

Цель: изучить графические процедуры в
Бейсике и применить их для вывода анимационной
картинки по типу экранной заставки.

Задачи:

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

Тип урока: комбинированный.

Методы обучения: лекция,
самостоятельная работа на компьютере.

ТСО: компьютер, программа QBasic со
справочной системой Qbasic.hlp.

План урока

• Организационный момент – 2 мин.
• Объяснение нового материала совместно с
  работой на компьютере –  34мин.
• Подведение итогов и выставление оценок – 2 мин.
• Домашнее задание – 2 мин.

ХОД УРОКА

1. Организационный момент: опрос
присутствующих, объявление темы, целей и задач на
урок.

2. Объяснение нового материала совместно с
работой на компьютере:

Лекция: Экранные заставки — это
динамические изображения, воспроизведение
которых включается автоматически при отсутствии
в течение заданного времени событий, вызванных
пользователем. Первоначальное назначение
заставок состояло в том, чтобы снизить угрозу
«выгорания люминофора» на тех участках экрана,
которые подвержены особо длительному
стационарному воздействию электронного луча.
Результатом этого эффекта было образование
бурых пятен в местах длительного воздействия
луча.
Современным мониторам эффект «выгорания
люминофора» не грозит, но экранные заставки
продолжают использовать как средство сокрытия
экранной информации от посторонних наблюдателей
в период отсутствия владельца компьютера на
рабочем месте.
Заставки в основном используют вывод простых
геометрических фигур с анимацией. Сегодня мы
попробуем смоделировать работу заставки,
используя графические процедуры в Бейсике.
Обычно вывод происходит текстовой информации. А
нам нужен вывод графической информации (в
пикселах). Графический режим характеризуется
разрешением (количество отображаемых пикселей
на дюйм), количеством цветов и количеством
видеостраниц (при работе с анимацией).
А теперь перейдем к самостоятельной работе за
компьютером: будем последовательно находить
информацию о графических процедурах, используя
справочную систему Qbasic (используется информация
из русифицированного файла справки Qbasic.hlp). Для
этого в среде Qbasic выберите пункт меню Help (Помощь)
– > Index (Предметный указатель), или нажмите
сочетание клавиш Alt+F1. Затем будем выполнять
задания по найденному материалу. По окончании
работы вы должны получить программу, имитирующую
работу экранной заставки.

1. Для смены режима с текстового на графический
используют процедуру SCREEN. Откройте предметный
указатель, найдите справку о процедуре SCREEN и о
режимах экрана (см. Приложение 1).

Задание для самостоятельной работы:

Какой номер соответствует текстовому, а какой
графическому режиму?
Определите, какой графический режим
поддерживает:

1. максимальное (минимальное) количество точек
   (пикселей);
2. наибольшее количество видеостраниц;
3. наибольшее количество цветов.

2. Для отображения пикселя на экране с заданным
цветом используют процедуру PSET. Найдите справку
об этой функции в предметном указателе (см.
Приложение 1).

Задание для самостоятельной работы:

Определите такой режим графического экрана,
при котором достаточно четко видна точка,
которая может отображаться различным цветом.
Дайте названия цветам под номерами от 0 до 15.
Найдите в справке атрибуты и значения цвета.
Сравните с вашими значениями.

3. Для отображения прямой линии используют
процедуру LINE. Найдите справку об этой функции в
предметном указателе (см. Приложение 1).

Задание для самостоятельной работы:

• Нарисуйте линию, которая в заданном графическом
  режиме проведет диагональ на экране. ( SCREEN 12: LINE
  (0,0)– (640,480) )
• Как построить прямоугольник? (LINE (X1,Y1)– (X2– Y2), C, B)
• Как записать процедуру LINE для отображения
  закрашиваемого прямоугольника? (LINE (X1,Y1)– (X2– Y2), C,
  BF)
• Напишите процедуры LINE так, чтобы прямоугольники
  отображались разным цветом (от 15 до 0) и размеры
  каждого следующего прямоугольника уменьшались,
  равномерно отдаляясь от краев предыдущего
  прямоугольника (первый прямоугольник – от краев
  экрана).
• Как оптимизировать программу, чтобы записать
  наименьшее количество операторов? (с помощью
  оператора цикла).

Решение ученика:

SCREEN 12
X1=0: Y1=0: X2=640: Y2=480
FOR I=15 TO 0 STEP –1
X1=X1+10 : Y1=Y1+10
X2=X2– 10 : Y2=Y2– 10
LINE (X1,Y1)– (X2,Y2), I, BF
NEXT I

4. Для вставки паузы используют процедуру SLEEP.
Найдите справку об этой функции в предметном
указателе (см. Приложение 1).

Задание для самостоятельной работы:

• Вставьте этот оператор в программу после
  процедуры рисования прямоугольника.

Решение ученика:

SCREEN 12
X1=0: Y1=0: X2=640: Y2=480
FOR I=15 TO 0 STEP –1
X1=X1+10 : Y1=Y1+10
X2=X2– 10 : Y2=Y2– 10
LINE (X1,Y1)– (X2,Y2), I, BF
SLEEP 1
NEXT I

5. Для отображения окружности используют
процедуру CIRCLE. Найдите справку об этой функции в
предметном указателе (см. Приложение 1).

Задание для самостоятельной работы:

• Добавьте в вашу программу процедуру вывода
  окружности вместо вывода прямоугольника.
• Как нарисовать эллипс? (используя коэффициент
  сжатия, если < 1, то вытянут по оси Х, если  >1,
  то по оси У)
• Почему сделать заливку внутри окружности с
  помощью процедуры CIRCLE не возможно? (т.к. процедура
  рисования окружности не имеет четких данных о
  своей границе)

Решение ученика:

SCREEN 12
X0=320: Y0=240
X1=0: X2=640
FOR I=15 TO 0 STEP –1
X1=X1+10 : X2=X2– 10
R=(X2– X1)2
CIRCLE (X0,Y0), R, I, , , 0.8
SLEEP 1
NEXT I

6. Для заливки выделенной области используют
процедуру PAINT. Найдите справку об этой функции в
предметном указателе (см. Приложение 1).

Задание для самостоятельной работы:

• Добавьте в вашу программу процедуру вывода
  цветного круга.
• Какой параметр в процедуре PAINT отвечает за цвет
  заливки, а какой за цвет границы? (первым после
  координаты – цвет заливки, вторым – цвет
  границы)
• Что означает координата точки в процедуре PAINT?
  (точку, от которой будет вестись поиск цвета
  границы, и пока такая точка не будет найдена,
  все  точки будут изменять цвет на цвет заливки)

Решение ученика:

SCREEN 12
X0=320: Y0=240
X1=0: X2=640
FOR I=15 TO 0 STEP –1
X1=X1+10 : X2=X2– 10
R=(X2– X1)2
CIRCLE (X0,Y0), R, I, , , 0.7
PAINT (X0,Y0),  I, I
SLEEP 1
NEXT I

3. Подведение итогов и выставление оценок:
мы смоделировали работу заставки, используя
графические процедуры в Бейсике: SCREEN, PSET, LINE, CIRCLE,
PAINT. Добавили элемент анимации с помощью
процедуры SLEEP.

Подведем итоги и оценим вашу работу:

• на «отлично» –  программа использует все
  изученные операторы и  цикл, ответил на все
  дополнительные вопросы;
• на «хорошо» –  программа использует все
  изученные операторы без цикла или использует
  операторы графики без оператора Sleep, но с циклом,
  ответил частично на дополнительные вопросы;
• на «удовлетворительно» –  программа
  использует операторы графики без оператора PAINT и
  SLEEP и без цикла, на некоторые дополнительные
  вопросы не дан правильный ответ;
• на «неудовлетворительно» –  программа
  использует только один из операторов графики и
  без цикла,  на дополнительные вопросы не даны
  правильные ответы;

4. Домашнее задание: придумать и
реализовать программу рисования геометрических
фигур, используя операторы графики и оператор
SLEEP.

Цели урока:

• Обучающие: использование среды
  программирования QBasic для создания графических
  изображений; знакомство учащихся со способами
  создания графических изображений: при помощи 
  графических примитивов и языка GML.
• Развивающие: развитие навыков
  алгоритмического мышления учащихся; развитие
  слуховой, зрительной памяти.
• Воспитательные: воспитание умения слушать
  объяснение, делать записи, контролировать самого
  себя.

Оборудование и технические требования:

• Наличие видеопроектора
• Программа Microsoft Power Point 2003-2007
• Урок ведется в сопровождении электронного
  учебника «Графические возможности Quick Basic» (см. Приложение 1).

Примечание:

• В силу того, что учебник охватывает весь
  материал указанной темы, он может быть
  использован учащимися и для самостоятельного
  изучения.
• Учебник охватывает две темы: «Графические
  примитивы» и «Макроязык GML». Поэтому
  целесообразнее разбить объяснение материала на
  два урока.
• Каждая тема оформлена в виде отдельной
  независимой друг от друга презентации. Их связь
  осуществляется только через титульную
  презентацию Приложение 1
• Переход между слайдами учебника осуществляется
  при помощи управляющих стрелок и гиперссылок

ХОД УРОКА

Учитель: С какими видами графики вы
знакомы? (Растровая графика, векторная графика)
Каковы особенности каждого вида графики?

Сегодня мы выясним, можно ли использовать язык
программирования Quick Basic для создания
изображений, и к какому виду графики можно
отнести это изображение.

Прежде чем работать с графикой Quick Basic,
необходимо задать графический режим экрана при
помощи команды SCREEN N, где N – номер графического
режима. Режимы отличаются разрешением и
количеством цветов. В качестве примера
рассмотрим режим SCREEN 9:

Также можно изменить цвет фона при помощи
оператора COLOR,C, где C – номер цвета
в палитре.

Существуют два способа для создания
изображений при помощи языка программирования
Quick Basic:

1. Использование графических примитивов
2. Использование макроязыка GML.

1. Создание изображений при помощи
графических примитивов (см. Приложение
2)

1) Точка

PSET (X, Y), C , где:
(Х, У) – координаты точки на экране
С – номер цвета

2) Линия

LINE(X1,Y1) – (X2,Y2), C где:
(X1,Y1) –  координаты начальной точки отрезка
(X2,Y2) –  координаты конечной точки отрезка
C – номер цвета линии

3) Прямоугольник

LINE(X1,Y1) – (X2,Y2), C, B
где:
(X1,Y1) – координаты начальной точки диагонали
прямоугольника
(X2,Y2) – координаты конечной точки диагонали
прямоугольника

Закрашенный прямоугольник:
LINE(X1,Y1) – (X2,Y2), C, BF

4) Окружность

CIRCLE (X,Y), R, C
(X,Y) – координаты центра окружности
R – радиус окружности
C – номер цвета линии

5) Дуга окружности

CIRCLE (X,Y), R, C, L1, L2 где:
(X,Y) – координаты центра окружности
R – радиус окружности
C – номер цвета линии
L1 – начальное значение угла   
вычерчивания дуги
L2 – конечное значение угла   
вычерчивания дуги

6) Дуга эллипса

CIRCLE (X,Y), R, C, L1, L2, К где:
(X,Y) – координаты центра эллипса
R – радиус окружности
C – номер цвета линии
L1 – начальное значение угла для вычерчивания
дуги эллипса
L2 – конечное значение угла для вычерчивания дуги
эллипса
К – коэффициент сжатия дуги эллипса

7) Эллипс

Если рисуется эллипс, то параметры L1 и L2
отсутствуют, т.е. оператор имеет вид:
CIRCLE (X,Y), R, C, , , К

8) Сектор

Если параметры L1 и L2 в операторах
CIRCLE (X,Y), R, C, L1, L2  (для дуги окружности)
CIRCLE (X,Y), R, C, L1, L2, К   (для дуги эллипса)
отрицательные, то концы дуги соединяются
отрезками с центром окружности (эллипса), т.е.
вычерчивается круговой сектор.

9) Закраска ограниченной области

PAINT (X,Y), C1, C2 где:
(X,Y) – координаты любой точки внутри контура
C1 – номер цвета, которым закрашивается контур
С2 – номер цвета самого контура

Пример рисования объекта:

SCREEN 9
CIRCLE (159, 99), 80, 12: PAINT (159, 99), 12, 12
CIRCLE (89, 99), 39, 12: PAINT (78, 98), 12, 12
CIRCLE (228, 99), 39, 12: PAINT (248, 98), 12, 12
CIRCLE (120, 99), 15, 12, , , 3: PAINT (120, 99), 12, 12
CIRCLE (198, 99), 15, 12, , , 3: PAINT (198, 99), 12, 12
CIRCLE (120, 70), 19, 8, , , .5: PAINT (120, 70), 15, 8
CIRCLE (120, 70), 12, 6: PAINT (120, 70), 6, 6
CIRCLE (199, 70), 19, 8, , , .5: PAINT (199, 70), 15, 8
CIRCLE (199, 70), 12, 6: PAINT (199, 70), 6, 6
CIRCLE (159, 99), 20, 7, , , 2
CIRCLE (159, 130), 23, 4, 3.14, 6.28, .5
CIRCLE (159, 130), 24, 4, 3.14, 6.28: PAINT (159, 145), 4, 4
LINE (159, 40) – (110, 50), 8 : LINE (159, 40) – (130, 50), 8
LINE (159, 40) – (159, 50), 8 : LINE (159, 40) – (188, 50), 8
LINE (159, 40) – (208, 50), 8

Итог:

2. Создание изображений при помощи
макроязыка GML (см. Приложение
3).

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

Команды языка GML перечислены в следующей
таблице:

Команды перемещения:

Для приведения в действие последовательности
команд языка GML необходимо использовать оператор
DRAW «команды макроязыка GML»

Команды записываются подряд или через пробел.

Пример использования команд:
SCREEN 9
CLS
COLOR , 11
LINE (0, 200) – (650, 350), 2, BF
DRAW «c6 bm200,150 e20 r100 nf20 nm320,160 u20 m360,70 d25 f20 r20 d10»
DRAW «m360,150 l20 d20 m320,160 d15 f20 r10 d8 l20»
DRAW «m300,180 u10 l60 g20 d6 r15 d8 l30 u20 m215,170»
DRAW «l10 g20 l70 h20 e20 m200,150 br5 p6,6 bm321,160 p15,6 bm350,110 p6,6»
CIRCLE (353, 110), 5, 8
PAINT (350, 110), 1, 8

Результат:

Заключение:

– Мы рассмотрели возможности создания
графических изображений при помощи языка
программирования Quick Basic. Вернемся к вопросу: К
какому виду графики относится изображение,
созданное при помощи программирования? (Векторная
графика)
– А можно ли анимировать изображение? Как вы
думаете? Оказывается можно. В этом нам помогут
операторы цикла. Но это уже тема другого урока.

Домашнее задание: составить программу
для рисования любого объекта с помощью изученных
операторов.