Бейсик-256. Графические операторы

1.

Бейсик-256
Гришина Елена Алексеевна,
учитель информатики МОУ Гимназия №1
г.о. Жуковский

2.

Бейсик-256
Графические операторы:
1. Clg, color, plot
2. Circle
3. Line
4. Rect
5. Poly
2.
Переменные
1. Оператор присваивания
2. Print
3. Input, cls
1.
3.
4.
5.
Выбор
Безусловный переход
Повторения

3.

Бейсик-256
Окно
вводавывода
текста
Окно для
ввода
команд
Окно
вывода
графики
Все команды (операторы) пишутся по-английски.
Каждая команда – на новой строке.

4.

Графические операторы
CLG – очистка экрана
COLOR – выбор цвета.
Пример: сolor red
PLOT X,Y – печать точки с
координатами X,Y
Пример: plot 30, 40

5.

Задание
Напишите программу, выводящую разными
цветами на экран точки созвездия
Большая Медведица. Их координаты:
1) 40, 90
2) 70, 70
3) 100, 70
4) 130, 70
5) 160, 80
6) 230,70
7) 220, 30

6.

Рисование окружности
CIRCLE X,Y,R – рисование окружности с
центром в точке X,Y и радиусом R.
Пример: circle 30, 40, 15
Поменяйте в программе
точки на круги с
радиусом 5 пикселей.

7.

Рисование линий
line x1,y1,x2,y2 – рисование линии от точки
(x1, y1) до точки (x2, y2)
Пример: line 20, 40, 10, 30
Задание: соедините линиями точки-звёздочки в созвездии
Большая Медведица.

8.

Задание
Составьте программу рисования:

9.

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

10.

Рисование прямоугольников
rect x,y,m,n - рисование прямоугольника,
где х, у – координаты левого верхнего угла,
m – длина, n - ширина.
Rect 60,40,200,80
260-60
120-40

11.

Напишите программу для
рисования домика:

12.

Задание
Считая одну клетку равной 20 пикселям, создайте
программу рисования следующих прямоугольников:

13.

Рисование многоугольников
POLY {x1,y1,x2,y2,…,xn,yn} – рисование
многоугольника с вершинами (x1,y1),
(x2,y2),…,(xn,yn).
poly {150, 100, 200, 150, 175, 150, 175, 200, 125, 200, 125, 150, 100, 150}

14.

Задание: создайте программу,
рисующую флаг Гайаны

15.

Задание: создайте программу, рисующую
флаг Сент-Винсента и Гренадин
Где находится это государство?

16.

Нарисовать узор

17.

Переменные
В Скретче мы уже использовали переменные.

18.

Переменные
Нарисуйте круг, вписанный в квадрат:
clg
color blue
rect 0,0,140,140
color red
circle 70,70,70
Связаны ли между собой длина стороны квадрата и
радиус круга?
Как изменится программа, если длину стороны
увеличить в два раза?

19.

Переменные
Эту же программу можно записать иначе:
Clg
А = 140
color blue
rect 0, 0, А, А
color red
А/2,70,70
А/2, А/2
circle 70,
Переменная –
поименованная
ячейка в памяти
компьютера
Использование переменных позволяет решать задачи в самом общем виде!

20.

Рассмотрим ещё более общий случай
Поскольку местоположение круга связано с
местоположением квадрата, то введём ещё две
переменные – x и y – координаты верхнего левого угла
квадрата:
x=50
y=38
А=140
clg
x+A/2,y+A/2
?,?
color blue
rect 40,
х, y,20,
A, A,
A A
color red
circle 110,
x+A/2,y+A/2,A/2
circle
90, A/2
Меняя в программе значения x и y, проследите за изменением результата
на экране!

21.

Задание: используя переменные
x, y, r, напишите программу
рисования радуги
Алгоритм:
1. Закрасьте весь экран белым
цветом.
2. Нарисуйте 8 концентрических
кругов (имеющих общий центр – в
точке x=150, y=150), начиная с
внешнего: красный, оранжевый,
жёлтый, зелёный, голубой, синий,
фиолетовый и белый, каждый раз
уменьшая радиус на 5. Радиус
красного круга r=100.
3. Нарисуйте прямоугольник белого цвета,
закрывающий нижнюю часть кругов.
Начало программы:
X = 150
Y = 150
R = 100

22.

Проверка
Поменяйте значения переменных X, Y, R.
Сохранилось ли изображение радуги или
«испортилось»?

23.

Программа рисования радуги
color white
rect 0,0,300,300
R=100
x=150
y=150
color red
circle x,y,R
color orange
circle x,y,R-5
color yellow
circle x,y,R-10
color green
circle x,y,R-15
color blue
circle x,y,R-20
color darkblue
circle x,y,R-25
color darkpurple
circle x,y,R-30
color white
circle x,y,R-35
Rect 0,у,300,300-у
Закрашивание экрана в белый цвет
Задание координат центра кругов
и радиуса большего круга
Рисование красного круга
Рисование оранжевого круга
Рисование жёлтого круга
Рисование зелёного круга
Рисование голубого круга
Рисование синего круга
Рисование фиолетового круга
Рисование белого круга и белого
прямоугольника

24.

Задание
Создайте программу рисования следующего
рисунка:
X1,Y1 - ?
1. Обобщите программу для круга произвольного радиуса
2. Обобщите программу для произвольных координат центра круга.

25.

Решение
clg
r = 40
x = 79
y = 88
color red
circle x,y,r
color blue
rect x+r,y-r,2*r,2*r
r – радиус круга
х – абсцисса центра круга
у – ордината центра круга

26.

Задание
Создайте программу рисования:
а) фрагмента узора;
б) фрагмента шахматной доски.
х
х
у
у
R
А

27.

Задание
Составить программу рисования следующего рисунка с
использованием переменных x,y,R, содержащих
значения координат центра жёлтого круга и его радиуса.

28.

Решение
x=100
y=100
r=100
color yellow
circle x, y, r
color cyan
circle x, y-r/2, r/2
circle x, y+r/2, r/2

29.

Задание
Создайте программу рисования, используя
переменные x,y,R:
а)
б)

30.

Решение
clg
x=130
y=120
r=60
color green
rect x-2*r,y-2*r,4*r,4*r
color purple
circle x-r,y-r,r
circle x+r,y-r,r
circle x-r,y+r,r
circle x+r,y+r,r
color yellow
rect x-r,y-r,2*r,2*r
clg
x=130
y=120
r=60
color blue
circle x-r,y-r,r
circle x+r,y-r,r
circle x-r,y+r,r
circle x+r,y+r,r
color purple
circle x,y,r

31.

Ввод переменных с экрана во время
выполнения программы
Cls – очистка текстового экрана
INPUT [“строка–подсказка”] , имя переменной
Пример:
Введённое
значение
попадает в
переменную х
Вводит
пользователь
и нажимает
Enter
Добавьте
команды ввода
с экрана значений
координат в
точки
левого верхнего
Это
равносильно
команде
присваивания
программе
x=7.
угла квадрата.

32.

Задание
Написать программу построения фигуры,
изображённой на рисунке, которая запрашивает с
клавиатуры координаты левого верхнего угла (х, у) и
длину А стороны малого квадрата.
В программе использовать только команды line.

33.

Решение
input «x=», х
input «у=», у
input «а=», а
line x,y,x+2*a,y
line x,y+2*a,x+2*a,y
line x,y+2*a,x,y
line x+2*a,y+2*a,x+2*a,y
line x,y+2*a,x+2*a,y+2*a
line x,y,x+2*a,y+2*a
line x,y+a,x+2*a,y+a
line x+a,y,x+a,y+2*a
line x,y+a,x+a,y
line x+a,y,x+2*a,y+a
line x,y+a,x+a,y+2*a
line x+a,y+2*a,x+2*a,y+a

34.

Задание
Написать программу построения фигуры,
изображённой на рисунке, которая запрашивает с
клавиатуры координаты левой верхней точки квадрата
– х и у, а также длину А стороны малых квадратов.

35.

Условный оператор
Полное
ветвление
Условный оператор:
if условие then
команды1
else
команды2
end if
if x>50 then
rect 0,0,x,x
else
circle 150,150,x
end if
Условие:
Равно
Не равно
Больше
Меньше
Больше или равно
Меньше или равно
=
<>
>
<
>=
<=

36.

Неполное ветвление
В неполном ветвлении весь оператор записывается
в одну строку.
If x<y then rect 0,0,x,x
Если команд несколько, то они разделяются
двоеточием.
If x<y then color red: rect 0,0,x,x

37.

Задание
Создайте программу, которая предлагает ввести
одно из двух чисел – 1 или 2. Если введено 1, то
программа рисует солнце. Если 2 – месяц.
2

38.

clg
input "нажмите 1 или 2: ", x
if x=1 then
color cyan
rect 0,0,300,300
color yellow
circle 150,150,50
else
color blue
rect 0,0,300,300
color yellow
circle 75,100,5
color blue
circle 70,100,5
end if
Решение:
Ввод значения
переменной х
Рисование голубого
неба
Рисование жёлтого
солнца
Рисование
синего неба
Рисование
жёлтого круга
Рисование
синего круга

39.

Задание
Нарисуйте светофор.
Пусть программа запрашивает одно из
чисел – 1, 2 или 3.
Если введено 1, то зажигается
красный свет.
Если введено 2, то – жёлтый.
Если 3, то – зелёный.

40.

Решение:
clg
Рисование светофора
rect 50,50,50,120
чёрным цветом
rect 70,170,5,100
color grey
circle 75,80,5
Рисование серых
окошек светофора
circle 75,100,5
circle 75,120,5
Ввод значения
input "нажмите 1, 2 или 3: ", x
переменной х
if x=1 then color red: circle 75,80,5
if x=2 then color yellow: circle 75,100,5
if x=3 then color green: circle 75,120,5
Рисование
красного круга
Рисование
жёлтого круга
Рисование
зелёного круга

41.

Организация повторений
На дворе стоит забор,
А на нём мочало.
Эта песня хороша –
Начинай сначала!
В Бейсик-256 тоже есть команда,
позволяющая вернуться к предыдущим
командам.

42.

Оператор безусловного перехода
goto имя метки
Например,
метка
команда1
a: команда2
команда3
команда4
goto a

43.

Вспомним задание:
Создайте программу, которая предлагает ввести
одно из двух чисел – 1 или 2. Если введено 1, то
программа рисует солнце. Если 2 – месяц.
2

44.

clg
input "нажмите 1 или 2: ", x
if x=1 then
color cyan
rect 0,0,300,300
color yellow
circle 150,150,50
else
color blue
rect 0,0,300,300
color yellow
circle 75,100,5
color blue
circle 70,100,5
end if
Как обеспечить
смену дня и ночи
без перезапуска
программы?

45.

А: input "нажмите 1 или 2: ", x
clg
if x=1 then
color cyan
rect 0,0,300,300
color yellow
circle 150,150,50
else
color blue
rect 0,0,300,300
color yellow
circle 75,100,5
color blue
circle 70,100,5
end if
goto A
метка
Очистка
экрана
ссылка
на метку

46.

Задание
clg
rect 50,50,50,120программу
Изменить
для
rect 70,170,5,100
светофора
так,
чтобы
свет
в
нём
a: color grey
переключался
без перезапуска
circle 75,80,5
circle 75,100,5
программы.
circle 75,120,5
input "нажмите 1, 2 или 3: ", x
if x=1 then color red: circle 75,80,5
if x=2 then color yellow: circle 75,100,5
if x=3 then color green: circle 75,120,5
pause 1
goto a

47.

Генератор случайных чисел
Чтобы получить случайное число из диапазона [0;b),
нужно использовать формулу: n = rand * b
Например,
r=rand*300
circle (150,150,r)

48.

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

49.

Решение
Используя функцию получения случайных чисел,
составить программу заполнения экрана точками.
clg
a:plot rand*300, rand*300
goto a
Или: clg
a: x=rand*300
y=rand*300
plot x,y
goto a
a: x=rand*300
y=rand*300
plot x,y
pause 0.1
clg
goto a

50.

Программа к задаче
«Паутина»
clg
x1=rand*300
y1=rand*300
circle x1,y1,2
a:x2=rand*300
y2=rand*300
circle x2,y2,2
line x1,y1,x2,y2
x1=x2
y1=y2
goto a
Рисуем
1-ю точку
Рисуем
2-ю точку
Рисуем линию
между ними
Делаем 2-ю
точку первой

51.

Задание
Составить программу заполнения экрана цветными
точками по следующему правилу: если точка попадает в
верхнюю часть экрана, она – красная, если в нижнюю –
зелёная.
Демонстрация
результата

52.

Решение
clg
a:x=rand*300
y=rand*300
If y<150 then
color red
else
color green
end if
plot x,y
goto a

53.

Задача*
Задание: составить программу заполнения экрана
цветными точками по следующему правилу: если точка
попадает ниже диагонали экрана, то она – красная,
если выше – зелёная.
clg
a:x=rand*300
y=rand*300
If y<x then
color red
else
color green
end if
plot x,y
goto a

54.

**
Задача
Задание: составить программу заполнения экрана
цветными точками по следующему правилу: если точка
попадает в верхнюю левую четверть экрана, то она –
красная, иначе – зелёная.
clg
a:x=rand*300
y=rand*300
If x<150 and y<150 then
color red
else
color green
Сложное
end if
условие
plot x,y
goto a

55.

Сложные условия
Сложные условия образуются из простых с помощью
логических операций:
and (И) – одновременное выполнение условий
or (ИЛИ) – выполнение одного из условий.
Пример:
x>10 and x<70
x<10 or x>70

56.

Задание
Составить программу заполнения экрана
разноцветными точками по следующему правилу:
если точка попадает в левую треть экрана, она –
красного цвета;
если в среднюю – жёлтого;
если в правую – зелёного.

57.

Задание
Составить программу заполнения
экрана разноцветными точками по
следующему образцу:
точка окрашивается в красный цвет,
если она попадает в верхний левый
или в нижний правый квадрат, иначе
– в жёлтый цвет.
проверка
if x<150 and y<150 or
x>150 and y>150

58.

Оператор присваивания
переменная = число или выражение
Например, x=5
x=x+1
X
Y
65
12
81
9
y=2*x
y=(x+y)/2
y = у^2
Знак
деления
Знак
возведения в
степень
Ячейка в
памяти
компьютера

59.

Задание
Что будет на экране в результате
выполнения программы:
x=10
y=150
r=10
h=25
a: circle x,y,r
pause 0.1
x=x+h
goto a
Что изменится?
Добавьте в программу ввод
значений переменных r и h с
экрана.

60.

Задача
Что надо изменить в программе, чтобы программа
останавливалась, нарисовав последний круг на
экране?
input “r=“,r
x=10
input “h=“,h
y=150
b:
x=10
input “r=“,r
y=150
input
a:
clg “h=“,h
circle
x,y,rx,y,r
a: circle
pause
Pause0.1
0.1
x=x+h
x=x+h
if x>300-r then goto b
if x<300-r
then goto a
goto
a
goto a
1) Что надо изменить
в программе, чтобы
круг «побежал»?
2) Как сделать так,
чтобы круг, добежав
до конца экрана,
снова оказывался в
начале?
Условие остановки

61.

Задания
1. Составьте программу рисования 10
квадратов, расположенных горизонтально:
2. Составьте программу рисования 10 кругов,
расположенных друг под другом.
3. Составьте программу рисования 10
квадратов, расположенных так, чтобы
правый нижний угол предыдущего
совпадал с левым верхним углом
следующего:

62.

Повторения
Помните задачу о рисовании 10 одинаковых кругов,
расположенных горизонтально?
Решить её можно ещё одним способом – с помощью
команды, аналогичной блоку повторить в скретче.

63.

Цикл
Повторяющиеся действия называются
циклическими (от латинского слова cyclus,
означающего круг).
Оператор цикла:
for переменная = число1 to число2 [step число3 ]
тело цикла
next переменная
Группа
Шаг изменения
операторов
Пример:
Проверка: k<=10?
X=10
For k=1 to 10
circle x,100,10
x=x+25
Pause 0.1
next k
Print “конец”
переменной. Если
отсутствует, то step 1
Счётчик числа повторений
или переменная цикла
Рисование круга
Сдвиг по координате х
Добавим ещё одну команду
!
Переход к следующему значению k (k=k+1)
и переход к оператору for

64.

Задание
1.
Нарисуйте, используя оператор цикла и паузу,
10 концентрических окружностей.
2.
Измените программу так, чтобы каждый раз,
когда рисуется следующая окружность,
предыдущая стиралась (т.е. рисовалась цветом
фона).
3.
Создайте программу заполнения экрана
точками со случайными координатами.

65.

Задание
Используя оператор цикла, вывести на экран:
1) числа от 1 до 10
2) нечётные числа от 1 до 31
3) числа от 20 до 1.

66.

Оператор цикла с предусловием
Если число повторений в теле
цикла заранее неизвестно, то
используют оператор
While УСЛОВИЕ
Тело цикла
End while
Например, требуется нарисовать
на экране максимальное число
квадратов с заданной стороной x.

67.

Решение
Нарисовать на экране максимальное число квадратов с
заданной стороной x.
clg
a=30
x=0
х=а
while x<300-a
circle
х,x,а
rect x,x,a,a
x=x+a2*а
end while
Задание: нарисуйте на экране максимальное
число кругов с заданным радиусом х.
Длина
стороны
квадрата
Начальная
координата
верхнего
левого угла
квадрата
Сдвиг
координаты
на длину
стороны а

68.

Задание
Изобразите на экране расходящиеся концентрические
круги (с эффектом анимации).
clg
color white
rect 0,0,300,300
a=5
x=150
while a<150
circle x,x,a
pause 0.1
a=a+5
end while
Радиус
первого круга
Координата
центра кругов
Рисование круга
Увеличение
радиуса круга

69.

Вывод результатов на экран
(работа с текстовым окном)
Оператор вывода значения переменной:
print имя переменной или выражение +
«текст»
Например:
х=5
y=7
57
текст
print "ответ: "
Что будет на экране,
если из текста
убрать скобки?
print «сумма="+(x+y)
print «произведение="+x*y
выражение
текст
Поставьте в конце строк с оператором print точку с запятой. Что изменилось?

70.

Задание
Составить программу, выводящую на экран
значение выражения:
5(x - 3)3 + 6(y + 2)2 при x = 0,5 и у = -0,5
Дробная часть
отделяется точкой!
x=0.5
y=-0.5
print 5*(x-3)^3+6*(y+2)^2
или
x=0.5
y=-0.5
z=5*(x-3)^3+6*(y+2)^2
print z

71.

Задание
Составить программу, выводящую на экран
значение выражения:
а) (x – 3y)2 + (6y – 1)2 при x = -3,2 и у = 1,4
б)
в)
при x = 1,5 и y = 2,5
при x = 4 и у = -1,3
а) 109,52; б) -81; в) 0,14311

72.

Задание
Создайте программу, выводящую на экран значение
выражения при:
а) x = 2,5
y=-3.2
б) x = -2,5
y=3.2
2.554762 и -5.240909

73.

Задание
Создайте программу, которая:
1) запрашивает с экрана длину стороны
квадрата и выводит на экран его
периметр и площадь;
2) запрашивает с экрана длины сторон
прямоугольника и выводит на экран его
периметр и площадь;
3) запрашивает с экрана два числа и
выводит на экран их сумму и разность;
4) запрашивает с экрана год рожденья и
выводит на экран возраст;
5) запрашивает с экрана число и выводит
на экран его квадрат и куб (2-ю и 3-ю
степень).