Графический инструмент PascalABC.Net
методическая разработка по информатике и икт (8 класс) по теме

Графический инструмент PascalABC.Net

Введение.

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

1. Изучить основные алгоритмические конструкции языка программирования
2. Повысить мотивацию к предмету
3. Программирование, не есть только вычисление.

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

Инициализация окна.

procedure SetWindowSize(w,h: integer);  Устанавливает размеры клиентской части графического окна в пикселах.

procedure SetWindowTitle(s: string); Устанавливает заголовок графического окна.

Рассмотрим некоторые полезные процедуры графического окна. Остальные процедуры и функции работы с окном можно посмотреть в справочной информации Помощь-Справка-Стандартные модули- Модуль GraphABC- Подпрограммы для работы с графическим окном

procedure ClearWindow; Очищает графическое окно белым цветом.

procedure ClearWindow(c: Color); Очищает графическое окно цветом c. Цветовых констант достаточно много, около 136 оттенков. Основные цвета clBlue- синий, clGreen-зеленный и т.д. Есть полезная функция, которая возвращает случайный цвет.

function clRandom: Color;  Возвращает случайный цвет

procedure CenterWindow; Центрирует графическое окно по центру экрана

procedure Sleep(ms: integer);  Делает паузу на ms миллисекунд

procedure CloseWindow; Закрывает графическое окно и завершает приложение.

Задача 1. Инициализируем графическое окно размером 800*600 с заголовком Первая графическая программа. Разместим его по центру и закрасим синим цветом

uses GraphABC;

var w,h:integer;

begin

  w:=800;

  h:=600;

  SetWindowSize(w,h);

  CenterWindow;

  SetWindowTitle( 'Первая графическая программа');

  ClearWindow(clBlue);

end.

Задача 2. Закрасить графическое окно 20 раз случайным цветом с паузой 300 ms

uses GraphABC;

var w,h,i:integer;

begin

  w:=800;

  h:=600;

  SetWindowSize(w,h);

  CenterWindow;

  SetWindowTitle( 'Первая графическая программа');

  For i:=1 to 20 do

    begin

      ClearWindow(clRandom);

      Sleep(300);

    end;

end.

Задача 3 Уменьшение окна по ширине и высоте на 200 пикселей. Используйте процедуры справочной системы.

uses GraphABC;

var w,h,i:integer;

begin

  w:=800;

  h:=600;

  SetWindowSize(w,h);

  CenterWindow;

  SetWindowTitle( 'Первая графическая программа');

  For i:=1 to 200 do

    begin

      SetWindowWidth(w-i);

      SetWindowHeight(h-i);

      Sleep(30);

    end;

end.

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

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

Данных процедур и функций достаточно много. Их можно посмотреть в разделе Помощь-Справка-Стандартные модули- Модуль GraphABC- Графические примитивы. Вот некоторые, которые мы будем использовать в своих задачах.

procedure SetPixel(x,y: integer; c: Color);  Закрашивает пиксел с координатами (x,y) цветом c

procedure MoveTo(x,y: integer); Устанавливает текущую позицию рисования в точку (x,y)

procedure LineTo(x,y: integer); Рисует отрезок от текущей позиции до точки (x,y). Текущая позиция переносится в точку (x,y)

procedure Line(x1,y1,x2,y2: integer); Рисует отрезок от точки (x1,y1) до точки (x2,y2)

procedure DrawCircle(x,y,r: integer); Рисует окружность с центром (x,y) и радиусом r

procedure DrawRectangle(x1,y1,x2,y2: integer);  Рисует границу прямоугольника, заданного координатами противоположных вершин (x1,y1) и (x2,y2)

procedure Circle(x,y,r: integer); Рисует заполненную окружность с центром (x,y) и радиусом r

procedure Rectangle(x1,y1,x2,y2: integer); Рисует заполненный прямоугольник, заданный координатами противоположных вершин (x1,y1) и (x2,y2)

procedure FloodFill(x,y: integer; c: Color); Заливает область одного цвета цветом c, начиная с точки (x,y).

procedure TextOut(x,y: integer; s: string);  Выводит строку s в прямоугольник к координатами левого верхнего угла (x,y). Если необходимо вывести числовое значение, то вместо строки s можно поставить переменную целого или вещественного типа.

Работа с точками

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

Задача 4. Закрасить точки случайного цвета в графическом окне 800*600. Количество точек 40000, координаты задаются случайным образом в пределах окна.

uses GraphABC;

var w,h,i,x,y:integer;

Begin

  w:=800;

  h:=600;

  SetWindowSize(w,h);

  CenterWindow;

  SetWindowTitle( 'Точки');

  For i:=1 to 40000 do

    begin

      x:=random(800);

      y:=random(600);

      SetPixel(x,y,clRandom);

    end;

end.

Задача №5. Нарисовать прямую, состоящую из точек длиной в 300 пикселей параллельной оси 0Х.

Идея этой задачи реализована циклом с параметром, который выполняетcя 300 раз. В теле цикла изменяется координата X. Если изменять одновременно  координату Y,  получиться смещение прямой на некоторый угол.

uses GraphABC;

var w,h,i,x,y:integer;

Begin

  w:=800;

  h:=600;

  SetWindowSize(w,h);

  CenterWindow;

  SetWindowTitle( 'Прямая');

  For i:=1 to 300 do

    begin

       x:=i+200;

       y:=h div 2;

       putpixel(x,y,clBlue);

    end;

End.

Задача №6 (Вложенные циклы)

Используя результат предыдущей задачи нарисовать закрашенный прямоугольник.

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

for y:=100 to 300 do

    for x:=200 to 400 do

      begin

       putpixel(x,y, clBlue);

      end;

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

Задача №7 Нарисовать из точек окружность радиуса R.

Окружность имеет уравнение x2 + y2 = R2. Будем циклом пробегать все значения от –R до +R.  Значение Y вычисляем дважды. Ордината Y используем для построения верхней дуги, а –Y для нижней. Ниже приведен фрагмент программы построения окружности.

Функция Round округляет полученное значение. При выводе точки смещаем окружность по оси X на 300 точек, по оси Y на 200 точек от начала координат (левого верхнего угла монитора).

uses GraphABC;

var w,h,i,x,y,r:integer;

Begin

  w:=800;

  h:=600;

  SetWindowSize(w,h);

  CenterWindow;

  SetWindowTitle( 'Окружность');

   r:=100;

    for x:=-r to r do

      begin

        y:=Round(sqrt(sqr(r)-sqr(x)));

        putpixel(x+300,y+200,ClRed);

        putpixel(x+300,-y+200,ClBlue);

      end;

End.

Задача №8 Нарисовать кольцо с внешним радиусом R1 и внутренним радиусом R2
Задача аналогична предыдущей.

Задача №9 Вывести точки случайным образом, случайного цвета в область кольца.

Задача интересна тем, что нам необходимо вывести область, удовлетворяющая условию попадания точки в кольцо ограниченная двумя окружностями. Так как, данные кольца вписаны в квадрат со стороной 2*r1, то достаточно пройти вложенными циклами все точки квадрата построчно и выбрать при построении только те точки, которые удовлетворяют условию попадания в кольцо (x2+y2<=r12) and (x2+y2>=r22)

    uses GraphABC;

var w,h,i,x,y,r1,r2:integer;

Begin

  w:=800;

  h:=600;

  SetWindowSize(w,h);

  CenterWindow;

  SetWindowTitle( 'Окружность');

  r1:=100;

  r2:=80;

    for x:=-r1 to r1 do

      for y:=-r1 to r1 do

        begin

          if ((sqr(x)+sqr(y))>=sqr(r2)) and ((sqr(x)+sqr(y))<=sqr(r1))

                then putpixel(x+300,y+200,ClRandom);

        end;

End.

Задача №7 Построить эффект взрыва, увеличивающийся  с центра до краев экрана.

Алгоритм решения задачи построен на попадание случайной точки с координатами x,y в область увеличивающейся окружности. Введем величины:
r1– внешний радиус круга взрыва;
r – увеличивающийся радиус взрыва;
n – количество случайных точек, чем больше r , тем больше точек выводим на экран;
Sleep(2); – задержка вывода на экран.

Функция random генерирует случайное положительное число, то вывод точки происходит только в положительную область декартовой системы координат. Так как точки симметричны относительно системы координат, вместо вывода одной точки выводим 4 точки.

uses GraphABC;

var w,h,i,x,y,r,r1,r2,n:integer;

Begin

  w:=800;

  h:=600;

  SetWindowSize(w,h);

  CenterWindow;

  SetWindowTitle( 'Взрыв');

  r1:=200;

  r:=1;

   while r<=r1 do

     begin

       n:=1;

         while n<=r do

           begin

             x:=random(r);

             y:=random(r);

             if sqr(x)+sqr(y)<=sqr(r)

                      then

                        begin

                          putpixel(x+300,y+200,clBlue);

                          putpixel(-x+300,-y+200,clBlue);

                          putpixel(-x+300,y+200,clBlue);

                          putpixel(x+300,-y+200,clBlue);

                        end;

              Sleep(2);

              n:=n+1;

           end;

        r:=r+1;

     end;

End.

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

1. Запросить номер четверти координатной плоскости и закрасить ее точками.

2. Нарисовать прямоугольник в центре экрана под углом 45 градусов к осям координат, состоящий из 4-х прямых.

3. Нарисовать фигуры.