Машинная графика в школе на свободных библиотеках (Артем Проскурнев, OSEDUCONF-2021)

Короткая ссылка: 20210616I

Докладчик: Артём Проскурнёв

Школьники любят тему «Графика» на уроках информатики. Какую выбрать современную, свободную и кроссплатформенную графическую библиотеку, чтобы можно было начать с графических примитивов и научиться понимать, как работает машинная графика? Проблема всех современных библиотек заключается в написании большого количества громоздкого кода, чтобы всего лишь получить изображение простого отрезка на экране. Но теперь есть решение, которое позволяет рисовать простыми и понятными командами, вроде «Line», «PutPixel» и тому подобными. А главное для школы то, что исполняется такой код шаг за шагом, как и учит определение алгоритма из учебников информатики.
Учебный проект для школ «qtSimpleGraph» представляет собой класс для отрисовки с помощью библиотеки Qt графических примитивов таких как точки, линии, прямоугольники и окружности. При подключении к программе данного класса появляется возможность отображения графических примитивов в окне приложения простыми и интуитивными командами вроде Line, SetColor, PutPixel и т.~д. Это позволяет сильно снизить порог вхождения школьников в машинную графику и охватить не только профильные классы. При реализации проекта использовалась идея линейной работы с холстом, которая реализована с помощью объекта QPixmap, куда пошагово отрисовывается всё, что задаёт учащийся в программе, и «отпечатывается» на объект QPainter, что создаёт ощущение линейности выполнения. Проект активно используется на уроках и продолжает разрабатываться.

Видео

on youtube

Презентация

Thesis

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

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

Например, необходимо выполнить линейный алгоритм:

поставить точку
нажать клавишу
поставить точку
нажать клавишу
поставить точку

Школьник ожидает увидеть три точки после выполнения данного алгоритма.

Именно такая работа возможна с графикой в встроенных библиотеках на языках для обучения PascalABC и Кумир. Так же это реализовано и на блочном языке Scratch. Для тех школьников, которые изучают C++ или Python, такого решения не нашлось. Ставится задача найти такую современную, кроссплатформенную и обязательно свободную графическую библиотеку, которая будет работать, как предполагает концепция школьного преподавания программирования для языков C++ и Python.

К сожалению, очень хорошее решение от автора учебника Полякова Константина Юрьевича по Python не решает основного вопроса с отрисовкой без специальной функции обновления холста. На сайте не указывается лицензия, поэтому нельзя предполагать, что эта библиотека является свободной. Каждый графический элемент является отдельным объектом, и если рисовать график функции точками, то будет создано огромное количество объектов-точек. По этим причинам библиотека не решает поставленную задачу. Так же, первично желателен язык C++.

Идея вернуться к библиотекам времён DOS вроде Borland BGI Graphics emulation, возможно, имела бы право на жизнь, если бы все такие разработки не устарели до полной безнадёжности. Ну и, конечно, это For Windows Applications...

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

На текущий момент, на уроках информатики используется новая, созданная в начале 2021 года, библиотека qtSimpleGraph основанная на Qt5. Данная библиотека выпускается под свободной лицензией, под языки C++ и Python и эмулирует концепцию линейного рисования объектов в окне. Решение позволяет изучать машинную графику от самых основ. Первый графический примитив — точка позволяет показать как именно компьютер рисует все элементы на экране, «зажигая» конкретные пиксели конкретным цветом. Позволяет самостоятельно создать графический примитив «Линия» с использованием общего уравнения прямой и координат точек концов отрезка. Наглядно изучить определение окружности и многое другое.

В качестве лабораторных работ могут выступать простые игры типа «Змейка», «Танки», которые уже можно реализовать с использованием проекта qtSimpleGraph. Школьники с энтузиазмом изучают библиотеку и используют её для проектов по другим школьным предметам, чтобы визуализировать объекты исследования и процессы. Основы «движения» нарисованных объектов — стирание и перерисовка в новом месте очень важна для понимания детьми принципов работы компьютера. Ручные рассчёты, рисование и движение трёхмерных объектов, таких как тетраэдр или параллелепипед позволяют лучше понимать смежные предметы, такие как геометрию и тригонометрию.

В планах — создание методического пособия по проведению уроков на тему машинной графики от самых основ с использованием языков C++ и Python.

В связи с изучением в школах темы «Машинная графика» появилась необходимость в графической библиотеке для языка C++. Для языка обучения вроде PascalABC или подобных встроенные возможности позволяют работать с графическими примитивами, но для языка C++ подходящее решение найти не удалось.

Задачи перед проектом поставлены следующие:

Языки C++ и Python;
GPL;
Последовательное мгновенное выполнение инструкций;
Названия функций просто описывают действие (Line, SetColor, PutPixel и т.д.)

Небольшое исследование различных решений для C++ приведено в докладе «Машинная графика в школе на свободных библиотеках» и последовательно были забракованы модуль graph Полякова К.Ю. , WinBGIm и Xcbwin .

Для реализации проекта выбрана библиотека Qt, как популярная, развивающаяся и хорошо документированная. СПО qtCreator позволяет создавать проекты сразу и для C++ и для Python. Основа проекта — QPainter.

Реализован класс QTSGraph в который включены графические примитивы и обработка событий мыши и клавиатуры. Для реализации четвёртой задачи по простым названиям функций, стандартное событие paintEvent вызывает событие PaintBox, которое вынесено в файл main.cpp с основным кодом и основной функцией main. Весь основной код работы с графикой пишется в реализации метода QTSGraph::PaintBox, что позволяет вызвать функции отрисовки примитивов просто по имени и использовать всю структуру класса буквально изнутри. Получается, что проект не является независимой библиотекой, но для удобства работы, исследования внутренней структуры и постепенного перехода к прямой работе с современной концепцией работы с графикой, проект намеренно развивается именно в этом направлении.

Минимальная программа с рисунком main.cpp выглядит так:

include "qtsgraph.h"

int main(int argc, char *argv[]) {

   QApplication a(argc, argv);
   QTSGraph w(601, 601);
   w.show();
   return a.exec();

} void QTSGraph::PaintBox() {

   SetColor(clRed);
   Circle(300, 300, 300);

} </source> Результатом будет квадратное окно размером 601 на 601 пикселей в центре экрана с вписанной в него красной окружностью.

Для решения третьей задачи последовательного мгновенного выполнения инструкций без «заморозки» окна во время, например, паузы используется способ «прокрутить» ждущие события, пока окно рисования «стоит на паузе»:

QCoreApplication::processEvents(QEventLoop::AllEvents, 50);

Это позволяет создать такие функции как «пауза», «ждать клика мыши», «ждать нажатия клавиши» и т. п. Так же это влечёт некоторые проблемы с закрытием программы. Например, если просто закрыть окно приложения во время выполнения цикла с условием выхода, например, while(KeyPressed()), то процесс не завершается, поэтому была добавлена команда exit(0) в событие QTSGraph::closeEvent.

Сама же отрисовка производится на объект QPixmap Canvas, который просто «отпечатывается» потом на холст окна: <source lang="cpp">

   QPainter p(this);
   p.drawPixmap(0, 0, Canvas);

</source>

Это позволяет не терять нарисованное ранее, а либо продолжать рисовать, либо рисовать поверх уже имеющегося.

Документация проекта в Wiki содержится на GitHub. Созданы разделы по всем графическим примитивам, которые программа умеет отображать. Проект продолжает разрабатываться и активно использоваться на уроках информатики в школе. Приветствуется помощь и участие в разработке.

Примечания и ссылки

Поляков К.Ю., Модуль graph для создания простых графических программ на языке Python, , https://kpolyakov.spb.ru/school/pycppbook/refs.htm
Михалкович С. С., Бондарев И., Погорелов А., Система программирования PascalABC.NET, http://pascalabc.net/stati-po-pascalabc-net/obuchenie-programmirovaniyu/16-grafika-
Michael Main, Borland BGI Graphics and Mouse, https://home.cs.colorado.edu/~main/cs1300/doc/bgi/bgi.html
jofalk, Xcbwin — a simple C++ class for graphical outputs using XCB, https://github.com/jofalk/Xcbwin temaps,
Xcbwin — a simple C++ class for graphical outputs using XCB, https://github.com/temaps/Xcbwin
Проскурнев А.С., Библиотека для работы с графическими примитивами в qtCreator, 2021, https://github.com/temaps/qtSimpleGraph
Qt Group, Qt Creator, https://www.qt.io/download-qt-installer
Проскурнев А. С., Документация проекта qtSimpleGraph, https://github.com/temaps/qtSimpleGraph/wiki

Plays:0 Comments:0