Приветствую всех читателей блога scriptcoding.ru. Человеческая натура всегда требует творческой пищи, отсюда и большое множество графических редакторов, генераторов фона и онлайн рисовалок для детей и взрослых.
Оттачивая своё мастерство в программировании, я тоже решил сделать свою графическую онлайн рисовалку, которая будет интересна не только взрослым, но и детям. Я решил назвать её Flower, поскольку в данном приложении происходит генерация различных цветков и фонов на их основе, даже имеется несколько кистей для рисования цветками.
Алгоритм работы всего приложения основан на нескольких математических формулах, которые позволяют создавать различные узоры, в зависимости от параметров, можно создавать как 3D узоры, так и контуры цветков. Именно последний вариант и был взят в основу графического редактора flower.
Flower (http://matrixblog.ru/flower/) — графический онлайн редактор.
Благодаря возможностям языка программирования JavaScript, получилось создать полноценную графическую детскую онлайн рисовалку, которая может найти своего пользователя и быть полезной. Давайте приступим к её рассмотрению.
Flower – детская онлайн рисовалка и генератор фона
В основе приложения лежит 11 фигур, которые напоминают цветки. Количество лепестков увеличивается от 3 до 13. Да, я понимаю, что некоторые цветки похожи друг на друга, но суть не в этом.
Вдобавок к выбору типа узора, можно выбрать одну из четырёх кистей. Кисти позволяют добавлять один цветок на полотно, создавать шлейф, или формировать нарастающий (убывающий), в плане размера фигуры, шлейф из цветков.
Для генерации фона, имеется пять кнопок, которые позволяют создавать интересный фона, состоящий из множества различных цветков – разного размера, цвета и типа.
Левая панель позволяет регулировать параметры узоров, задавать случайные значения и много другого.
Холст для рисования занимает практически всю область экрана. Скорее всего, для увеличения высоты пространства, я сделаю боковую панель управления для данной рисовалки детям онлайн, что более привычно, с учетом популярности таких графических редакторов, как Photoshop, но, всему своё время.
Хорошо, давайте более подробно рассмотрим, как работает данное графическое чудо, состоящее из множества строк программного кода.
Flower – настройка рисовалки детям онлайн
Начнем с левой панели, которую можно свернуть при желании. Важно отметить, что некоторые моменты я уже описал на странице matrixblog.ru/2017/01/12/flower-cvetochnyj-onlajn-generator-fona/, там же я привел примеры создания той или иной фигуры. Тут же, я сосредоточусь на самом рисовании.
После загрузки графического редактора, у нас заданы следующие параметры:
- Размер 3.4
- Уровень 10
- Плотность 0.9
Выбрана заливка и генерация случайного цвета.
На холсте отображается надпись Flower, сделанная в этом же редакторе.
Я добавил в верхнюю панель кнопки для отмены, сохранения рисунка и очистки холста.
Рисуем цветок сплошного цвета.
Для создания цветков сплошного цвета, достаточно установить уровень на 1, плотность влиять не будет. Если выбрать первую кисть, и поставить галочку возле случайно фигуры и цвета, то при каждом щелчке по холсту, будет появляться случайный узор цветка, в графической онлайн рисовалке для детей Flower.
Параметры толщины линии будут актуальны, если мы уберём галочку с заливки. В этом случае, цветок не будет закрашен.
Зачем нужен уровень?
Уровень позволяет рисовать цветок, состоящий из нескольких слоёв различного цвета, при условии, что выбрана генерация случайного цвета. Хотя количество уровней и можно регулировать от 1 до 20, но в программной коде, уровень будет меняться автоматически, если выбранное значение больше размер в 2 раза. В этом есть логика, поскольку чем меньше цветок, тем меньше переходов мы можем увидеть.
Можете попробовать, оставьте значение плотности по умолчанию (0.9) задайте размер в 10 (максимум), и поиграйтесь с уровнями.
Важно отметить. Максимальный размер фигуры составляет 10, хотя, можно было задать и большее значение. Если будут пожелания относительно данной детской онлайн рисовалки, то пишите, лучше на сайте, где я её разместил, так я быстрее прочитаю.
На что влияет плотность?
Значение плотности влияет на то, как близко будут находится разноцветные уровни. Оставим размер в значении 5, уровень пусть будет равен 4. Теперь можно поиграться с плотностью.
Остальные параметры
В блоке Случайные параметры можно поставить галочку возле тех параметров, которые должны генерироваться в случайном порядке, при щелчке по холсту. Всё что было сказано выше, актуально и тогда. Когда галочка снята с заливки. В этом случае, можно регулировать толщины линии узора (цветка).
Полагаю, играясь с различные настройками, Вы получите нужный вариант.
Генерация фона и кисти в онлайн рисовалке для детей Flower
Начнем с кистей. Формально, полноценных кистей всего три. При выборе первой кисти, можно при щелчке мышью на холсте создавать узор (цветок) в заданной точке. Вторая кисть позволяет рисовать линии, состоящие из цветочков. Важно отметить, что внешний вид шлейфа будет зависеть от выбранных настроек.
Третья кисть позволяет рисовать шлейф по возрастанию – размер фигуры при движении курсора будет увеличиваться.
Четвёртая кисть аналогична предыдущей, только размер фигуры будет уменьшаться.
Перейдем к кнопкам, отвечающим за генерацию фона.
Первый тип генерации рисует в центре фигуру заданного размера. Вокруг фигуры рисуются другие узоры, размер которых будет увеличиваться.
Второй тип генерации аналогичен предыдущему, только размер фигур с расстоянием будет уменьшаться.
Третий тип генерации фона размещает рисунки цветков горизонтально и вертикально.
Важно отметить, что галочка возле пункта случайный размер, никак не влияет на создаваемый фон.
Четвёртый и пятый тип создаваемого фона позволяет генерировать цветок в центре холста. В первом случае – перед генерацией происходит очистка холста, во втором случае –происходит наложение создаваемых цветков в онлайн рисовалке для детей flower.
Если позволит время, то можно будет поиграться с вариантами генерируемого фона, и добавить дополнительные возможности в графический редактор.