Графика и анимация в Паскаль АВС
план-конспект урока

Хачкиева Лилия Ивановна
Опубликовано 02.04.2020 - 20:39 - Хачкиева Лилия Ивановна

Данная разработка предназначена для учащихся 7-9 классов, изучающих программирование на языке Паскаль.Уроки позволят освоить элементы графики и анимации в ПаскальАВС. Процесс создания графики вызывает у учащихся особый интерес. Подобные уроки формируют у учащихся пространственное воображение, умение работать с координатной плоскостью, развиваются навыки программирования, а также способствуют  развитию воображения и логического мышления, формированию чувства композиции и художественно-графических умений, навыков конструирования и проектирования, приобщению к творческому процессу и развитию терпения и трудолюбия. 

Скачать:

ВложениеРазмер
Файл Графика_Точка_Линия_Ломанная линия1.4 МБ
Файл Графика_Прямоугольник_Треугольник428.26 КБ
Файл Анимация171.46 КБ

Предварительный просмотр:


Предварительный просмотр:

Урок 2. Рисование фигур. Окраска фигур.

Цель: закрепление и систематизация знаний и умений учащихся при работе с графикой в Паскаль АВС.

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

обучающие - повторить и систематизировать навыки работы по теме «Графика в среде Паскаль», стимулировать интерес учащихся к созданию нестандартных заданий; формирование чувства композиции и художественно-графических умений, навыков конструирования и проектирования;

развивающие - развитие приемов умственной деятельности, формирование и развитие функционального мышления учащихся, развитие познавательных потребностей учащихся, создание условий для приобретения опыта работы учащихся в среде ИКТ;

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

Тип урока: закрепления знаний.

Формы работы: фронтальная, индивидуальная.

Методы работы: частично-поисковый, репродуктивный.

Оборудование урока: ПК, мультимедийный проектор

Требования к результатам усвоения учебного материала.

       Ученики должны знать:- язык программирования PascalАВС

                                                - особенности работы в графическом режиме GraphАВС;

                                                 - стандартные процедуры и функции модуля GraphАВС;

         - графические операторы языка программирования

Ученики должны уметь:

                                 - строить элементарные изображения;

                                   - работать в графическом режиме;

                                   - правильно применять стандартные процедуры и функции модуля GraphАВС;

                                   - применять базовые алгоритмические структуры при программировании

                                  решения задач;

                                 -производить необходимые действия с программой;


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

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

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

Фигуры с заливкой:

Фигуры с заливкой

Треугольник рисуется процедурами:

Line(x1,y1,x2,y2);
LineTo(x,y);

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

Окружность можно нарисовать с помощью процедуры:

  Circle(x,y,r) — рисует окружность с центром в точке (x,y) и радиусом r.

круг в паскале

Дуга окружности

  Arc(x,y,r,a1,a2) — Рисует дугу окружности с центром в точке (x,y) и радиусом r, заключенной между двумя лучами, образующими углы a1 и a2 с осью OX (a1 и a2 – вещественные, задаются в градусах и отсчитываются против часовой стрелки).

Дуга окружности

Задание1: «Лягушка»

задание по теме графика в паскале

Задание2: «Корона»

задание по теме графика в pascal

ФУНКЦИЯ RANDOM ДЛЯ ИСПОЛЬЗОВАНИЯ ОКРАСКИ

  SetPenColor(rgb(random(256), random(256), random(256))); — выбирает случайное число из 256-цветной палитры для красного, зеленого и синего.

Задание 3: Нарисовать горизонтальный ряд окружностей радиусом 10 на расстоянии 100 от верхнего края экрана и с такими горизонтальными координатами 50, 80, 110, 140, … , 290.

* раскрасить круги случайным цветом

Задание 4: «Круги на воде».
Нарисуйте пару десятков концентрических окружностей, то есть окружностей разного радиуса, но имеющих общий центр.

Задание 5:
Воспроизвести изображение при помощи программы:

графика паскаль abc.net

Практическая работа

Пример графической программы, рисующей изображение дома:

Program Domik;

uses Graphabc; //подключение модуля GraphABC

begin

SetWindowWidth(800); //ширина окна программы

SetWindowHeight(600); //высота окна программы

SetPenWidth(3); //толщина пера

SetFontSize(18); //размер шрифта

SetFontColor(clRed); //цвет шрифта

SetFontStyle(fsBold); //жирный стиль шрифта

TextOut(100,100,'Домик'); //текст

Rectangle(200, 300, 600,600); //дом

Circle(400,225, 40); //круг

SetBrushColor(clAqua); //цвет заливки окна

FillRect(300, 400,500,500); //процедура заливки окна

rectangle(300,400,500,500); //окно

Line(400,400,400,500); // окно

Line(300,450,500,450); //окно

Line(200,300,400,150); //крыша

Line(400,150,600,300); //крыша

Line(480,210,480,160); //труба

Line(480,160,520,160); //труба

Line(520,160,520,240); //труба

end.

Рисунок в PascalABC

Рисунок в PascalABC

Программа, рисующая фигурку:

Program Figurka;

uses GraphABC;

begin

SetWindowSize(500, 500); //задаем размер графического окна

SetPenWidth(3); //устанавливаем стиль пера

SetBrushColor(clFuchsia); //устанавливаем цвет кисти

Circle(225,160,50); //рисуем окружность

Line(225,160,225,180); //рисуем линии

Line( 210,190,240,190);

Line( 225,210,225,250);

Line( 100,100,200,260);

Line( 200,260,400,260);

Line( 210,350,200,480);

Line(240,350,250,480);

Rectangle(200,230,250,350); //рисуем прямоугольник SetBrushColor(clLime);

FillRect(0, 480,500,500); //рисуем закрашенный прямоугольник

SetBrushColor(clWhite);

Circle(205,150,10);

Circle(245,150,10);

end.

Рисунок в PascalABC

Задание 1. Определите координаты и составьте программу, выводящую на экран рисунок  дома и дерева.

domok-2

Задание 2. Используя оператор цикла и введя переменную для пересчета координат по оси  x, постройте «поселок», состоящий из 5 домов. Внесите соответствующие дополнения и изменения в предыдущую программу.

 Весь наш «поселок» выстроился вдоль горизонтальной оси экрана — оси X. Построение рисунка начинается с левого верхнего угла стены первого дома — точки с координатами (100, 50). Координата Y не изменяется. Чтобы начать рисовать второй домик, нужно координату X увеличить на 150 (50 точек — ширина первого дома и 100 точек — расстояние между домиками).Рисунок в PascalABC

Выберем в качестве параметра цикла целочисленную переменную X.
Для всех элементов нашего рисунка абсолютное значение координаты X заменим на относительное. Например, для стены дома процедура для рисования запишется следующим образом:

FillRect(x,50,x+50,100);

Сформулируем условие выполнения циклических действий для нашей задачи.

Какие координаты имеет левый верхний угол пятого дома? Конечное значение выбранного нами параметра цикла x = 700. Тогда условие выполнения цикла записывается так: x<=700.

Словесное описание алгоритма коротко можно записать так:

Переменной цикла x присвоить начальное значение 100. Пока x<=700 выполнять серию действий «Нарисуй дом и дерево», после каждого фрагмента рисунка увеличивать значение переменной цикла  на 150.

Самостоятельно составить программу.



Предварительный просмотр:

Урок 3. Анимация в Паскале

Цель: Изучить построение анимации в Паскаль

Образовательные задачи: Познакомить с понятием «Анимация»,

Закрепить знания детей об алгоритме построения анимации.

Учащиеся должны:

  • Понимать: Структуру построения программного кода.
  • Знать: Порядок и алгоритм анимированния объекта.
  • Уметь: Анимировать графические объекты.
  • Исследовать: Возможность сокращения длины алгоритма.

Задачи воспитания : Воспитать трудолюбие, самостоятельность, культуру речи, и общения.

Задачи развития: Развивать мышление, память, речь и другие психические процессы.

Тип урока: Формирование новых знаний и их закрепление.

Оборудование: Компьютеры, интерактивная доска, проектор, презентация.

Методы обучения: Иллюстративно-обьяснительный

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

Как на языке программирования Паскаль АВС создать простейшую анимацию - иллюзию движения?

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

В этом уроке будет показано, как можно создать анимированное изображение с помощью модуля GraphABC.

Пример: Воспроизвести движение круга по горизонтали.

1

2

3

4

5

6

7

8

9

10

11

12

uses GraphABC;

var x:integer;

begin

  x:=40;

        repeat 

                SetPenColor(clWhite);

                Circle(x,100,10);        {Рисуем белую окружность}

                SetPenColor(clBlack);

                Circle(x,100,10);        {Рисуем черную окружность}

                x:=x+1                                {Перемещаемся немного направо}

        until x>600;

end.

Теперь рассмотрим  пример: создать движение нескольких (примитивных) фигур по заданной траектории.

Без чего мы обойтись не сможем, не сможем мы обойтись без нескольких инструментов:

Процедура LockDrawing;

Рисование средствами PascalABC происходит очень медленно. Пока оно идет, картинка на экране успевает много раз обновиться. Отсюда мерцание. То есть, мы видим не окончательную картинку, а процесс ее рисования. Окончательную картинку в общем-то не видим — как только она построилась, мы ее тут же стираем и начинаем новый цикл рисования. Для борьбы с этим эффектом придумали двойную буферизацию. Идея в том, чтобы сначала построить картинку в памяти (не выводя на экран), а затем отобразить новый кадр на экране целиком, без промежуточных вариантов, где не хватает половины лучиков. Для этого в начале программы вызываем процедуру LockDrawing.

Процедура ClearWindow (color);

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

После этого все команды рисования будут создавать картинку в памяти (в так называемом вторичном буфере). Непосредственно на экране ничего рисоваться не будет. После того, как очередной кадр анимации полностью отрисован (то есть перед ClearWindow), нужно вызвать процедуру    Redraw;

Эта процедура вызовет перерисовку всей картины.

Нарисуем сначала четыре окружности.

program animation;

uses GraphABC;

begin

    SetWindowSize(400, 400); //Размер окна

    //Отрисовка четырех окружностей.

    Circle (100, 100, 20);

    Circle (300, 100, 20);

    Circle (100, 300, 20);

    Circle (300, 300, 20);           

end.

Получим результат:

http://grafika.me/files/les_screens/Ismailov_animation_ABC1.JPG

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

program animation;

uses GraphABC;

var i : integer;

begin

    SetWindowSize(400,400);

    LockDrawing;

    //Движение от первой точки до второй

    for i:=100 to 300 do

    begin

        SetBrushColor(clWhite);

        Circle (100, 100, 20);

        Circle (300, 100, 20);

        Circle (100, 300, 20);

        Circle (300, 300, 20);

        SetBrushColor(clBlack);

        Circle (i, 100, 20);

        RedRaw;

        ClearWindow(clWhite);

    end;

    //Движение от второй точки до третьей

    for i:=100 to 300 do

    begin

        SetBrushColor(clWhite);

        Circle (100, 100, 20);

        Circle (300, 100, 20);

        Circle (100, 300, 20);

        Circle (300, 300, 20);

        SetBrushColor(clBlue);

        Circle (300, i, 20);

        RedRaw;

        ClearWindow(clWhite);

    end;

    //Движение от третьей точки до четвертой

    for i:=300 downto 100 do

    begin

        SetBrushColor(clWhite);

        Circle (100, 100, 20);

        Circle (300, 100, 20);

        Circle (100, 300, 20);

        Circle (300, 300, 20);

        SetBrushColor(clRed);

        Circle (i, 300, 20);

        RedRaw;

        ClearWindow(clWhite);

    end;

    //Движение от четвертой точки до первой

    for i:=300 downto 100 do

    begin

        SetBrushColor(clWhite);

        Circle (100, 100, 20);

        Circle (300, 100, 20);

        Circle (100, 300, 20);

        Circle (300, 300, 20);

        SetBrushColor(clGreen);

        Circle (100, i, 20);

        RedRaw;

        ClearWindow(clWhite);   

    end;

end.

Практическая работа

Задание 6: Выполнить анимацию движения квадрата по следующей траектории:

https://labs-org.ru/wp-content/uploads/1-14.png

Задача №7 Создать проезжающий грузовик


По теме: методические разработки, презентации и конспекты

Презентация "Эффекты анимации"

Презентацию можно использовать для демонстрации эффектов анимации, используемых в MS Power Point....

Эффекты анимации

Описывает технологию создания анимации в программе Macromedia Flash...

Основы языка программирования .Паскаль

Разработка урока предусматривающая работу в Паскале...

Введение в Паскаль

Материал предназначен для студентов 1 курса....

План урока по учебному предмету «Основы анимации» ИСПОЛЬЗОВАНИЕ ТЕХНОЛОГИИ БЕСПРОВОДНОЙ СВЯЗИ НА УРОКАХ АНИМАЦИИ

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

Графика и анимация в Паскаль АВС

Данная разработка предназначена для учащихся 7-9 классов, изучающих программирование на языке Паскаль.Уроки позволят освоить элементы графики и анимации в ПаскальАВС. Процесс создания графики вызывает...

Памятка Треугольник Паскаля

Материал для проведения расчетов по математике на тему Треугольник Паскаля...