Загрузка...Приветствую всех читателей блога matrixblog.ru. В сегодняшней статье я рассмотрю такой инструмент для рисования, как спирограф.
Если говорить по-простому, то спирограф представляет из себя своеобразную детскую игрушку для рисования различных узоров. Сами узоры, создаваемые данным приспособлением, имеют не привлекательные названия – гипотрохоиды, эпитрохоида и так далее. Сами узоры получаются путём движения маленького круга по внутренней окружности большого круга. Имеется даже формула, которая позволяет рассчитать параметры создаваемого рисунка.
С математической точки зрения, создаваемый узор определяется несколькими параметрами:
- Радиус большого круга
- Радиус маленького круга
- Длина прямой линии, которая выходит из центра маленькой окружности
- Угол поворота
- Количество оборотов
Я не буду вникать в тонкости математики, поскольку всё это скучно рядовому читателю, и не влияет на суть описываемой темы.
Дело в том, что существует много программных решений для создания узоров и картинок по принципу спирографа. Я решил тоже сделать графический редактор под названием Flower, который позволял рисовать различные фигуры, как это происходит в детской игрушке. Количество фигур было фиксированным и их параметры были заранее прописаны в программном коде.
Спустя некоторое время, я решил добавить больше функций в редактор, с возможностью создавать собственные фигуры и на их основе рисовать.
Программный спирограф для детей своими руками – первые трудности
Панель для создания узоров в редакторе Spiro
Как было сказано выше, создаваемые узоры регулируются несколькими параметрами. Вначале я сделал панель управления для регулирования радиуса маленького и большого круга, длины линии и количества оборотов. Угол поворота является минимальным и фиксированным (0.1 радиан).
Должен сказать, что программный аналог спирографа своими руками я создавал на языке программирования JavaScript, во многом мне помогла библиотека JQuery. Это позволило довольно легко прописать программный код для панели управления и области просмотра.
Далее я сделал дополнительную панель управления для уже созданных узоров, которая позволяла менять цвет, размер фигуры и ряд других параметров, она похожа на ту, что я использовал в графическом редакторе Flower, описание которого есть в статье "Flower – цветочный генератор фона".
Если с процессом рисования особых трудностей не возникало (мелкие ошибки я опишу далее), то при генерации узоров (картинок) с помощью созданного спирографа для рисования, возникли некоторые трудности. И проблема не столько в программном коде, сколько в создаваемых узорах.
Используя ползунки, можно создавать довольно красивые картинки и узоры, которые будут радовать глаз и внутреннее чувство спокойствия. Конечно в области просмотра создаваемые узоры не столь красочные, как при рисовании ими, но не суть, ведь пользователю важно получить каркас рисунка, а уже как он его разукрасит при рисовании в графическом редакторе – вопрос фантазии.
Одна и та же кисть (фигура) с различными настройками в Spiro
В правой панели управления находится область с кнопками, фон которых показывает узор фигуры. При создании узоров, с помощью панели программного спирографа для рисования (слева), можно добавить понравившийся рисунок в правую панель в палитру фигур. Тут всё довольно просто.
Для удобства, я добавил кнопку для генерации случайного узора. Для нетерпеливых, я решил сделать кнопку, при нажатии на которую, можно сразу генерировать узоры и заполнить панель с фигурками. К сожалению, я не придумал, как прописать генератор фигур таким образом, что бы все узоры были максимально разнообразными. Созданный детский спирограф для рисования при автоматическом генерировании 20 фигур, не особо умный, и часто попадаются слишком похожие узоры, но они похожие лишь при выборе маленького размера кисти, при большом размере, похожесть не так заметна.
Графический спирограф для рисования – основные возможности редактора
использование различных стилей кистей при рисовании в Spiro
Созданный программный спирограф для рисования своими руками, как было сказано выше, позволяет не только генерировать узоры, но и является полноценным графическим редактором с возможностью выбора кистей и настройкой стилей рисования.
Spiro – графический редактор для рисования. Возможно, не самое оригинально название, но мне главное, что бы данный онлайн инструмент был полезен. Сам редактор я описал более детально в этой статье, а тут лишь затрону основные его возможности.
Выбранная фигура является одновременно и кистью, которую можно использовать для рисования. Выбирая тот или иной стиль кисти, можно или просто добавлять один узор на область рисования, щелкнув мышкой, или рисовать.
автоматически созданный фон
ещё один тип фона, созданный в редакторе Spiro
Используя данный онлайн спирограф для рисования, можно генерировать различный фон, который будет состоять с фигурок различного или одинакового размера. Кроме всего прочего, можно генерировать и рисовать не только выбранной фигуркой, но и всеми сразу, поставив галочку возле пункта случайная фигура.
В целом, я постарался сделать всё интуитивно понятным, надеюсь, данный графический онлайн редактор найдёт свою аудиторию.
Спасибо за внимание. Автор блога Владимир Баталий
