Как нарисовать плавные струйки дыма?

Question

[Сергей Соколов]

Хочется генерировать картинки в похожем стиле:
источник

Похоже на след от движения «кисти» с неравномерной плотностью, или на струйки дыма в спокойном воздухе

Реализовывать буду в WebGL, но сейчас интересует механика — как это делать – хоть в Photoshop / Illustrator, хоть «на пальцах» объясните, пожалуйста, кто делал похожие иллюстрации? Может, встречались онлайн демки с похожим стилем?

Comments

[RAX7]

Больше похоже на ленту колышущуюся в воздухе. Нашел вот такую демку

[Сергей Соколов]

RAX7, у этого же чела есть отличный пен "canvas Ribbons": https://codepen.io/bsehovac/pen/LQVzxJ

[RAX7]

Сергей Соколов, тоже неплохо, хоть и не на webgl шейдерах.

Answer 1

[DarkWood]

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

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



Создаете между ними бленд (Ctrl+Alt+B) с дистанцией в 1 пиксель. Можно поставить меньше - тогда переходных кривых будет больше. При толщине контура в 1 пиксель меньше 0.4 пикселя ставить уже особого смысла не будет.



Не переживайте, что всё слилось в одноцветье. Кстати, желаемый цвет вы можете задать как сейчас, так и на следующем этапе. Рекомендую делать это как раз там.

На всякий случай скопируйте бленд (Ctrl+C > Ctrl+F), чтобы была возможность что-то исправить, если последующий результат не понравится.

Выполните команду Object> Blend> Expand.

Далее Shift+Ctrl+G

Задаете малую непрозрачность (около 10%). Как раз сейчас лучше всего менять цвет. Можете также поменять режим смешивания.



Ctrl+G.

Большее свечение на "петлях" можно сделать дубликатом этой группы (Ctrl+C > Ctrl+F). Эту копию тоже надо будет потом разгруппировать (Shift+Ctrl+G) изменить цвет на более светлый, непрозрачность и режим смешивания по вкусу.



Собственно, узор готов.

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



Продолжение такое же: Shift+Ctrl+G, меняете прозрачность, режим смешивания и т.п.



Можно добавить еще одну кривую цвета фона и переплести ее с остальными. Можно переплетать два бленда от основного цвета к цвету фона и т.д. и т.п.

Все команды, кроме рисования кривых, прекрасно записываются в экшен.

Comments

[Сергей Соколов]

Спасибо большое за хороший иллюстрированый урок! Думаю, многим будет полезен.

Да, blend хорошая штука. Лет 100 назад я даже записал видео с техникой рисования размытых вспышек — там ещё добавлял маску для большей плавности ухода в прозрачность.

Но в исходной иллюстрации немного другая история, как мне кажется. Без резких краёв, которые видны в вашем решении. Что-то ближе к этому мне уже удалось сделать, плавно двигая кривую и меняя её форму. Там, где она «задерживается» дольше, становится ярче.

картинка

Для лука как на исходной картинке, наверное, надо ещё пост-обработкой увеличить контраст S-кривой.

[hint000]

DarkWood,

Автоматизировать этап создания кривых - крайне сложно.

Могу предложить идею простого генерирования таких переплетающихся кривых.

• 1. генерируем одну "направляющую" кривую, заданную параметрически, т.е. x(t), y(t);
  
• 2. выбираем n значений t_1,.., t_n, дающих будущие точки пересечения;
  
• 3. на каждом интервале (t_i, t_i+1) "вытягиваем" в противоположные стороны две кривые x1(t), y1(t) и x2(t), y2(t), таким образом, чтобы максимальное расстояние до "напрвляющей" было примерно на середине интервала, но с существенным вкладом рандома; также надо стараться, чтобы производные справа и слева в точках пересечения совпадали.
  

Answer 2

[hint000]

Можно взять за основу это:
https://ru.wikipedia.org/wiki/Кривая_Безье
примеры: https://www.google.com/search?q=bezier+curve&tbm=isch

хоть в Photoshop / Illustrator

Помню, в старом Paint'е (ещё со времён Win95) были эти кривые; насчёт более поздних версий не уверен. В векторных редакторах должны быть, по идее.

Comments

[Сергей Соколов]

кривые-то есть. Вопрос, как получаются полупрозрачные следы, которые где-то ярче, а где-то уходят в прозрачность.

[hint000]

Сергей Соколов, дыкЪ выделить область между кривыми и заливать градиентом в альфа-канале. Конкретную последовательность действий не скажу (ибо далёк от Фотошопа\Иллюстратора), но IMHO как-то так можно поискать: https://www.google.com/search?q=заливка+градиентом...

[Сергей Соколов]

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

[hint000]

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

[Сергей Соколов]

hint000, в итоге ваш ответ мало помогает заданной теме.

[Сергей Соколов]

hint000, задача описать параметрами процесс и генерировать бесконечное множество иллюстраций автомаГически.

[hint000]

Сергей Соколов, только в вопросе было другое:

интересует механика — как это делать – хоть в Photoshop / Illustrator, хоть «на пальцах» объясните

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

* проголосовал за уровень вопроса =сложный.

[Сергей Соколов]

hint000, никто не читает текст перед картинкой:

Хочется генерировать картинки в похожем стиле: