Конспект урока+презентация+доп.материал для проведения урока на тему"Графические возможности объектно-ориентированного языка программирования "

Исполнитель “Рисователь”

25 февраля 2011 г.

1.       Введение

1.1.       Общие сведения

Рисователь – исполнитель системы КуМир. Назначение Рисователя – создавать рисунки на листе. Как и другие исполнители, он имеет систему команд (см. 5), свою “обстановку” – лист, на котором можно рисовать (см. 3), и окно, в котором виден лист (см. 2). Исполнитель разработан по инициативе д.т.н. проф. К.Ю.Полякова, спецификация исполнителя создана совместно группой разработки КуМир и К. Ю. Поляковым.

1.2.       Возможности Рисователя

Рисователь умеет:

•    проводить линии различной толщины и цвета (отрезки прямых, эллипсы, прямоугольники);

•    закрашивать области листа, ограниченные проведенными линиями;

•    писать текстовые надписи, используя различные шрифты.

2.       Окно Рисователя

2.1.       Общий вид

Размеры окна можно менять обычным образом.

Под полем заголовка расположено меню.

Внизу окна Рисователя расположена строка состояния.

Лист рисования располагается в середине рабочего поля окна. Если лист не помещается в окне целиком, включается режим прокрутки.

Вверху и слева на окне находятся линейки. Единица измерения на этих линейках (как и везде в Рисователе) – пиксель, т.е. размер точки на экране (на большинстве современных экранов пиксель равен примерно 0.25 мм).

Линейки располагаются напротив листа рисования и помогают определить координаты различных объектов на листе. Координаты курсора отмечаются на линейках цветными рисками.

2.2.       Заголовок окна

При первом появлении окна Рисователя в строке заголовка пишется “Рисователь [Новый лист]”. После того, как выполнена команда “Загрузить лист”, “Сохранить копию...” или “Сохранить копию как...” в заголовке появляется соответствующее имя файла (в квадратных скобках). После выполнения команды “Создать пустой...” имя файла в заголовке стирается и вместо него снова пишется “Новый лист”. Все перечисленные команды вызываются из меню “Лист”.

2.3.       Строка состояния

В правом нижнем углу указывается масштаб (см. описание меню “Вид”). Если курсор мыши находится на листе, то слева указываются характеристики точки под курсором: координаты (как показано на линейках) и цвет. Кроме того, координаты курсора показываются рисками.

Цвет описывается в том формате, который определен в меню “Вид → Цвет в строке статуса”. Если для цвета есть стандартное наименование на русском языке, то оно тоже выводится.

2.4.       Лист при первом открытии окна

Когда окно Рисователя открывается первый раз во время сеанса работы системы КуМир, в нем располагается стандартный чистый лист. По умолчанию, это чистый белый лист размером 640×480. Если экран маленький (менее 700 пикселей в высоту) – в масштабе 50%.

Формат этого листа можно изменить. Для этого нужно файл с описанием нужного листа поместить по адресу $KUMDIR/Addons/painter/resources/default.png. Если указанный файл существует, то именно он будет предъявляться в качестве стандартного чистого листа.

3.       Меню “Лист”

•    Новый лист – предлагает выбор нового чистого листа: указать параметры нового листа (высота, ширина, цвет); выбрать один из предлагаемых шаблонов.

•    Загрузить... – запрашивает имя PNG-фала, который затем загружает и использует в качестве стандартного чистого листа (см. 2.4).

•    Сохранить копию... – если ранее сохранялась копия, то перезаписывает указанный файл текущим изображением листа, иначе – эквивалентно “Сохранить копию как...”.

•    Сохранить копию как... – запрашивает имя PNG-фала, после чего записывает в указанный файл текущее изображение листа. При запросе имени файла предлагается имя по умолчанию: рисунок.png, если не загружен никакой файл шаблона; копия $имя_файла, если в качестве шаблона загружен файл $имя_файла.

4.       Меню “Вид”

•    Масштаб 100% – устанавливает масштаб отображения листа в окне наблюдения, равный 1.0.

•    Масштаб 50% – устанавливает масштаб отображения листа в окне наблюдения, равный 0.5.

•    Масштаб по ширине – устанавливает масштаб отображения листа таким образом, чтобы лист ширина изображения листа равнялась ширине окна.

•    Масштаб по высоте – устанавливает масштаб отображения листа таким образом, чтобы лист высоте изображения листа равнялась высоте окна.

•    Масштаб по окну – устанавливает максимальный масштаб отображения листа, при котором лист целиком помещается в окно.

5.       Набор команд

5.1.       Информационные команды

Команды этой группы позволяют определить размеры листа и текстовой надписи (в пикселях).

•    алг цел высота листа – возвращает высоту листа.

•    алг цел ширина листа – возвращает ширину листа.

•    алг цел центр x – возвращает координату середины листа по горизонтали (ширине).

•    алг цел центр y – возвращает координату середины листа по вертикали (высоте).

•    алг цел ширина текста(лит текст) – возвращает ширину текста в пикселях (при заданном шрифте).

5.2.       Установка параметров рисования

Эти команды нужны для задания параметров рисования линии (толщина, цвет), закрашивания (цвет), рисования текстовых надписей (гарнитура, размер символов, использование жирных или курсивных букв). Эти параметры используются в командах рисования (см. 5.3).

Толщина линий задается в пикселях. Цвета задаются литеральными величинами (см. 6). Гарнитуры также задаются литеральными величинами, список допустимых гарнитур определяется таковым списком в операционной системе.

•    алг перо(цел толщина, лит цвет)

Описание Устанавливает толщину и цвет контура. При толщине 0 линия не рисуется (но заливка внутренней области прямоугольника или эллипса производится – включая контур). Установки по умолчанию

–    Толщина = 1.

–    Цвет =черный.

Ошибки выполнения

Отрицательная толщина.

Недопустимый цвет.

•    алг кисть(лит цвет)

Описание Устанавливает цвет заливки. Пустая строка означает прозрачный цвет (отсутствие закрашивания). Установки по умолчанию – Цвет = белый.

Ошибки выполнения

–    Недопустимый цвет.

•    алг шрифт(лит гарнитура, цел размер в пикселях, лог жирный, лог курсив)

Описание Устанавливает параметры шрифта, которые затем используются командой надпись.

Установки по умолчанию

–    Гарнитура – из настроек ОС.

–    Размер в пикселях – из настроек ОС.

–    Жирный – из настроек ОС.

–    Курсив – из настроек ОС.

5.3.       Рисование

Линии и надписи выполняются пером (его толщина и цвет устанавливаются в команде перо). Для пера определено текущее положение, которое устанавливается в команде алг в точку(цел x, y). Начальное положение – (0,0). Если точка, которую нужно отметить, находится вне листа – никаких действий не производится.

•    алг в точку(цел x, y)

Описание Помещает перо в указанную точку.

•    алг линия в точку(цел x, y)

Описание Проводит отрезок из текущей точки пера в точку (х,у). Перо перемещается в точку (х,у).

•    алг пиксель (цел x, y, лит цвет)

Описание Устанавливает указанный цвет в указанном пикселе. Перо перемещается в точку (х,у).

Ошибки выполнения

–     Координаты вне листа.

–     Недопустимый цвет.

•    алг лит цвет в точке(арг цел x, y)

Описание Возвращает цвет пикселя. Возвращает стандартный код цвета (см. 6).

Ошибки выполнения

–     Координата меньше 0.

–     Выход за границу рисунка.

•    алг линия(цел x1, y1, x2, y2)

Описание Проводит прямую линию между указанными точками. Перо смещается в точку (x₂,y₂).

•    алг прямоугольник(цел x1, y1, x2, y2)

Описание Проводит контур прямоугольника в соответствии с состоянием пера и закрашивает внутренность в соответствии с состоянием кисти. Точки (x₁,y₁) и (x₂,y₂) – координаты противоположных вершин прямоугольника Перо смещается в точку (x₂,y₂).

•    алг эллипс(цел x1, y1, x2, y2)

Описание Проводит контур эллипса, вписанного в прямоугольник(цел x1, y1, x2, y2), в соответствии с состоянием пера и закрашивает внутренность в соответствии с состоянием кисти. Точки (x₁,y₁) и (x₂,y₂) – координаты противоположных вершин прямоугольника. Перо не меняет положения.

•    алг окружность (цел xc, yc, r)

Описание Проводит окружность с центром (x_c,y_c)и радиусом r в соответствии с состоянием пера и закрашивает внутренность круга в соответствии с состоянием кисти.

Ошибки выполнения

–     Отрицательный радиус

•    алг надпись(цел x, y, лит текст)

Описание Выводит указанный текст в соответствии с параметрами команд перо (цвет линии) и шрифт. Точка (x,y) – левая верхняя точка текста. Выводится только часть текста, которая реально попадает на лист.

•    алг залить(цел x, y)

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

5.4.       Работа с листами

•    алг новый лист(цел ширина, высота, лит цвет фона)

Описание Создает новый лист с заданной высотой и цветом фона.

Ошибки выполнения

–     Ширина менее 20.

–     Высота менее 20.

–     Недопустимый цвет.

•    алг загрузить лист(лит имя файла)

Описание Загружает лист из графического файла в формате PNG.

Ошибки выполнения

–     Не могу прочитать.

•    алг сохранить лист(лит имя файла)

Описание Сохраняет лист в графический файл формата PNG.

Ошибки выполнения – Не могу записать.

5.5.       Работа с цветами

5.5.1. Строят внутреннее представление цвета

•    алг лит RGB(цел r, g, b)

•    алг лит RGBA(цел r, g, b, a)

•    алг лит CMYK(цел c, m, y, k)

•    алг лит CMYKA(цел c, m, y, k, a)

•    алг лит HSV(цел h, s, v)

•    алг лит HSVA(цел h, s, v, a)

•    алг лит HSL(цел h, s, l)

•    алг лит HSLA(цел h, s, l, a)

5.5.2. Раскладывают цвет из внутреннего кодового представления на его компоненты в соответствии с цветовой моделью

•    алг разложить цвет в RGB(лит цвет, рез цел R, G, B)

•    алг разложить цвет в CMYK(лит цвет, рез цел C, M, Y, K)

•    алг разложить цвет в HSL(лит цвет, рез цел H, S, L)

•    алг разложить цвет в HSV(лит цвет, рез цел H, S, V)

6.       Набор цветов

6.1.       Способы задания цветов

Цвета задаются строковыми (литеральными) величинами. Возможны следующие форматы:

•    Пустая строка – прозрачный.

•    Строка в CSS-формате, т. е. попадающая под регулярное выражение:

(rgb)|(rgba)|(cmyk)|(cmyka)|(hsl)|(hsla)\((\d+,?)+\)

– установка цвета по модели $1 и десятичным компонентам, разделенных запятыми из $2.

Пример: rgb(255, 0, 0) – красный, cmyk(0, 0, 255, 0) – желтый.

•    Строка в HTML-формате (строка вида #RRGGBB[AA]).

•    Одно из имен цветов радуги (плюс черный и белый) в кириллице (см. Приложение A).

•    Одно из определенных стандартом W3C (см. http://www.w3.org/TR/SVG/types. html#ColorKeywords) имен в латинице (см. Приложение B).

6.2.       Стандартный код цвета

В качестве стандартного кода цвета (он используется в строке состояния окна, командах цвет пикселя и код цвета) используется текст, определяемый по следующим правилам:

•    если в цвете нет атрибута “a” – текст вида rgb(r, g, b)

•    если в цвете есть атрибут “a” – текст вида rgba(r, g, b, a)

A. Допустимые русские названия цветов

черный чёрный белый серый фиолетовый синий голубой зеленый зелёный желтый

жёлтый оранжевый красный

B. Допустимые английские названия цветов

aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkgrey darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkslategrey darkturquoise darkviolet deeppink deepskyblue dimgray dimgrey dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite gold goldenrod gray grey green greenyellow honeydew hotpink indianred indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgray lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray lightslategrey lightsteelblue lightyellow lime limegreen linen magenta maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose moccasin navajowhite navy oldlace olive olivedrab orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple red rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna silver skyblue slateblue slategray slategrey snow springgreen steelblue tan teal thistle tomato turquoise violet wheat white whitesmoke yellow yellowgreen

Батвинова А.И.

МОУ «Толмачевская СОШ»

Тема «Графические возможности объектно-ориентированного языка программирования»

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

Задачи урока:

Обучающие:

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

Развивающие:

• развивать умения анализировать, сравнивать, систематизировать и обобщать;
• развивать логическое мышление обучающихся, стремление к расширению кругозора;

Воспитывающие:

• воспитание информационной культуры, внимания, усидчивости.

Оборудование: интерактивная доска, проектор, карточки-задания, презентация

 Ход урока

I.      Организационный момент

II.      Постановка цели и задач урока. Мотивация учебной деятельности учащихся.     (слайд 1-6)                                      

III.     Актуализация знаний.

Сегодня мы начинаем изучать новую тему «Графические возможности языка программирования». Давайте повторим основные типы алгоритмических структур.(слайд 7)

IV.     Изучение нового материала

А теперь познакомимся с возможностями среды   языка программирования Кумир для работы с графической информацией. Система Кумир включает в себя исполнителя ‹‹Рисователь›, позволяющего строить графические изображения.

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

Геометрические размеры пикселя определяются разрешением монитора. Разрешение монитора задается в виде x и y, где x – количество возможных пикселей  на экране по горизонтали, а y – количество пикселей по вертикали. Например, известны следующие разрешения мониторов: 320х200;     640x480;     800x600;        1024x768;         1280x1024 – и т.д.

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

Рисование различных геометрических фигур осуществляется с помощью специальных стандартных команд (процедур). Команды для работы в графическом режиме хранятся в библиотечном модуле «Справка». Исполнитель ‹‹Рисователь›› входит в нашу поставку Кумир, но его функции не являются частью языка программирования. Для его использования необходимо в программе явно указать использование данного исполнителя:

использовать Рисователь

| теперь функции рисователя доступны

| для использования в программе

Рисование осуществляется в специальном графическом окне. Возможность рисовать одновременно в нескольких окнах отсутствует. Рисовать можно с помощью пера и кисти. С помощью команды новый лист(высота, ширина, цвет)можно задавать  размеры графического окна. Когда окно Рисователя открывается первый раз во время сеанса работы системы КуМир, в нем располагается стандартный чистый лист. По умолчанию, это чистый белый лист размером 640×480.

А теперь рассмотрим графические примитивы, которые мы можем создать с помощью исполнителя «Рисователь» 2/

Приложение 2

перо(цел толщина, лит цвет)	Устанавливает толщину и цвет контура. При толщине 0 линия не рисуется (но заливка внутренней области прямоугольника или эллипса производится – включая контур). Установки по умолчанию – Толщина = 1. – Цвет =черный. Ошибки выполнения Отрицательная толщина. Недопустимый цвет.
кисть(лит цвет)	Устанавливает цвет заливки. Пустая строка означает прозрачный цвет (отсутствие закрашивания). Установки по умолчанию – Цвет = белый. Ошибки выполнения – Недопустимый цвет Допустимые русские названия цветов черный чёрный белый серый фиолетовый синий голубой зеленый зелёный желтый жёлтый оранжевый красный
в точку(цел x, y)	Помещает перо в указанную точку.
линия в точку(цел x, y)	Проводит отрезок из текущей точки пера в точку (х, у). Перо перемещается в точку (х, у).
пиксель (цел x, y, лит цвет)	Устанавливает указанный цвет в указанном пикселе. Перо перемещается в точку (х, у). Ошибки выполнения – Координаты вне листа. – Недопустимый цвет
линия(цел x1, y1, x2, y2)	Проводит прямую линию между указанными точками. Перо смещается в точку (x2, y2).
прямоугольник(цел x1, y1, x2, y2));	Проводит контур прямоугольника в соответствии с состоянием пера и закрашивает внутренность в соответствии с состоянием кисти. Точки (x1, y1) и (x2, y2) – координаты противоположных вершин прямоугольника Перо смещается в точку (x2, y2).
эллипс(цел x1, y1, x2, y2)	Проводит контур эллипса, вписанного в прямоугольник(цел x1, y1, x2, y2), в соответствии с состоянием пера и закрашивает внутренность в соответствии с состоянием кисти. Точки (x1, y1) и (x2, y2) – координаты противоположных вершин прямоугольника. Перо не меняет положения.
окружность (цел xc, yc, r)	Проводит окружность с центром (xc, yc)и радиусом r в соответствии с состоянием пера и закрашивает внутренность круга в соответствии с состоянием кисти. Ошибки выполнения – Отрицательный радиус
шрифт(лит гарнитура, цел размер, лог жирный, лог курсив)	устанавливает параметры шрифта, которые используются алгоритмами надпись и ширина текста. Изначальные параметры шрифта соответствуют таковым в настройках операционной системы. ·                гарнитура – гарнитура шрифта (Arial, Times New Roman и т.д.); ·                размер – размер шрифта, который определяется как количество пикселей от базовой линии до верхней границы заглавных букв; ·                жирный – признак использования жирного начертания шрифта; курсив – признак использования курсивного начертания шрифта
надпись(цел x, y, лит текст)	Выводит указанный текст в соответствии с параметрами команд перо (цвет линии) и шрифт. Точка (x, y) – левая верхняя точка текста. Выводится только часть текста, которая реально попадает на лист.
залить(цел x, y)	Область точки – это связное множество точек, которые имеют тот же цвет, что и данная точка и включают саму точку. Связность понимается только по вертикали и горизонтали. Команда меняет цвет всех точек в этой области в соответствии с состоянием кисти. Если координаты точки вне листа, то никаких действий не выполняется.
новый лист(цел ширина, высота, лит цвет фона)	Рисует сектор круга, ограниченный дугой (параметры процедуры имеют тот же смысл, что и в процедуре Arc).

V.Первичное усвоение новых знаний и проверка понимания

Давайте на простом примере посмотрим, как создается алгоритм рисования фигур в программе Кумир.

У каждого ученика на ПК есть фаил с заданием. /Приложение 1/

Приложение 1    

Демонстрация рисования  замкнутых фигур с помощью линий и их закрашивание

использовать Рисователь  | теперь функции исполнителя «Рисователя» |  доступны для использования в программе алг треугольник нач . новый лист(640, 480, белый)| устанавливает размеры и цвет графического окна . перо (3,зеленый)| устанавливает толщину и цвет  текущего пера . в точку (100,100) | устанавливает перо в заданную координатами точку . линия в точку (200,100)| рисует линии зеленым цветом . линия в точку (150,30) | рисует линии зеленым цветом . линия в точку (100,100) | рисует линии зеленым цветом . кисть (красный) | устанавливает цвет  кисти . залить (150,70) |Закрашивает треугольник красным цветом . перо (4, черный) | устанавливает толщину и цвет  текущего пера . прямоугольник(100, 300, 200, 400)| проводит контур прямоугольника . кисть(зеленый) | устанавливает цвет  кисти . залить(150,340) |Закрашивает прямоугольник зеленым цветом . шрифт("Arial", 12, да, да) |устанавливает параметры шрифт. надпись(10, 200, "21.03.2019 Графические возможности объектно-ориентированного языка программирования")| Выводит указанный текст кон

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

VI. Физкультминутка (слайд 22-23)

         Исходное положение:

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

- на раз – поднять глаза вверх, на два – смотреть прямо, на три – потупить взор книзу, на четыре – смотреть прямо, 6раз.

- на раз – смотреть на переносицу, на два – прямо. Повторить 6 раз.

- на раз - смотреть влево, на два – прямо, на три – смотреть вправо, на четыре – перед собой. Повторить 8 раз.

- круговые обороты глазами – 4 раза влево, четыре вправо.

- широко раскрыть глаза, а потом плотно закрыть. Повторить 5 раз.

VII. Практическое применение знаний и умений

А теперь сами попробуем составить программу. В тетради начертим систему координат. Не забудьте, что ось у идет сверху вниз. Давайте примем 1 клеточку тетради за 20 пикселей (точек). Подпишем координаты. Начертим куб. С чего начинаем составление программы? Правильно, нач, незабываем указать исполнителя программы (Использовать Рисователь), напишем имя нашей программы (каким может быть имя?). Затем следует команда новый лист (цел ширина, высота, лит цвет фона) и процедура, которая устанавливает размеры графического окна. Установим ширину пера и стиль линии. Зададим цвет пера, цвет которым будем рисовать линии. Пишем команду линия в точку и определяем координаты концов одного отрезка стороны куба. Аналогично рисуем все стороны куба. Программу заканчиваем командой Кон.

Важно помнить:

1. Графические координаты принимают только целочисленные значения.

2. Графические координаты принимают значения, ограниченные как снизу (нулевым значением), так и сверху (значением разрешения экрана монитора).

3. Графическая координата у отсчитывается сверху вниз.

VIII.Рефлексия

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

IX.Домашнее задание.

Выучить конспект. Составить программу для рисования фигуры ( звезда, дом)

Протестировать составленную программу «Куб» в КуМире, исправить ошибки если таковые есть.

• 1 слайд

  2
  ГРАФИКА
  

• 2 слайд

  Р
  ВОЗМОЖНОСТЬ
  

• 3 слайд

  Учитель информатики: Батвинова А.И
  Графические возможности
  объектно-ориентированного языка программирования
  Класс: 9
  Урок на тему:
  

• 4 слайд

  www.themegallery.com
  Цели урока:
  Обучающие:
  отработать умений и навыков по теме алгоритмизация и программирование;
  закрепить знания по основам алгоритмизации и графическим возможностям программы Кумир.
  Развивающие:
  развивать умения анализировать, сравнивать, систематизировать и обобщать;
  развивать логическое мышление обучающихся, стремление к расширению кругозора;
  Воспитывающие:
  воспитание информационной культуры, внимания, усидчивости.
  

• 5 слайд

  В настоящее время в компьютерном мире существует много языков программирования.
  Программу, выполняющую одни и те же действия, можно написать на Бэйсике, Паскале, Си, КуМире.
  Какой же из языков лучше?
  Ответ на этот вопрос не так прост.
  

• 6 слайд

  Однако можно с уверенностью сказать, что в КуМире используется простой алголоподобный язык с русской лексикой и встроенными командами управления программными исполнителями, что делает эту программу подходящей для обучения программированию.
  КуМир основан на методике, разработанной во второй половине 1980-х годов под руководством академика Андрея Петровича Ершова. 
  

• 7 слайд

  Какие алгоритмические структуры мы знаем?
  Повторение пройденного материала
  

• 8 слайд

  исполнитель «Рисователь»
  

• 9 слайд

  www.themegallery.com
  х
  y
  изображение на экране строится из точек – пикселей.
  
  Каждый пиксель (точка) имеет две координаты: х и у.
  разрешения мониторов: 320х200; 640x480; 800x600; 1024x768; 1280x1024 – и т.д.
  

• 10 слайд

  www.themegallery.com
  Справочные руководства – F1
  

• 11 слайд

  использовать Рисователь
  алг имя_алгоритма
  нач
  .
  кон
  
  | теперь функции Рисователя доступны
  | для использования в программе
  Исполнитель
  

• 12 слайд

  Графические примитивы:
  

• 13 слайд

• 14 слайд

• 15 слайд

• 16 слайд

• 17 слайд

• 18 слайд

• 19 слайд

  Шрифт и надпись
  

• 20 слайд

• 21 слайд

  www.themegallery.com
  Допустимые русские названия цветов : черный, чёрный, белый, серый, фиолетовый, синий, голубой, зеленый, зелёный, желтый, жёлтый, оранжевый красный.
  

• 22 слайд

  Физминутка
  

• 23 слайд

  Исходное положение:
  сесть на стул, руки положить на колени, расслабиться, все внимание сосредоточить на глазах. Упражнения надо выполнять без напряжения. Дышать медленно.
  - на раз – поднять глаза вверх, на два – смотреть прямо, на три – потупить взор книзу, на четыре – смотреть прямо, 6раз.
  - на раз – смотреть на переносицу, на два – прямо. Повторить 6 раз.
  - на раз - смотреть влево, на два – прямо, на три – смотреть вправо, на четыре – перед собой. Повторить 8 раз.
  - круговые обороты глазами – 4 раза влево, четыре вправо.
  - широко раскрыть глаза, а потом плотно закрыть. Повторить 5 раз.
  

• 24 слайд

  www.themegallery.com
  использовать Рисователь
  алг треугольник
  нач
  . новый лист(640, 480, белый)| устанавливает размеры и цвет графического окна
  . перо (3,зеленый)| устанавливает толщину и цвет текущего пера
  . в точку (100,100) | устанавливает перо в заданную координатами точку
  . линия в точку (200,100)| рисует линии зеленым цветом
  . линия в точку (150,30) | рисует линии зеленым цветом
  . линия в точку (100,100) | рисует линии зеленым цветом
  . кисть (красный) | устанавливает цвет кисти
  . залить (150,70) |Закрашивает треугольник красным цветом
  . перо (4, черный) | устанавливает толщину и цвет текущего пера
  . прямоугольник(100, 300, 200, 400)| проводит контур прямоугольника
  . кисть(зеленый) | устанавливает цвет кисти
  . залить(150,340) |Закрашивает прямоугольник зеленым цветом
  . шрифт("Arial", 12, да, да) |устанавливает параметры шрифт.
  . надпись(10, 200, "21.03.2019 Графические возможности объектно-ориентированного языка программирования")| Выводит указанный текст
  кон
  

• 25 слайд

  www.themegallery.com
  использовать Рисователь
  алг треугольник
  нач
  . новый лист(640, 480, белый)
  . перо (3,зеленый)
  . в точку (100,100)
  . линия в точку (200,100)
  . линия в точку (150,30)
  . линия в точку (100,100)
  . кисть (красный)
  . залить (150,70)
  . перо (4, черный)
  . прямоугольник(100, 300, 200, 400)
  . кисть(зеленый)
  . залить(150,340)
  . шрифт("Arial", 12, да, да)
  . надпись(10, 200, "21.03.2019 Графические возможности объектно-ориентированного языка программирования")
  кон
  

• 26 слайд

  www.themegallery.com
  

• 27 слайд

  Домашнее задание.
  Выучить конспект. Составить программу для рисования фигуры ( звезда или дом) на выбор.
  

• 28 слайд

  Спасибо за урок!
  

• 29 слайд

  www.themegallery.com
  

Краткое описание документа:

Батвинова А.И.

МОУ «Толмачевская СОШ»

Тема «Графические возможности объектно-ориентированного языка программирования»

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

Задачи урока:

Обучающие:

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

Развивающие:

• развивать умения анализировать, сравнивать, систематизировать и обобщать;
• развивать логическое мышление обучающихся, стремление к расширению кругозора;

Воспитывающие:

• воспитание информационной культуры, внимания, усидчивости.

Оборудование: интерактивная доска, проектор, карточки-задания, презентация

Ход урока

• Организационный момент
• Постановка цели и задач урока. Мотивация учебной деятельности учащихся.(слайд 1-6)
• Актуализация знаний.
• Изучение нового материала

Сегодня мы начинаем изучать новую тему «Графические возможности языка программирования». Давайте повторим основные типы алгоритмических структур.(слайд 7)

А теперь познакомимся с возможностями средыязыка программирования Кумир для работы с графической информацией. Система Кумир включает в себя исполнителя ‹‹Рисователь›, позволяющего строить графические изображения.

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

Геометрические размеры пикселя определяются разрешением монитора. Разрешение монитора задается в виде x и y, где x – количество возможных пикселейна экране по горизонтали, а y – количество пикселей по вертикали. Например, известны следующие разрешения мониторов: 320х200;640x480;800x600;1024x768;1280x1024 – и т.д.

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

Рисование различных геометрических фигур осуществляется с помощью специальных стандартных команд (процедур). Команды для работы в графическом режиме хранятся в библиотечном модуле «Справка». Исполнитель ‹‹Рисователь›› входит в нашу поставку Кумир, но его функции не являются частью языка программирования. Для его использования необходимо в программе явно указать использование данного исполнителя:

использовать Рисователь

| теперь функции рисователя доступны

| для использования в программе

Рисование осуществляется в специальном графическом окне. Возможность рисовать одновременно в нескольких окнах отсутствует. Рисовать можно с помощью пера и кисти. С помощью команды новый лист(высота, ширина, цвет)можно задаватьразмеры графического окна. Когда окно Рисователя открывается первый раз во время сеанса работы системы КуМир, в нем располагается стандартный чистый лист. По умолчанию, это чистый белый лист размером 640×480.

А теперь рассмотрим графические примитивы, которые мы можем создать с помощью исполнителя «Рисователь» 2/

Приложение 2

перо(цел толщина, лит цвет)	Устанавливает толщину и цвет контура. При толщине 0 линия не рисуется (но заливка внутренней области прямоугольника или эллипса производится – включая контур). Установки по умолчанию – Толщина = 1. – Цвет =черный. Ошибки выполнения Отрицательная толщина. Недопустимый цвет.
кисть(лит цвет)	Устанавливает цвет заливки. Пустая строка означает прозрачный цвет (отсутствие закрашивания). Установки по умолчанию – Цвет = белый. Ошибки выполнения – Недопустимый цвет Допустимые русские названия цветов черный чёрный белый серый фиолетовый синий голубой зеленый зелёный желтый жёлтый оранжевый красный
в точку(цел x, y)	Помещает перо в указанную точку.
линия в точку(цел x, y)	Проводит отрезок из текущей точки пера в точку (х, у). Перо перемещается в точку (х, у).
пиксель (цел x, y, лит цвет)	Устанавливает указанный цвет в указанном пикселе. Перо перемещается в точку (х, у). Ошибки выполнения – Координаты вне листа. – Недопустимый цвет
линия(цел x1, y1, x2, y2)	Проводит прямую линию между указанными точками. Перо смещается в точку (x2, y2).
прямоугольник(цел x1, y1, x2, y2));	Проводит контур прямоугольника в соответствии с состоянием пера и закрашивает внутренность в соответствии с состоянием кисти. Точки (x1, y1) и (x2, y2) – координаты противоположных вершин прямоугольника Перо смещается в точку (x2, y2).
эллипс(цел x1, y1, x2, y2)	Проводит контур эллипса, вписанного в прямоугольник(цел x1, y1, x2, y2), в соответствии с состоянием пера и закрашивает внутренность в соответствии с состоянием кисти. Точки (x1, y1) и (x2, y2) – координаты противоположных вершин прямоугольника. Перо не меняет положения.
окружность (цел xc, yc, r)	Проводит окружность с центром (xc, yc)и радиусом r в соответствии с состоянием пера и закрашивает внутренность круга в соответствии с состоянием кисти. Ошибки выполнения – Отрицательный радиус
шрифт(лит гарнитура, цел размер, лог жирный, лог курсив)	устанавливает параметры шрифта, которые используются алгоритмами надпись и ширина текста. Изначальные параметры шрифта соответствуют таковым в настройках операционной системы. гарнитура – гарнитура шрифта (Arial, Times New Roman и т.д.); размер – размер шрифта, который определяется как количество пикселей от базовой линии до верхней границы заглавных букв; жирный – признак использования жирного начертания шрифта; курсив – признак использования курсивного начертания шрифта
надпись(цел x, y, лит текст)	Выводит указанный текст в соответствии с параметрами команд перо (цвет линии) и шрифт. Точка (x, y) – левая верхняя точка текста. Выводится только часть текста, которая реально попадает на лист.
залить(цел x, y)	Область точки – это связное множество точек, которые имеют тот же цвет, что и данная точка и включают саму точку. Связность понимается только по вертикали и горизонтали. Команда меняет цвет всех точек в этой области в соответствии с состоянием кисти. Если координаты точки вне листа, то никаких действий не выполняется.
новый лист(цел ширина, высота, лит цвет фона)	Рисует сектор круга, ограниченный дугой (параметры процедуры имеют тот же смысл, что и в процедуре Arc).

V.Первичное усвоение новых знаний и проверка понимания

Давайте на простом примере посмотрим, как создается алгоритм рисования фигур в программе Кумир.

У каждого ученика на ПК есть фаил с заданием. /Приложение 1/

Приложение 1

Демонстрация рисованиязамкнутых фигур с помощью линий и их закрашивание

использовать Рисователь | теперь функции исполнителя «Рисователя» | доступны для использования в программе алг треугольник нач . новый лист(640, 480, белый)| устанавливает размеры и цвет графического окна . перо (3,зеленый)| устанавливает толщину и цветтекущего пера . в точку (100,100) | устанавливает перо в заданную координатами точку . линия в точку (200,100)| рисует линии зеленым цветом . линия в точку (150,30) | рисует линии зеленым цветом . линия в точку (100,100) | рисует линии зеленым цветом . кисть (красный) | устанавливает цветкисти . залить (150,70) |Закрашивает треугольник красным цветом . перо (4, черный) | устанавливает толщину и цветтекущего пера . прямоугольник(100, 300, 200, 400)| проводит контур прямоугольника . кисть(зеленый) | устанавливает цветкисти . залить(150,340) |Закрашивает прямоугольник зеленым цветом . шрифт("Arial", 12, да, да) |устанавливает параметры шрифт. надпись(10, 200, "21.03.2019 Графические возможности объектно-ориентированного языка программирования")| Выводит указанный текст кон

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

VI. Физкультминутка (слайд 22-23)

Исходное положение:

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

- на раз – поднять глаза вверх, на два – смотреть прямо, на три – потупить взор книзу, на четыре – смотреть прямо, 6раз.

- на раз – смотреть на переносицу, на два – прямо. Повторить 6 раз.

- на раз - смотреть влево, на два – прямо, на три – смотреть вправо, на четыре – перед собой. Повторить 8 раз.

- круговые обороты глазами – 4 раза влево, четыре вправо.

- широко раскрыть глаза, а потом плотно закрыть. Повторить 5 раз.

VII. Практическое применение знаний и умений

А теперь сами попробуем составить программу. В тетради начертим систему координат. Не забудьте, что ось у идет сверху вниз. Давайте примем 1 клеточку тетради за 20 пикселей (точек). Подпишем координаты. Начертим куб. С чего начинаем составление программы? Правильно, нач, незабываем указать исполнителя программы (Использовать Рисователь), напишем имя нашей программы (каким может быть имя?). Затем следует команда новый лист (цел ширина, высота, лит цвет фона) и процедура, которая устанавливает размеры графического окна. Установим ширину пера и стиль линии. Зададим цвет пера, цвет которым будем рисовать линии. Пишем команду линия в точку и определяем координаты концов одного отрезка стороны куба. Аналогично рисуем все стороны куба. Программу заканчиваем командой Кон.

Важно помнить:

1. Графические координаты принимают только целочисленные значения.

2. Графические координаты принимают значения, ограниченные как снизу (нулевым значением), так и сверху (значением разрешения экрана монитора).

3. Графическая координата у отсчитывается сверху вниз.

VIII.Рефлексия

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

IX.Домашнее задание.

Выучить конспект. Составить программу для рисования фигуры ( звезда, дом)

Протестировать составленную программу «Куб» в КуМире, исправить ошибки если таковые есть.