Процедурная генерация фонов. Как?

Question

[xmoonlight]

Всем привет.
Как создать подобные фоны с помощью процедурной генерации (цветовой градиент с "дымкой"):
(желательно, на JS+canvas)
Заранее, Благодарю всех отписавшихся.

Answer 1

[Philipp]

https://github.com/Ninjakannon/Cloudgen.js + jsfiddle.net/qfEUt

Comments

[xmoonlight]

Супер!!! Однозначно отмечу завтра решением!
(пока - попробуем подождать: может будут еще какие-либо другие варианты)

[Philipp]

xmoonlight: в принципе, можно сделать облака, потом добавить motion blur и оверлей через использование hsl()

[xmoonlight]

Philipp T: вот весь вопрос в том, чтобы облака были похожи именно на облака/дымку, а не на сегменты сетки радиальной прозрачности.... т.е. как бы с более-менее случайными краями...
и сам алгоритм генерации - чтобы был достаточно быстрый, т.к. планируется на моб. устройствах это делать в SPA.

[Philipp]

xmoonlight: canvas сама по себе достаточно быстрый, но для бэкграунда я бы обошелся просто картинкой. Это сэкономило бы ресурсы. Все же программная генерация фона довольно ресурсоемкая вещь, там приличное количество попиксельных вычислений, особенно размытие движением.

[xmoonlight]

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

[yesworld]

Philipp T: Прикольное решение, нужно сохранить вкладку :)

[Antony Bark]

Идеальное решение! Согласен с Филиппом по: "для бэкграунда я бы обошелся просто картинкой"

[xmoonlight]

Antony Bark: подумываю над картой спрайтов дымки разной величины и аппликацию на стороне клиента... Чтобы было и уникально и как-то распределить вычисления.