Включение в дополнительное обучению школьников темы "Использование графических возможностей PascalABC.Net"

Элементы графических возможностей и объектно-ориентированного программирования на PascalABC.Net”

_________________________________________________________________________________

«Включение в дополнительное обучение школьников темы «Графические возможности и элементы объектно-ориентированного программирования на PascalABS.Net»

Введение

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

То же самое, можно сказать и о введении в элементы объектно-ориентированного программирования, которые включены в обязательный курс УПК «Информатика-9», учебник для 9 класса автора Н.Д.Угринович. По этому комплексу проводиться обучение в ряде общеобразовательных школ. В вышеупомянутом курсе УПК предлагается использовать при изучении элементов объектно-ориентированного программирования на примере языка Visual Basic, который не является свободно распространяемым и далеко не все учебные заведения могут себе позволить приобрести его лицензионную версию. В Open Office.org делать это, по моему мнению, не очень удобно.

Для обучения теме «Основы алгоритмизации и объектно-ориентированного программирования» был выбран язык программирования PascalABC.Net, который является свободно-распространяемым и не требует обязательной лицензии, а также применяется многими учебными заведения при обучении вышеназванной темы. А также PascalABC. Net имеет большую библиотеку дополнительных модулей для визуального программирования и поддержки графики.

Данная работа предлагает последовательное изучение трех тем:

1. Графика. Модуль GraphABC.

2. Создание и использование анимационных эффектов.

3. Создание оконного приложения. Проект «Калькулятор ».

На каждую из тем планируется по 2 урока( теоретическая часть и практика на компьютере) и 1 урок – контрольный практический на самостоятельное создание проекта.

Тема «Графика. Модуль GraphABC».

Цели:

Образовательные:

- Познакомиться с графическими возможностями программы PascalABС. Net;

- Познакомиться c возможностями модуля GraphABC и процедурами построения графических примитивов.

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

- умение анализировать, сравнивать, систематизировать и обобщать;

- развивать интерес к учению, стремление к расширению кругозора;

Воспитательные:

- бережное отношение к имуществу, вычислительной технике и учебным пособиям;

- дисциплинированность, любознательность.

Кто работает с PascalABC.Net наверное заметили, насколько его интерфейс стал интереснее по сравнению со старым добрым TurboPascal. Но в TurboPascal.был замечательный модуль Graph, подключил его, написал пару строчек непонятных заклинаний – и рисуй себе все что угодно 256 цветами. А теперь, когда появился Windows, а в нем основной режим графический, то и для языков программирования появились соответствующие возможности.

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

Uses GraphABC;

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

Uses GraphABC;

Begin

Rectangle(10,10,100,100);

End.

( далее проводиться демонстрация выполнения программы)

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

В модуле GraphABC определен ряд констант, типов, процедур, функций и классов для рисования в графическом окне.

Графическое окно - это дополнительное окно, которое открывается при вызове модуля на экран и, в котором происходит графическое воспроизведение того, что мы хотим представить. Это окно имеет определенные размеры, заданные по умолчанию, но при этом имеется возможность самим изменять его размеры.

Вид графического окна представлен ниже, на рисунке:

Заголовок – название графического окна, которое задается с помощью стандартной команды:

Window.Title := ‘ Графическая программа’;

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

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

Напомню, что при этом необходимо повторить ученикам по поводу использования цветовой палитры. Надеюсь, что она вам известна, только напомню, что цветовую палитру можно задавать с помощью функции RGB(r,g,b), которая формирует цвет за счет использования трех составляющих: r-красный ; g- зеленый; b-синий в диапазоне от 0 до 255. Дополнительные процедуры и функции по использованию цветовой палитры также приводятся в справочном материале.

Фрагменты практической работы приводиться на экране.

В задании 1 дается полный рабочий проект, на примере которого необходимо выполнить самостоятельно задание 2 и задание 3, 4 дополнительное, для выполнения сильными учащимися на уроке и, в дальнейшем, для использования на контрольном уроке.

Задание 1: «Графические примитивы»

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

- прямоугольник синего цвета, с координатами верхней левой точки(20, 20) и размерами: шириной=Window.Center.X /2 и высотой Window.Center.Y/2;

- круг красного цвета с координатами центра (Window.Center.X + Window.Center.X div 2, Window.Center.Y div 2) и радиусом 80 пикселей;

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

- в четвертом окне вставим любую готовую картинку.

То, что должно получиться представлено на рисунке.

Программа при этом может быть следующей:

uses ABCObjects,GraphABC;

c onst radius = 80;

var p: PictureABC;

begin

var x := Window.Center.X;

var y := Window.Center.Y;

//

Window.Title := 'Графические примитивы ';

Pen.Color := Color.Red;

Pen.Width := 3;

Pen.Style := psSolid;

Brush.Style := bsSolid;

Brush.Color := clBlue;

Rectangle(20, 20, X div 2, Y div 2);

// строим круг

Brush.Color:= Color.Yellow;

Circle(x +x div 2, y div 2,radius);

// строим круговую диаграмму

Brush.Color := clRed;

Pie(x div 2,y+ y div 2,radius,0,30);

Brush.Color := clyellow;

Pie(x div 2,y+ y div 2,radius,30,110);

Brush.Color := clGreen;

Pie(x div 2,y+ y div 2,radius,110,160);

Brush.Color := clBlue;

Pie(x div 2,y+ y div 2,radius,160,280);

Brush.Color := clMagenta;

Pie(x div 2,y+ y div 2,radius,280,360);

// в четвертом квадрате - вставим картинку

Brush.Color := clGreen;

p := PictureABC.Create(x+x div 2-50,y+ y div 2-50,'sanimini.bmp');

end.

Задание 2 (для самостоятельного выполнения):

Изобразить на экране (в графическом окне) олимпийские кольца.

Координаты центра второго верхнего кольца установите

x := Window.Center.X;

y := Window.Center.Y;

Остальные координаты необходимо рассчитать.

Цвета колец: верхний ряд – синий, коричневый, красный

Нижний ряд – желтый, зеленый.

Примерный рисунок может выглядеть так:

Задание 3 (для самостоятельного выполнения):

Получить в центре экрана изображение, состоящее из 10 вложенных квадратов со сторонами 10, 20,30, …, 100.

Указание. В этом и следующих заданиях необходимо использовать цикл.

З адание 4 (для самостоятельного выполнения):

Построить 9 концентрированных окружностей, окрашенных поочередно в зеленый, красный и синий цвета.

Контрольные вопросы:

1. Какими параметрами характеризуются графические примитивы( круг, прямоугольник, линия)?

2. Перечислите методы рисования графических фигур и их аргументы.

3. Назовите основные этапы создания прямоугольника, окружности, круга.

Тема «Создание и использование анимационных эффектов. знакомство с модулем ABCobjects»

Цели:

Образовательные:

- Познакомиться с графическими возможностями программы PascalABС. Net, модулем ABCobjects, который содержит большой класс готовых объектов, а также методами использования готовых объектов;

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

- умение анализировать, сравнивать, систематизировать, обобщать и использовать имеющиеся знания для решения поставленной задачи;

- развивать интерес к учению, стремление к расширению кругозора;

Воспитательные:

- бережное отношение к имуществу, вычислительной технике и учебным пособиям;

- дисциплинированность, любознательность.

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

Для создания эффекта анимации в PascalABC, необходимо дополнительно познакомится с модулем ABCobjects. Включается этот модуль также, как модуль GraphABC (uses ABCobjects;) Модуль ABCobjects реализует классы векторных графических объектов с возможностью масштабирования, наложения друг на друга, создание составных графических объектов.

Модуль ABCobjects предназначен для раннего обучения основам объектно-ориентированного программирования, а также для реализации графических и анимационных проектов средней сложности. Он реализован на основе модуля GraphABC.

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

L eft – отступ графического объекта от левого края;

Top – отступ графического объекта от верхнего края;

W idth – ширина графического объекта;

H

Heiight

К ак же получить анимацию объекта? Возможны два способа:

1. Ц

   Width

   иклически изменять значение параметра Left объекта для перемещения по горизонтали, либо Top – для перемещения по вертикали.

2. Эффект мультипликации: наложением рисунков и быстрая их смена. При этом размеры рисунков должны быть одинаковыми.

Если графическое окно имеет имя S, то можно указать положение и размеры графического объекта: S.Left, S.Top, S.Width, S.Height.

Аналогично, например, S.Color задает цвет объекта.

Для объекта S можем изменить расположение объекта позволяют следующие простые команды :

S.Left := S.Left + d; перемещает объект на d пикселей вправо;

S.Left := S.Left - d; перемещает объект на d пикселей влево;

S.Top := S. Top + d; перемещает объект на d пикселей вниз;

S.Top := S. Top - d; перемещает объект на d пикселей вверх;

Таким же образом мы можем изменять и размеры объектов(меняя свойства Width и Height), для создания эффекта приближения или отдаления объекта.

Для обучения организации движения рассмотрим первый способ.

В практической работе представлен самый простой метод анимации – движение шарика слева направо. Код программы полностью приводится и объясняется каждая незнакомая новая команда.

Задание 1.

Создать движение круга радиусом 50 вдоль графического окна.

u ses GraphABC;

b egin

Window.Title := 'Анимация: Движение шарика';

var y := 100;

Brush.Color := clYellow;

// Отключаем рисование в окне

LockDrawing;

for var x := 55 to window.Width-55 do

begin

Window.Clear(clMoneyGreen);

Circle(x,y,50);

// Перерисовываем окно из внеэранного буфера

Redraw;

Sleep(3);

end;

end.

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

LockDrawing, которая включает режим блокировки рисования на экране и позволяет осуществить прорисовку лишь во внеэкранном буфере, после чего с помощью метода Redraw восстанавливается все графическое окно. Этот метод используется для создания анимации без мерцания.

З атем даются задания для самостоятельного исполнения.

Задание 2(для самостоятельного выполнения).

Используя проект, представленный в задаче 1, внесите в него изменения так, чтобы шарик прокатился по полю 3 раза. Каждое следующее движение вдоль графического окна ниже предыдущего на 120 пикселей. Примерный вид проекта представлен.

З адание 3(для самостоятельного выполнения).

Используя проект, представленный в задаче 1 и 2, внесите в него изменения так, чтобы два шарика начали движение навстречу друг к другу и после соударения откатились на прежние места. Примерный вид проекта представлен.

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

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

uses GraphABC,ABCObjects;

var i,x:integer;

begin

Window.Title:= 'Упругое соударение шариков';

LockDrawing;

// движение шариков до встречи

x:= Window.Width-51;

for i:=1 to Window.Width div 2-75 do

begin

Window.Clear(cllightgreen);

Brush.Style := bsSolid;

Brush.Color := Color.black;

Rectangle(1, 300, Window.Width-1, 320);

Brush.Color := clBlue;

Ellipse(i,250,i+50,300);

Brush.Color := clRed;

Ellipse(x-50,250,x,300);

Redraw;

x:= x-1;

Sleep(1);

end;

// движение в обратном направлении

x:=Window.Width div 2+100;

for i:=Window.Width div 2-100 downto 1 do

begin

…

…

…

end;

end.

Задание 4. (для самостоятельного выполнения)

Написать программу, в ходе выполнения которой круг зеленого цвета, появившись в центре экрана и, постепенно расширяясь, увеличивается в размерах в три раза, а затем сжимается до начальных размеров (начальный радиус круга задать равным 70).

Последнее задание не использует движение, но для его выполнения трудно обойтись без процедур LockDrawing и Redraw .

Контрольные вопросы:

1. Перечислите методы рисования графических фигур и их аргументы.

2. Назовите основные этапы создания прямоугольника, окружности, круга.

3. Покажите на примере основные этапы создания анимации движения объекта.

Тема. «Создание оконного приложения. Проект «Калькулятор».

Цели:

Образовательные:

- Познакомиться с графическими возможностями программы PascalABС. Net;

- Познакомиться c элементами объектно-ориентированного программирования;

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

- умение анализировать, сравнивать, систематизировать и обобщать;

- развивать интерес к учению, стремление к расширению кругозора;

Воспитательные:

- бережное отношение к имуществу, вычислительной технике и учебным пособиям;

- дисциплинированность, любознательность.

Целью создания проекта простого калькулятора была познакомить учащихся с системой объектно-ориентированного программирования на примере создания простой формы.

Как мы уже говорили выше, системы объектно-ориентированного программирования VisualBasic, Gambas(для Linux), Delphi и другие позволяют работать как в режиме интерпретатора, так и в режиме компилятора. Этим они выгодно отличаются от процедурного программирования, так как позволяют сразу наглядно увидеть плоды своего труда( что для учащихся немоловажно).

Но и ряд процедурных языков программирования, каковым является и PascalАВС тоже имеют возможность работать в режиме интерпретатора.

Чем еще характеризуются системы объектно-ориентированного программирования? Это с одной стороны системы программирования, так как позволяют кодировать алгоритмы, с другой стороны являются средами проектирования. Результатом процессов программирования и конструирования является проект, который объединяет в себе программный код и графический интерфейс.

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

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

Например, текстовые поля(TextBox) используются для ввода и вывода данных;

Метки(Label) используются для вывода данных и пояснительных текстов;

Графические окна(PictureBox) – для вывода графики;

Кнопки(Button) – для запуска обработчиков событий

и много других объектов.

Для того, чтобы использовать возможности объектно-ориентированного программирования необходимо обращение к модулю FormsABC (uses FormsABC;). Далее для конструирования графического интерфейса мы должны выбрать объекты. Для проекта «Калькулятор» нам будут нужны следующие объекты:

- метки, для отображения переменных, которые необходимо вводить, например а и b и результат;

- три текстовых поля, в которые можно вводить числа для расчета и вывода результатов;

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

Форму представит в таком виде:

Текстовое поле

Командная кнопка

Графический интерфейс и программный код базируется на использование программных объектов. Каждый объект обладает определенным набором свойств и может использовать определенные методы обработки данных. Кроме того объекты могут реагировать на внешние события.

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

В нашем проекте используем FormsABC, который предназначен для создания простого пользовательского интерфейса. Рассмотрим весь процесс по шагам.

1. Создадим каркас приложения:

uses FormsABC

begin

MainForm.Title := 'Калькулятор ';

MainForm.SetSize(500,350);

End;

После запуска мы увидим на экране главную форму с заданными размерами и заголовком.

1. Добавим на форму компоненты, отвечающие за параметры a,b и sum,

где a,b – данные для расчета,

sum – результат (параметр для вывода результата).

Var a,b,sum: RealField; // создаем поля вещественного типа.

// и еще компоненты кнопок для каждой отдельной функции (показываю для 2-х кнопок)

myButton1: Button; // для “+”

myButton2: Button; // для “-”

1. А в каркасе приложения добавляем команды и он примет вид

begin

MainForm.Title := 'Калькулятор ';

MainForm.SetSize(500,350);

a:= new RealField ('a:');

b:= new RealField ('b:');

LineBreak; // переводит вывод объектов на следующую строку

sum:= new RealField ('Результат:');

LineBreak;

//

myButton1 := new Button('+');

myButton2 := new Button('-');

end;

1. Еще необходимо в начале программы разместить код, позволяющий рассчитывать функции для каждого оператора (+, -). Это делается созданием обработчика события кнопок, который позволит производить расчет при нажатии на одну из кнопок(Click):

procedure MyButton1Click;

begin

sum.value:= a.value + b.value;

end;

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

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

myButton1.Click += MyButton1Click;

Осталось только собрать полностью весь проект. Эту задачу учащиеся выполняют и добавляют дополнительные кнопки.

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

Дополнительно дается проекты для самостоятельного выполнения:

1. Используя проект «Калькулятор», проведите изменения так, чтобы вместо арифметических операций производились вычисления основных математических функций: Sin(x), Cos(x), Tan(x), Log10(x), SQRT(x).

2. Используя проект «Калькулятор», проведите изменения так, чтобы вместо числовых данных производились действия со строковыми переменными.

Контрольные вопросы:

1. В чем состоит разница между типом, именем и значением переменной?

2. Почему необходимо объявлять переменные перед их использованием в программе?

3. Какие основные типы переменных могут использоваться в проектах?

Заключение.

Представленная работа рассматривает только три темы по использованию графических возможностей языка PascalABC при обучении темы «Основы алгоритмизации и объектно-ориентированного программирования». В ней показаны только самые первые шаги в изучении самых азов использования графики. Возможности расширения данной темы неограниченны. Еще при изучении могут быть рассмотрены тонкости построения графиков функций (табулирование, построение осей и другие), использование таймера, создание простейших игровых проектов.

Список использованной литературы:

1. Н.Д.Угринович «Информатика: учебник для 9 класса- 2-е изд.-М.: БИНОМ. Лаборатория знаний, 2014.»

2. Н.И.Амелина и другие «Задачи по программированию. – М.: Вузовская книга, 2000»

3. «Справочная система среды программирования PascalABC.Net»

13