Проект, который развивался в течении двух лет, был первоначально предназначен школьникам, готовящимся к сдаче ЕГЭ по стереометрии, и их преподавателям. Недостаток пространственного воображения, и недостаточный навык в обычной начертательной геометрии в её трёхмерном виде, создаёт трудности в решении подобных задач.
В дальнейшем проект успешно развивался, вобрал в себя широкие возможности плоской векторной графики, включил в себя отдельным и хорошо отработанным блоком средства анимации, то есть, средства создания и прокрутки мультипликационного фильма, и наконец, в проект было добавлено рисование кистями, после чего программа приобрела свойства развитого художественного редактора, превосходящего по ряду своих опций, программу Фотошоп, Крита и аналогичные им.
Многие технические решения уникальны, и по своей реализации, и по получаемым результатам. И в этом нет ничего удивительного. Прикладным программированием я занимаюсь с 1970-го года. Это моё хобби.
ПЕРВОНАЧАЛЬНОЕ НАЗНАЧЕНИЕ ПРОГРАММЫ
Вот задача, решение которой помогает понять стереометрический чертёж, представленный на иллюстрации -
Задание 12 Дана прямая 4-х угольная призма
ABCDA1B1C1D1, основаниями которой являются
равнобедренные трапеции ABCD и A1B1C1D1 с
основаниями AD и BC и A1D1 и B1C1
соответственно. Известно, что AA1=AD и
BC=2AA1, а диагонали каждого основания
взаимно перпендикулярны.
а) Найдите сечение пирамиды плоскостью MDN,
где M – середина ребра AA1, N – середина
ребра CC1 (то есть определите вид сечения
и отношения, в которых вершины сечения
делят ребра призмы).
Строки этого задания находятся в текстовом файле формата txt, и в этом же файле следом, идут строки, описывающие средствами векторной графики поясняющий чертёж –
X просмотр_ 1-точка 2-отрезок 3-прямая 4-плоскость 5,6-сечение N_строк= 28
_____ x= 50 y= 450 u= 30 k= 40
1> 1 2000 0 2000 0 0 0 0 0 0 276 5 1
2> 1 0 0 2000 0 0 0 0 0 321 276 5 2
3> 2 0 0 2000 2000 0 2000 0 0 0 276 5 3
…
Всего таких строк 28. Начинаются строки с логотипа векторной фигуры, 1 это логотип точки, а 2 – логотип отрезка. Далее идут координаты – X,Y,Z равные 200,0,200 для первой точки и 0,0,200 для второй.
Как видите, координаты задаются целыми числами, но число пикселей для них увеличено в 10 раз, таким образом достигается достаточная точность при построении, передвижении и при других операциях с векторными фигурами.
Каждая фигура имеет свой уникальный номер, он указан в конце строки.
Условная толщина в пикселях – 5. На иллюстрации мы видим, что при этой условной толщине точки оказываются шире отрезков.
Все отрезки и точки имеют одинаковый коричневый цвет – 276. Эта цифра также условна, она составлена из верхних четырёх бит каждой компоненты цвета, а реальный цвет, который присутствует на чертеже, получен прибавлением номера графического элемента. Для этого предназначены младшие 3 бита цветовых компонент.
Таким способом векторные элементы легко идентифицируются по цвету - достаточно кликнуть по точке или по отрезку, и программа сразу же разберётся, с каким конкретным элементом она имеет дело.
Используя инструменты, имеющиеся в меню, пользователь может строить стереометрические чертежи, достраивать их, делая по ходу решения задачи соответствующие геометрические построения, и даже численно проверять правильность решения. Готовое решение с его описанием также может находиться в отдельном текстовом файле.
Предусмотрена демонстрация сделанного стереометрического построения,
С вращением вокруг вертикальной оси или поворотом вокруг горизонтальной, то есть, в различных ракурсах. Имеется возможность буквенно-цифровых обозначений для концов отрезков и для точек.
Целочисленное представление векторной графики и идентификация элементов по цвету сильно облегчают и делают более понятной работу с программой, как со стороны пользователя, так и со стороны программиста, развивающего это направление.
СОЗДАНИЕ ХУДОЖЕСТВЕННЫХ МОДЕЛЕЙ
Отличные демонстрационные возможности программы, натолкнули на мысль использовать её для сложных пространственных построений – с её помощью можно показывать, как устроена стопа, или как сгибается и разгибается локтевой сустав, помогая тем самым ученикам, изучающим анатомию на предмет рисования.
Программа позволяет создавать модель, составленную из 511 графических элементов, и этого числа вполне достаточно даже для очень сложных построений. На иллюстрации вы видите изображение черепа в момент его демонстрации, модель вращается вокруг вертикальной оси Z и одновременно меняет свой размер – для этого, с помощью мыши мы двигаем кружочек-маркер. Обратите внимание на воздушную перспективу, она создаётся автоматически – более удалённые графические элементы имеют более бледную окраску.
Клип о том, как модель двигается и поворачивается, можно посмотреть тут - https://youtu.be/8g0TAn7isOc
ПЛОСКАЯ ВЕКТОРНАЯ ГРАФИКА
Удачное сочетание целочисленного формата векторной графики с идентификацией элементов по цвету позволяет элементам двухмерной, плоской графики придать свойства более удобные для ее создания и редактирования.
Подключение двухмерной графики к имеющейся структуре оказалось на удивление простым, и не требующим каких-либо кардинальных решений.
Точки или отрезки можно просто использовать, как таковые, окружность легко делается модификацией точки, а наиболее интересный и употребляемый элемент – Ломаная линия или, как её ещё называют, «полилиния», вводится весьма просто – для неё делается своё обозначение, а именно – логотип с номером 9. Вот так выглядит строка с этим логотипом, описывающая Ломаную линию –
1> 9 2990 0 2381 1 14 17 19 2 831 24 3 1 #33
Вслед за логотипом 9 тут идут координаты X=299 Y=0 и Z=238.1
Координаты эти указывают на точку заливки. Цвет заливки 831, тип заливки указан левее - 2 означает вертикальную штриховку.
Координата Y=0 никакого влияния на изображение не оказывает, однако располагая элементы по этой координате в порядке её возрастания, можно затем, выбрав соответствующий пункт в меню, поменять порядок следования элементов в массиве, описывающим графику, изменив тем самым и очерёдность их появления на рисунке. В векторной графике, элементы рисуются в порядке их описания, то есть более поздние будут перекрывать те, которые были выведены ранее.
Изменяя Y, этот порядок затем можно поменять. И это удобно.
Таким образом, координата Y вовсе не оказывается ненужным в плоской графике рудиментом, а прекрасно в ней используется.
Следом за координатами идут ссылки 1 14 17 и 19. Это ссылки на абрисы Ломаной линии. В отличие от своего классического варианта - полилинии, Ломаная в этой программе имеет не один контур, а может иметь и четыре, независимых друг от друга контура, а вот заливаться цветом они будут по факту – сначала они рисуются, а потом, начиная от указанной в начале строки точки заливки, нарисованная комбинация заливается цветом.
Ранее нарисованные графические элементы этому нисколько не мешают – при прорисовке абрисов и в процессе заливки используются четвёртые биты компонент цвета, которые, как вы могли заметить, до сих пор оставались неиспользованными. И в самом деле, каждая цветовая компонента состоит из двух байт, это 8 бит. Старшие четыре бита определяют цвет, младшие 3 отданы под уникальный номер, а вот четвёртые биты для абрисов ломаной линии используются так – 000 во всех трёх компонентах обозначает первый абрис, 010 – второй, 100 – третий, 110 – четвёртый, а код 001 – имеет цвет заливки. Не забывайте также, что младшие биты несут информацию о номере графического элемента.
Поэтому, если мы кликнем по любой детали графического изображения, то программа сразу определит его номер, номер абриса, или поймёт, что мы кликнули по заливке. Имея такую подробную информацию очень удобно строить дальнейшие действия программы.
Итак, понятно, что каждая ломаная линия может иметь четыре абриса. Удобно это или неудобно? Конечно, удобно. Теперь мы можем изобразить лицо не только его внешним контуром, но и добавить в него незамкнутые линии, изображающие брови и нос, так, как вы можете это видеть на изображении, представленном на иллюстрации.
Для описания всех четырёх элементов с их заливкой потребовалась всего одна строка. Абрисы могут иметь очень много точек, иногда счёт идёт на сотни, но чаще всего пары десятков точек вполне хватает.
Для хранения точек абрисов используется специальный массив. По второму индексу 12 позиций, по первому 20000. Такая форма выбрана, чтобы и этот массив можно было бы просматривать так же, как и строки векторной графики.
В каждой строке массива абрисов помещаются X,Y координаты шести точек. Они тоже представлены в целочисленной форме с умножением на 10.
При выводе во внешний файл строки массива абрисов помещаются сразу за строками, описывающими векторную графику. Напрмер, так –
X просмотр_1-точ 2-отр 3-прям 4-плоск 5,6-сеч 7,8-лин 9-лом N_строк= 1
_____ x= 100 y= 400 u= 30 k= 40
1> 9 1320 0 3230 1 0 0 0 3 19295 0 1 1
абрисы 1 шт.
> 1k 0 809 3811 674 3803 675 3795 679 3789 679 3787 685
3789 694 3787 701 3786 709 3785 716 3785 720 3782 729
3782 737 3781 741 3779 748 3779 754 3778 762 3778 769
3777 775 3775 782 3774 791 3773 798 3771 806 3771 811
…
3903 621 3898 623 3890 627 3885 630 3875 636 3867 641
3860 646 3852 649 3844 654 3836 659 3830 662 3823 665
======== END
Здесь точками изображена та самая рука, которую вы видите на иллюстрации. Ломаная имеет единственный абрис, и в нём 809 точек.
Такие сложные контуры не обязательно рисовать вручную, их можно получать путём обводки силуэтных изображений http://proza.ru/2022/11/18/1008
Векторная графика руки и бабочки была создана именно таким способом.
Элементы векторной графики, представленные Ломаными линиями, могут передвигаться и редактироваться как индивидуально, так и в составе групп. Для элемента, включённого в группу, в последней позиции строки показывается номер группы, предваряемый значком #. Редактирование и перемещения могут осуществляться как вольным движением стилуса, так и дозированно, то есть небольшими шагами и постепенно, такие перемещения нацелены на создание анимации.
ОСОБЫЕ ПОДПРОГРАММЫ - СТОКИ
Ломаная линия оказалась не только эффективной сама по себе, эта форма оказалась ещё и универсальной. Дело в том, что координаты точек, содержащиеся в массиве абрисов, можно использовать не по их обычному назначению, то есть, соединяя точки между собой прямыми линиями. Их можно использовать и как-то иначе.
Чтобы использовать абрисы по иному, пишется небольшая подпрограмма. Подпрограмма читает координаты и создаёт такое изображение, какое программист предусмотрел. Это могут быть глаза, рот или волосы персонажа, нарисованные не прямой линией, а в виде ёлочки. На иллюстрации видно, что даже вязаная кофта может быть сделана таким способом.
Подобные подпрограммки, создающие специальные изображения, я назвал «Стоками». Кривые Безье или составленные из них фигуры тоже могут быть сделаны в форме стоков. Если программист проявит фантазию, то сток может изобразить что угодно. Кликая по глазам, можно закрывать и раскрывать их, двигая одну единственную точку можно сделать рот широко раскрытым, или сомкнуть губы вместе. Такие, заранее запрограммированные изменения, очень удобны, особенно при создании анимации.
ВОЗМОЖНОСТИ АНИМАЦИИ
Небольшая панель, оформленная как PictureBox, выполняет все функции для записи и чтения кадров небольшого мультипликационного фильма. Имеется возможность пошагового просмотра или прокрутки выбранного фрагмента.
Принцип и структура управления процессом анимации были почти без переделок взяты из предыдущей программы http://proza.ru/2020/05/19/1989
Кадры, используемые в мультипликации, находятся в формате bmp на жёстком диске. Обычно рекомендуют так не делать, поскольку покадровое чтение с жёсткого диска происходит не очень быстро. Однако эти рекомендации были даны давно, а нынче мой ноутбук, не самый новый, а подержанный, позволяет читать и воспроизводить картинки размером 1200х620 пикселей со скоростью 18 раз в секунду, и этого для качественной мультипликации вполне хватает.
РИСОВАНИЕ КИСТЯМИ
В программу был полностью включён весь набор кистей предыдущей программы. Всего таких кистей 7. Каждая кисть по-своему уникальна и позволяет не просто создавать изображения, но и делать это, оставляя на рисунке характерные следы, создавая впечатление акварельной, масляной или пастельной живописи.
Тут нужно опять сказать о быстродействии современных компьютеров. В прошлом веке, когда редакторы для художественного рисования ещё только создавались, быстродействие вывода на экран пятна от кисти составляло проблему. Если рисовать каждый пиксель пятна отдельно, учитывая его цвет и имитируя прозрачность, и делать это часто, при каждом продвижении мыши хотя бы на один пиксель, тогда, при быстрых движениях мыши и больших размерах пятна программа начинает зависать – след кисти появляется не сразу, а с запозданием, а иногда в следе кисти появляются и пропуски.
Чтобы такого не было, кисти старались делать наподобие штампа – на экран в форме пятна от кисти переносится целая область некого массива, находящаяся в оперативной памяти. Это делается не то, что сразу, но значительно быстрее, и поэтому общий процесс рисования тоже протекает быстрее.
Опять же скажу, так было в прошлом веке, а нынче по-пиксельнй вывод пятна радиусом 20 пикселей никаких проблем не составляет. В связи с этим, основой для кистей я взял не штамп, а пиксельный круг.
ПИКСЕЛЬНЫЙ КРУГ
Что это такое?
Пиксельный круг, это список пикселей, составляющих пятно кисти наибольшего диаметра. Список составляется заранее, во время загрузки программы. В списке указаны X и Y координаты пикселей, и расстояние их до центра пятна. Список упорядочен, пиксели следуют в нём по спирали – против часовой стрелки и в порядке возрастания расстояния от центра.
Шаг спирали составляет 1/2 пикселя, при таком шаге пиксели не пропускаются, а очередные пиксели оказываются территориально близкими друг к другу.
Одновременно создаётся небольшой массив, в котором по индексу – радиусу, можно найти последний пиксель, входящий в круг этого радиуса. Имеется также отдельный массив длинных чисел, для хранения цвета пикселей. Этот массив тоже используется в некоторых кистях.
Использование пиксельного круга оказалось новой и весьма плодотворной идеей, показавшей неожиданные результаты. Например, оказалось возможным получить очень живую, перетекающую по пискселям акварель, совершенно простым способом, не прибегая к техническим усложнениям.
КИСТИ ПРОГРАММЫ «Стереометрия и Анимация»
Кроме кистей, в программе есть обычное рисование линией и веером, но конечно, рисование кистями составляет её изюминку.
Кисть, не имеющая номера, зато имеющая много дополнительных опций, обозначена как кисть «А» - акварельная кисть.
Основа этой кисти пиксельный круг, в зависимости от выставленной опции «стиль рисования» краска стекает по пятну на правую или на левую сторону следа. Противоположная же сторона следа приобретает свойство размывать ранее положенный на рисунок цвет. То есть, работа этой кистью вполне соответствует работе с естественной акварелью, в которой и краска образует кант по краю пятна, и вода размывает изображение, ранее бывшее на бумаге.
Эффект же такой достигается необычайно простыми средствами – после окрашивания очередного пикселя с учетом выставленной прозрачности, дополнительно красятся в тот же цвет один или два предыдущих пикселя, и кто скажет, что именно такого эффекта и следовало при этом ожидать?
Такой прекрасный эффект, делающий акварель стекающей, реализован и в других кистях. В кисти №2 направление стекания краски задаётся вектором, который устанавливается кликом по специальной выдвижной панели. В соответствии с этим вектором, дополнительно окрашивается один из пикселей, находящийся на квадрате 5х5, то есть, не смежный центральному, а через один от него. Эта окраска сразу приводит к столь заметному стеканию, что его приходится делать не столь очевидным.
Для этого вводится параметр, называемый «консолидация стекания», если консолидация равна единице, то акварель течёт только по избранному направлению, если меньше единицы – тогда направление стекания разыгрывается в неком секторе при каждой подвижке стилуса. Такой алгоритм приносит хорошие результаты и позволяет настроить кисть так, как этого хочется.
В кистях, использующих эффект стекания, возникает и другой нюанс – при размывании контрастной границы, или когда в качестве краски используется чрезмерно тёмный тон, например, чёрный цвет, от канта отрываются кусочки пигмента и плавают в пятне, создавая неуничтожаемую зернистость.
Результат, в общем-то неплохой, поскольку точно также себя ведут плохо растёртые акварельные краски, но иногда хотелось бы получать и чистые акварельные переходы, с размытием красок без замечаемой характерной зернистости.
Подавить зернистость помогает следующий приём – прежде чем окрашивать дополнительный пиксель, мы читаем его цвет, и примешиваем его к тому цвету, в который мы собираемся пиксель красить. Подходящий коэффициент примешивания был найден опытным путём, и он оказался небольшим – A^0.3
Здесь A, это коэффициент примешивания цвета, выставленный с помощью кнопки Плотность.
Говоря об опциях рисования акварелью, следует отметить, что это самое «примешивание цвета» может быть осуществлено двумя путями – обычным и лессировкой. До сих пор мы имели в виду обычный способ примешивания. В программе он реализуется формулой –
C = ccRGB(C1, C2, A) здесь первый цвет примешивается ко второму – берётся доля А от каждой из компонент первого цвета, и складывается с долей (1-А) от второго цвета. В принципе, именно такой закон смешения справедлив для непрозрачных красок. Но в акварели, да и в масляной живописи тоже, применяются и прозрачные краски, такие, например, как ультрамарин, краплак, изумрудно-зелёная. Хотя, вот кадмии, они непрозрачны.
Прозрачные краски обычно сильно разбавляют белилами, или добавляют их в смесь постепенно, в совсем небольшом количестве. Закон смешения цветов в таком процессе совершенно другой – компоненты цвета нормируются на единицу, а затем помножаются друг на друга. Коэффициент А для этого оказывается совершенно не нужен. Тем не менее, сделано так, чтобы кнопка Плотность всё же регулировала этот процесс – она осветляет выбранный цвет, возводя его нормированные компоненты в соответствующую степень.
Коэффициент степени берётся таким –
D = 1/(R*(10-CV)) где R – радиус пятна, а CV – цифра, стоящая на кнопке Плотность.
Именно так были получены насыщенные по цвету следы кисти №2, которые вы видите на иллюстрации.
Кисть №1 образует кант, не используя пиксельного круга. Под пятно рисования, имеющее большой размер, подкладывается со смещением в ту или другую сторону от следа, более тёмное (или, как опция, более светлое пятно) немного большего размера, а пред этим – ещё большее и более насыщенное по цвету. Так и образуется кант.
Есть и другая опция – рисование кистью без канта, с мягкими или жёсткими краями, с обычным или лессировочным смешением цвета, а также создание зернистого следа (делаются пропуски пикселей при рисовании). В этой опции пиксельный круг используется. В этой же опции есть также возможность рисовать прозрачные капли или ледяные сосульки.
О рисовании кистью №1 опубликована отдельная статья - http://proza.ru/2023/03/15/678
Кисть №3 – Пастель с растушёвкой, также описана в отдельной статье - http://proza.ru/2023/02/27/1049
Кисть интересная, в ней пиксели кисти напитываются цветом от рисунка в тот момент, когда стилус опускается на планшет. А потом можно развозить этот цвет, распространяя его и смешивая, на соседние места рисунка. Точь с точь, как это делает палец, растушёвывая по бумаге настоящую пастель.
Напитывание пикселей цветом, редкое и случайное, применено для рисования волос в кисти №5. Эта же кисть может быть использована и как штамп, для штампования в выбираемых местах рисунка изображений мелких предметов, снежинок и проч.
Кисть №6 тоже использует напитывание цветом. Только напитываются цветом не пиксели круга, а пиксели полоски. Полоска эта при движении стилуса ориентируется перпендикулярно направлению движения и оставляет след, подобный следу мастихина.
Кисть имеет два режима работы – «Пуантелизм» и «Мастихин». В режиме Пуантелизм полоска напитывается заданным цветом, а в режиме Мастихин, она может захватывать цвет с рисунка и след кисти тогда получается с продольными полосками. Цвета пикселей Мастихина смешиваются с цветами рисунка, то есть всё получается так же, как если бы вы работали настоящим мастихином в масляной живописи.
Опции кисти №6 позволяют пикселям оставлять на рисунке не только точки, но и небольшие кружочки, или штрихи регулируемого размера и выбранного направления, в том числе вдоль или поперёк следа. Эти опции позволяют создавать фантастические графические композиции.
Такая фантастика, совокупно с лессировочным смешением цветов, очень впечатляет. Вы можете убедиться в этом, посмотрев на иллюстрацию.
Все кисти кроме Мастихина позволяют создавать расширяющийся след, иногда расширение следа сопровождается увеличением прозрачности кисти. Такое поведение кисти позволят делать тонкие цветовые переходы.
Кисть №4 «Змейка» не требует для расширения специальной опции, она с самого начала была задумана, как кисть с расширяющимся следом. Но, в отличии от других кистей, её след не только расширяется, но и сужается к своему окончанию. Змейкой можно рисовать и длинные тонкие веточки, и продолговатые остренькие листочки. Змейка так устроена, что толстеет не сразу, а с запозданием, и толстеет не на конце, а посередине.
Змейкой можно рисовать не только футуристических змей, она очень удобна и для обычного рисования. Клип на тему рисования Змейкой можно посмотреть вот тут - https://youtu.be/6KMZwV8zN1o
Помимо названных кистей, в режиме рисования имеется ряд полезных опций. Имеется, например, тонирующая кисть, делающая из чёрно-белых фотографий цветные. О ней, и о её применениях рассказывается тут http://proza.ru/2023/02/02/143 http://proza.ru/2023/02/04/1046
Имеется копирование кругами, помогающее, например, оживлять картинку, делая из неё гиф-иллюстрацию https://youtu.be/s_i_sr4D2xw Копирование кругами, как раз и использует тот приём, о котором я уже говорил – изображение переносится не по-пиксельно, а методом PaintPicture, сразу большими областями.
Имеется копирование методом Лассо, с предварительным выделением обводкой переносимой и поворачиваемой области. В методе Лассо для маркировки тех пикселей, которые нужно переносить, используется заливка, устанавливающая в единицу первые биты цвета. И копирование кругами, и метод Лассо, также нацелены на создание анимации. Имеется буфер чтения-записи, тоже используемый для анимации.
Пусть читатель меня простит за некоторые подробности чисто технического свойства, но они очень важны, поскольку именно технические особенности устройства кистей, позволили достичь художественных выразительных эффектов и их разнообразия. Продуманная концепция проекта в целом, позволяет программе «Стереометрия и Аннимация» быть до некоторой степени универсальным продуктом, который может быть успешно использован для разных целей.
Некоторых возможностей программа не имеет. Например, верстать картинки или делать надписи разным шрифтом. Но такие возможности есть в обычной программе Paint. Передавать рисунки из одной программы в другую, используя буфер памяти Виндос, или файлы формата bmp, никакого труда не составляет.
Скачать программу «Стереометрия и Анимация» можно здесь - https://disk.yandex.ru/d/pT6LoBWUGOBfiw
а в этой папке находятся её исходники - https://disk.yandex.ru/d/HfTVVsHw-0jQlQ
Программа сделана в среде Визуал Бейсик 6 и работает на компьютерах с установленной системой Виндос.
__________
20.03.2023