I .8. Рисование изображений из графических примитивов

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

1. Рисунок строится по принципу аппликации (слой за слоем);

2. Порядок наложения слоёв необходимо для себя выяснить еще до того как начинать писать программу (глядя на эскиз);

3. Нарисовав слой, сразу сделайте заливку (новый слой может нарушить однородность контура).

Задание: Нарисовать морковку

 

 

План рисования изображения может быть такой:

1. Рисуем окружность и заливаем красным цветом
2. Рисуем черный прямоугольник, чтобы закрыть половину круга
3. Рисуем две красные линии от краев полукруга (носик морковки)
4. Заливаем полученный треугольник красным
5. Рисуем три зеленые линии (треугольный хвост морковки) и заливаем его зеленой заливкой
6. Рисуем две черные линии от углов хвоста в центр треугольника (вырезаем из зеленого треугольника черный треугольник меньшего размера)

 

Программа: (читай ниже про комментарии)

CLS

SCREEN 12

REM рисуем корешки

' круг

CIRCLE (320, 240), 80, 4

PAINT (320, 240), 4, 4

'треугольник

LINE (320, 160) - (400,320), 0, BF

LINE (320,160) - (560, 240), 4

LINE - (320, 320), 4

PAINT (400, 240), 4, 4

REM рисуем вершки

'зеленый треугольник

LINE (80, 160) - (240, 240), 2

LINE - (80, 320), 2

LINE - (80, 160), 2

'черный треугольник

PAINT (160, 240), 2, 2

LINE (80, 160) - (160, 240), 0

LINE - (80, 320), 0

PAINT (120, 240), 0, 0

END

 

Комментарий — пояснение к программе или к какой-либо части программы.

Комментарий может быть составлен из слов, как на русском, так и на английском языке, цифр и знаков препинания.

Формат: REM текст

Служебное слово REM можно заменить знаком апострофа, например:

‘ текст комментария

Тот текст, который следует за оператором комментария, не будет обрабатываться компьютером.

 

Задания для самостоятельного решения:

 

1. Нарисовать торт.

 

3. Нарисовать кита.

 

2. Нарисовать мышку.

 

4. Нарисовать муравья.

 

5. Нарисовать лицо.

 

6. Нарисовать машину.

 

7. Нарисовать улитку.

 

8. Нарисовать жука.

 

 

9. Нарисовать зонт.

 

11. Нарисовать кошку.

 

10.  Нарисовать песочницу.

 

12. Нарисовать ворону.

 

13. Нарисовать цыпленка.

 

14. Нарисовать сову.

 

15. Нарисовать цветок.

16. а) Самостоятельно придумать и нанести на графическую сетку изображение, составленное из точек, линий, окружностей и прямоугольников. Изображение должно представлять собой законченный, осмысленный рисунок.

б) Напишите последовательность рисования элементов изображения.

в) Напишите программу, рисующую данное изображение.

г) Сравните ваш рисунок с рисунками одногруппников и оцените его сложность по 10-ти бальной шкале (1- примитивный;… 10 – сверхсложный).

 

I.9. Относительные координаты

 

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

Ставим точку;

Строим точку: 2 вправо 2 вверх;

Соединяем;

5 вправо;

Строим точку: 1 вправо 1 вверх;

Соединяем;

3 вправо;

Строим точку: 3 влево 2 вниз;

Соединяем;

1 влево; 2 вниз; 1 вправо; Строим точку: 2 вправо 2 вниз; Соединяем;

3 влево; Строим точку: 1 влево 1 вверх; Соединяем;

5 влево; Строим точку: 2 влево 2 вверх; Соединяем.

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

Примеры:

PSET STEP (a, b), C

Будет поставлена точка цвета С, расположенная на расстоянии а по горизонтали и b по вертикали от ТПС (точки последней ссылки).

LINE - STEP (a, b), C

Будет начерчена линия от ТПС до точки на расстоянии a – по горизонтали, b – по вертикали.

CIRCLE STEP (a, b), R, C

Будет начерчена окружность, центр которой смещен от ТПС на расстояние a – по горизонтали, b – по вертикали.

 

Итак, вернемся к ракете.

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

Обозначим величину тетрадной клетки за k и попробуем написать программу.

ВАЖНО ЗНАТЬ:

· когда мы смещаемся в направлении нуля (ВЛЕВО ИЛИ ВВЕРХ), то перед смещением пишем знак "-"!

· если по какой-то оси смещаться не надо, то смещение равно 0.

 

CLS

'Ставим точку

PSET (100,240), 4

'выберем величину клетки

k=10

'Строим точку: 2 вправо 2 вверх и соединяем

LINE - STEP (2*k, -2*k), 4

'5 вправо

LINE - STEP (5*k, 0), 4

'Строим точку: 1 вправо 1 вверх и соединяем

LINE - STEP (k, -k), 4

'3 вправо

LINE - STEP (3*k, 0), 4

'Строим точку: 3 влево 2 вниз и соединяем

LINE - STEP (-3*k, 2*k), 4

'1 влево

LINE - STEP (-k, 0), 4

 '2 вниз;

LINE - STEP (0, 2*k), 4

'1 вправо

LINE - STEP (k, 0), 4

'Строим точку: 2 вправо 2 вниз и соединяем

LINE - STEP (2*k, 2*k), 4

'3 влево

LINE - STEP (-3*k, 0), 4

'Строим точку: 1 влево 1 вверх и соединяем

LINE - STEP (-k, -k), 4

'5 влево

LINE - STEP (-5*k, 0), 4

'Строим точку: 2 влево 2 вверх и соединяем

LINE - STEP (-2*k, -2*k), 4

END

 

Если сейчас поменять координаты в операторе PSET, то положение ракеты на экране изменится. А если изменить значение k, то изменится размер. При k=2, например, ракета будет в 5 раз меньше.

Задания для самостоятельного решения:

1. Напишите программу к рисованию фигуры, указанной на рисунке, при помощи оператора LINE -STEP. Величину одной клетки примите за А=10. Рисование начните с левого нижнего угла.

 

2. Напишите программу рисования фигуры c помощью LINE -STEP. Размер одной клетки выберите самостоятельно.

 

3. Нарисовать звезду. Координаты начальной точки и размер клетки выбрать на свое усмотрение.

 

4. Используя оператор LINE –STEP, написать программу, рисующую флажок. Рисование начинать от точки, обозначенной на рисунке. Флажок раскрасить.

 

 

5. Используя оператор LINE –STEP, написать программу, рисующую «крестик». Величину единичного отрезка выбрать самостоятельно.

 

6. Используя оператор LINE –STEP, написать программу, рисующую «пятиугольник».

Координаты начальной точки (x,y) должны задаваться пользователем.

7.

8.

9.

7. Записать координаты всех вершин пятиугольника, если величина единичного отрезка А=40. Написать еще одну программу рисования такого же пятиугольника с помощью команды LINE.

8. Используя оператор LINE –STEP, написать программу, рисующую «пирамидку». Рисование начинать от точки А.

9. Найти и записать в тетрадь координаты точек B, C, D, E, F, G, H, если точка А имеет координаты (x,y), а сторона одной клеточки равна L.

 

 

10. Превратить «пирамидку» в «веер», добавив на рисунок несколько линий. Оператор LINE –STEP не использовать. Веер раскрасить.

 

11. Превратить веер в цветочек.

 

 

12. Написать две программы для создания следующего рисунка. В первой программе нужно все рисовать с помощью оператора LINE –STEP, а во второй, наоборот, нигде не использовать LINE –STEP. Оба рисунка должны быть раскрашены.

 

 

13. Написать программу на языке Бейсик, позволяющую нарисовать лебедя. Использовать команду LINE –STEP. Начальную точку для рисования выбрать самостоятельно. После создания контура украсить лебедя: нарисовать ему глазик, раскрасить внутри, возможно, обозначить перышки, нарисовать водную среду обитания и т.п.

 

I.10. Переменная. Оператор ввода. Определение координат относительно точки

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

Что же происходит в памяти компьютера?

Когда в программе появляется буквенное обозначение какой-то величины, то в памяти компьютера сразу образуется ячейка с этим буквенным именем. В этой ячейке будет храниться величина, пока мы ее не заменим. Называют такую ячейку - переменная.

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

 

Примеры правильны х имен переменных: a, mama, sum, b 56, kol _1.

 

Примеры неправильных имен: мама (используются русские буквы), 1a (имя начинается с цифры), a#1 (используется спецсивол).

Начинаться имя переменной должно обязательно с буквы!

Малые и заглавные буквы в записи имен переменных и текста программы воспринимаются как одинаковые.

Операция, с помощью которой, мы задавали переменной значение, называется присваивание. Пример: k=10.

Для того, чтобы придавать переменной значение после запуска программы (вводя с клавиатуры), используют оператор ввода.

Оператор ввода данных - используется для ввода данных с клавиатуры в память компьютера.

Формат: INPUT данные

INPUT — служебное слово;

Данные — это перечисленные через запятую переменные, в которые после выполнения оператора, будут помещены известные по условию задачи величины.

Механизм работы оператора INPUT

После запуска программы на экране появится знак вопроса? и будет мигать курсор.

? _

 

Программа останавливается и ждет.

С помощью клавиатуры надо набрать данные. Затем нажать клавишу ENTER.

Данные разместятся по порядку перечисления переменных.

Например, INPUT a, b, c

Для того, чтобы после запуска программы, на экране появлялись подсказки, будем использовать оператор PRINT.

Вот пример работы программы, в которой рисуется линия по произвольно выбранным координатам:

Задание:

Даны координаты трех точек экрана. Нарисовать по точкам треугольник произвольного цвета.

Программа:

REM Треугольник

CLS

' Ввод координат трех точек и номера цвета с клавиатуры

PRINT”введи координаты 3-х точек и цвет”

INPUT x1, y1, x2, y2, x3, y3, С

` Рисование треугольника

SCREEN 12

LINE (x1, y1) — (x2, y2), С

LINE — (x3, y3), С

LINE — (x1, y1), С

END

Задание:

Написать программу, рисующую лодку, если заданы её размеры и координаты точки левого верхнего угла рисунка.

Решение:

Будем вводить координаты только одной точки, а координаты всех остальных точек вычислять.

Попробуем определить координату правой верхней точки. У нас есть точка с координатами (x, y). Мы смещаемся от нее вправо на 240 пикселей толькопо горизонтальной оси. Тогда координаты правой верхней точки будут равны (x+240, y).

Точно также попробуем определить координату левой нижней точки. Будем смещаться толькопо вертикальной оси сверху вниз. Координаты левой нижней точки будут равны (x, y+80).

Чтобы определить координату правой нижней точки, необходимо сместиться на 210 пикселей по горизонтальной оси и на 80 пикселей по вертикальной оси. Координат правой нижней точки будут равны (x+210, y+80).

Программа:

REM Ввод данных с клавиатуры

CLS

PRINT “Введите координаты точки”

INPUT x,y

SCREEN 12

` Рисование лодки

LINE (x, y) — (x+240, y), 7

LINE - (x+210, y+80), 7

LINE - (x, y+80), 7

LINE - (x, y), 7

PAINT(x+1,y+1),14,7

END

Задания для самостоятельного решения:

1. Написать программу, которая позволит нарисовать прямоугольник длиной А и высотой В. Левый верхний угол прямоугольника находится в точке (X,Y). Достаточно нарисовать только контур прямоугольника. Цвет подобрать самостоятельно. Значения X,Y,А,В должны вводиться пользователем. Диалог с пользователем организовать так:

Введите координату левого верхнего угла по горизонтальной оси 160

Введите координату левого верхнего угла по вертикальной оси 160

Введите длину прямоугольника 320

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

 

2. Запустить программу несколько раз и подобрать значения X, Y, А, B таким образом, чтобы

а) прямоугольник занимал весь экран

б) прямоугольник был среднего размера и находился в центре экрана

в) прямоугольник был маленького размера и находился в правом нижнем углу экрана

Значения величин X,Y,А,B для каждого случая записать в тетрадь.

 

3. Превратить прямоугольник в «домик». Для этого ввести значение С (высота крыши).

 

4*. Раскрасить домик и нарисовать окошко строго по центру размером D x E.

 

5. Написать программу, которая нарисует четырехугольник с вершинами в точках (X1,Y1), (X2,Y2), (X3,Y3), (X4,Y4).   Подобрать значения координат точек таким образом, чтобы

а) получался ромб

б) получалась трапеция

в) получался прямоугольник

 

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

6. Написать программу, которая позволит нарисовать окружность радиуса R c центром в точке (X,Y). Значения R, X, Y должны вводиться пользователем с клавиатуры.

 

7. Модифицировать программу из предыдущего задания, сделав окружность закрашенной, добавив ввод номера цвета контура и номера цвета заливки.

 

8. Добавить в программу, созданную на предыдущем шаге, рисование еще двух таких же кругов. Всего должно получиться три круга. Круг № 1 – это тот, который был создан в предыдущем задании. Круг № 2 разместить справа от Круга № 1 на расстоянии L пикселей. Круг № 3 разместить снизу от Круга № 1 на расстоянии M пикселей. Значения L и M вводить с клавиатуры.

9*. В программе из предыдущего задания превратить все круги в «полумесяцы».

10. Получить на экране треугольник

а)                                       б)

 

11. Написать программу для рисования кольца. Толщина кольца 80 пикселей. Пользователь задает координаты центра и размер внутреннего радиуса кольца.

Запустить программу несколько раз и подобрать значения X, Y, R таким образом, чтобы

а) кольцо находилось в правом нижнем углу экрана и было средних размеров

б) кольцо располагалось по центру экрана и было максимально большим.

в) кольцо находилось в левом верхнем углу и внутренний радиус был очень маленьким.

 

12. Заданы координаты вершины треугольника и размер его высоты (см. рис). Получите изображение треугольника в произвольном месте экрана, произвольного размера. Рисунок закрасить.

13. Даны координаты точки пересечения диагоналей ромба. Написать программу, рисующую ромб, если даны расстояния от этой точки до его углов.

 

 

14. Нарисовать прямоугольник. Левый верхний угол прямоугольника находится в точке (X1,Y1), а правый нижний в точке (X2,Y2). У прямоугольника должна быть «широкая» граница – 5 пикселей. Цвета подобрать самостоятельно. Значения X1,Y1,X2,Y2 должны вводиться пользователем.

 

15. Нарисовать домик в произвольной точке экрана произвольного размера.

 

 

I.11. Рисование изображений, позиционируемых относительно точки

 

Задание: Написать программу, рисующую мишень, если заданы: координаты центра, радиус и расстояние m.

Решение: Значения x, y, m, R - считаются заданными.

Чтобы построить изображение, необходимо знать координаты всех объектов. Начертим координатные оси и отметим на них координаты всех необходимых нам для построения точек.

Программа:

CLS

PRINT "введи координаты центра мишени"

INPUT X,Y

PRINT "введи радиус"

INPUT R

PRINT "введи расстояние до концов мишени"

INPUT M

PRINT "введи цвета мишени и линий"

INPUT С1,C2

REM Рисование мишени

SCREEN 12

CIRCLE (X, Y), R, C1

PAINT (X, Y), C1, C1

LINE (X-M, Y) — (X+M, Y), C2

LINE (X, Y-M) — (X, Y+M), C2

END

Задания для самостоятельного решения:

1. Нарисовать песочные часы.          

 

 

2. Нарисовать кораблик, введя с клавиатуры координаты точки и величину k.

 

 

 

3. Нарисовать кружечку, если: ширина кружечки 4*a, высота – 6*a. Толщина ручки – a. Точка х,у находится в левом верхнем углу.

 

 

4. Нарисовать фигурку.

 

а)

 

в)

 

д)

 

б)

 

 

 

г)

 

e)

5. Нарисуй пирамиду, если координаты вершины (x,y), а размер одной клетки k пикселей. Грани закрась разными цветами.

 

6. Нарисовать коляску. Одна клетка k пикселей. Центр круга точка x,y.