Перетекающая акварель в графическом редакторе

Дмитрий Маштаков
    В статье рассматривается способ компьютерного рисования с использованием свойств перетекающей акварели.
    Продолжение темы тут - http://www.proza.ru/2019/07/27/148
__________________   

    Акварель - это разводимая водой прозрачная краска, частички которой при рисовании стекают с кисти и перетекают на бумагу, распространяясь по бумаге вместе с водой и смешиваясь по дороге с другими красками.
    Акварелью также называют технику подобного рисования. Говоря о компьютерной технике акварельного рисования, мы будем подразумевать под этим термином не просто имитацию акварели, но и некий  алгоритм распространения цвета, близкий по своим свойствам к естественному процессу рисования.

    Но можно ли сделать так, чтобы и цвет пикселей при рисовании в графическом редакторе перетекал с места на место подобно краске акварели? Оказывается, что это сделать можно, и делается такое перетекание достаточно просто. О чём я вам сейчас и расскажу.
    Взгляните на первую часть иллюстрации, которая называется

     РИСОВАНИЕ ПО ПИКСЕЛЯМ

    Рисование по пикселям, что это такое?
    Организуя алгоритм таким образом, мы поочерёдно окрашиваем пиксели рисунка внутри круга заданного диаметра, если кисть у нас круглая, или внутри другой какой-нибудь области заданной формы, если кисть у нас выбрана соответствующая.
    Очерёдность окрашивания пикселей может быть выбрана различной. В моём редакторе пиксели окрашиваются по постепенно расширяющимся кругам.
    Первой окрашивается точка, на которую направлен указатель мыши, затем отступаем на пиксель вправо и окрашиваем круг пикселей этого радиуса, двигаясь против часовой стрелки, так, как это показано на иллюстрации. Когда будет окрашен последний, жёлтый на иллюстрации пиксель, принадлежащий кругу этого радиуса, то точно таким же образом делаем следующий круг окрашивания.
    Как оказалось, именно такая очерёдность легко может придать нашему рисованию свойства акварели.

    Но вначале скажем пару слов о прозрачности краски. Мы ведь хотим рисовать прозрачной краской.
    А поэтому, вместо того, чтобы просто наносить на пиксель цвет, который мы выбрали, как это было бы при рисовании гуашью, мы сначала смешиваем выбранный нами цвет с первоначальным цветом того пикселя, который собираемся перекрасить. Пропорция этого смешения устанавливается опцией прозрачности цвета, и может меняться от малых значений и практически до единицы. 
    У меня в программе эта величина устанавливается кнопкой "Градация" с цифрами 0 - 9. Чем меньше цифра на кнопке, тем прозрачнее краска.

    В результате получается хороший прозрачный прокрас, один мазок просвечивает через другой, плотность цвета усиливается при наложении мазков друг на друга. Это можно видеть на примере для Кисти №1 (обычный режим).
     Однако можно ли назвать такое рисование компьютерной акварелью?
     И да, и нет.   Да, потому что реализовано одно из свойств акварели - прозрачность краски.
     Нет, потому что другое свойство - растекание по поверхности  вместе с водой, пока не реализовано. Да и где воду-то взять? Не в компьютер же её наливать.
     И вот тут появляется соблазн - сделать имитацию этой воды, усложнить программу до обалдения, и пусть краска каплями стекает с мазков, а пользователи удивляются и радуются - вот какая крутая программа.

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

         ПЕРЕТЕКАНИЕ КРАСКИ С ОДНОГО ПИКСЕЛЯ НА ДРУГОЙ

     Визуал Бейсик 6 - та среда программирования, которой я пользуюсь, предоставляет для точечного рисования следующие средства -   
         C = Point(X, Y)     позволяет считать цвет с пикселя, имеющего координаты (X, Y)
         PSet (X, Y), C    окрашивает центральный пиксель, и дополнительно - пиксели вокруг в круге диаметром W,
где  W это свойство  DrawWidth того поля, на котором мы рисуем.
 
    Для точечного рисования по пикселям полагается  DrawWidth=1, но можно для этой величины задать и другой размер. И тогда рисунок наш будет заполнен не пикселями, а кружками и полумесяцами остающимися от наложения кружков друг на друга, то есть, он будет фрагментирован более крупно и по-другому.

   На первом рисунке иллюстрации показано, как расположены дополнительные пиксели относительно центрального, если задано  DrawWidth =2.  Они расположены снизу и слева.
    Что же будет, если мы, заполняя круг пикселями по описанной выше схеме, будем ставить точки размером не W=1? а W=2, немного укрупняя фрагментацию нашего рисунка? А произойдёт очень интересная вещь - краски как бы оживут, и станут перетекать по нашему кругу вниз и влево.
    И в самом деле, при прохождении каждого круга против часовой стрелки мы будем натыкаться на дополнительные пиксели, уже перекрашенные в новый цвет. Мы перекрасим их ещё раз, в результате их цвет усилится. Более того, возникнут новые дополнительные пиксели, окрашенные уже в новый усиленный цвет.

    Программа настроена так, что на отдельном круге этот эффект незаметен, то если мы ведём мышью линию вниз и влево, то эффект потемнения тона оказывается значительным. Его можно даже использовать - можно рисовать тучки, нижний край которых автоматически будет становится более тёмным.
    Чувствуете? Вот уже наша акварель к нижней части тучек и притекла.
    Заметьте, никаких усилий для этого не потребовалось, только поменяли значение DrawWidth с 1 на 2.   

           КИСТЬ №1

    Эффект полезный, но не для всех кистей он подходит. Я его использую в кистях №4 и №5, а для кисти №1 акварельность делается чуть по-иному.
    Я не увеличиваю значение W, оно остаётся равным единице, однако вслед за каждым очередным пикселем, я окрашиваю два дополнительных пикселя в другом месте. А именно - позади окрашиваемого пикселя.
    Ставлю его новую краску на прошлый и позапрошлый пиксели.

    Что за глупость, скажет читатель, ведь к этим пикселям мы больше не вернёмся. Какое влияние может оказать их перекраска на последующие события?
     Не берусь объяснять, но факт остаётся фактом - на правой стороне следа, который мы ведём мышью, появляется окантовка затёкшей акварели. Более того, при пересечении таких следов, краска, скопившаяся на окантовке, перетекает на другой след. Вы можете видеть это, рассматривая рис.2 иллюстрации.
    Следы, полученные в обычном режиме, без окрашивания прошлого и позапрошлого пикселей, не проявляют перетекающих свойств.

    Оригинальная фактура получается, когда мы не ведём линию, а делаем стилусом круговые движения, наподобие тех, которыми перемешивают кашу в кастрюльке.   
    При движении против часовой стрелки получается фактура, показанная слева. При движениях по часовой стрелке получается другая фактура - с заметным потемнением к центру.
    Краска перемешивается, и явление это можно наблюдать воочию. Особенно это заметно, когда перемешиваемые краски сильно отличаются друг от друга цветом. Тёмные пиксели шныряют вокруг наконечника стилуса как крупа в недоваренной, и пока ещё жидкой каше.
    Очень эффектна "белая акварель" на тёмном фоне, но это  чисто компьютерные штучки, в реалиях такого не увидишь.   

          КИСТЬ №5

    Эта кисть была специально сделана для рисования волос. Она единственная из всех кистей использует паттерн - образчик радиусом 16 пикселей, на котором находится изображение, или расставлены точки.
    Кисть №5 может работать с опцией  A - акварель, получаемая по принципу  DrawWidth=2, а также с опцией <аппликация> c подключением дополнительных точек, ставящихся вслед и в послед основному пикселю.
    Обе эти опции могут быть подключены одновременно.
    Опция  A  устанавливается переключателем   < G-A >  (гуашь-акварель) и идентифицируется буквой на этой кнопке. Аппликация  <a>  подключается нажатием на жёлтое поле левее кнопки с надписью "Рисовать".

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

     Разумеется, эту кисть можно использовать не только для рисования волос. Её можно использовать также широко, как используются кисти в Фотошопе, надо только подобрать или сделать для этой кисти подходящий паттерн и выставить подходящий режим рисования.

          КИСТЬ №4

     Это последняя из трёх кистей, использующая опцию создания акварели. Аквалель в ней создаётся по принципу DrawWidth=2.  Не только футуристических змей можно рисовать этой кистью с опцией акварели. Ею удобно рисовать листочки, морские волны, и даже делать замесы с нежными переходами цвета в акварельных тонах.
     При отключённой опции акварель, кисть вполне подходит для рисования деревьев - от вершины проводим след к земле и, не отрываясь, по стволу обратно.   Ствол у земли толстеет и выглядит вполне себе натурально.  Таким же манером удобно рисовать ветки.   Но их лучше рисовать парами - выбираем точку в будущей кроне, проводим линию к стволу, а потом возвращаемся в другую точку кроны. Вот две ветки к стволу и приросли.

       Шаг, или постепенность утолщения "змеи" определяется значением цифры на кнопке Градация, а плотность цвета (величина, обратная прозрачности) задаётся цифрой на кнопке Градация. Чтобы рисовать футуристических змей, выставляйте цифру 3 на этой кнопке.

        ЗАКЛЮЧЕНИЕ

      Создание прозрачной перетекающей акварели оказалось не очень сложным делом. И, заметьте, это не имитация акварели, которая делается более менее успешно в других программах (обзор смотрим тут - http://youtu.be/VsI8egiPXPw ), а очень естественная компьютерная процедура, заключающаяся в перетекании цвета по пикселям при точечном добавлении его в подходящие для этого места.
     И этот метод выглядит очень перспективным для создания на его основе других алгоритмов.
     В частности, не представляет никакой сложности изменить направление перетекания цвета, располагая дополнительно окрашиваемые пиксели около центра, наподобие того, как они располагаются при  DrawWidth=2, но только с другой стороны от центральной точки.
    Метод хороший, хоть патентуй его ))
 
    Но я такими глупостями не занимаюсь.
____________________
 20.07.2019   

клип смотрим тут - http://youtu.be/ltjA41Bg_Bo