Flower — онлайн рисовалка для детей и генератор фона

Flower — онлайн рисовалка для детей и генератор фона Полезный софт, сервисы и познавательные статьи

Приветствую всех читателей блога 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, сделанная в этом же редакторе.

Я добавил в верхнюю панель кнопки для отмены, сохранения рисунка и очистки холста.

Рисуем цветок сплошного цвета.

flower - рисуем цветки сплошного цвета

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

flower - рисуем контуры цветков различной толщины

Параметры толщины линии будут актуальны, если мы уберём галочку с заливки. В этом случае, цветок не будет закрашен.

Зачем нужен уровень?

Уровень позволяет рисовать цветок, состоящий из нескольких слоёв различного цвета, при условии, что выбрана генерация случайного цвета. Хотя количество уровней и можно регулировать от 1 до 20, но в программной коде, уровень будет меняться автоматически, если выбранное значение больше размер в 2 раза. В этом есть логика, поскольку чем меньше цветок, тем меньше переходов мы можем увидеть.

flower - рисуем различный цветной уровень фигур

Можете попробовать, оставьте значение плотности по умолчанию (0.9) задайте размер в 10 (максимум), и поиграйтесь с уровнями.

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

На что влияет плотность?

flower - рисуем цветки различной плотности

Значение плотности влияет на то, как близко будут находится разноцветные уровни. Оставим размер в значении 5, уровень пусть будет равен 4. Теперь можно поиграться с плотностью.

Остальные параметры

В блоке Случайные параметры можно поставить галочку возле тех параметров, которые должны генерироваться в случайном порядке, при щелчке по холсту. Всё что было сказано выше, актуально и тогда. Когда галочка снята с заливки. В этом случае, можно регулировать толщины линии узора (цветка).

Полагаю, играясь с различные настройками, Вы получите нужный вариант.

Генерация фона и кисти в онлайн рисовалке для детей Flower

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

flower - использование второй кисти при рисовании

Третья кисть позволяет рисовать шлейф по возрастанию – размер фигуры при движении курсора будет увеличиваться.

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

flower - рисовалка детям онлайн

Перейдем к кнопкам, отвечающим за генерацию фона.

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

flower-генератор цветочного фона

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

flower - рисуем цветочный фон

Третий тип генерации фона размещает рисунки цветков горизонтально и вертикально.

flower - рисуем цветочки

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

Четвёртый и пятый тип создаваемого фона позволяет генерировать цветок в центре холста. В первом случае – перед генерацией происходит очистка холста, во втором случае –происходит наложение создаваемых цветков в онлайн рисовалке для детей flower.

flower - создаём несколько цветочков

Если позволит время, то можно будет поиграться с вариантами генерируемого фона, и добавить дополнительные возможности в графический редактор.

Оцените статью
Технологии программирования и ведение блога
Добавить комментарий