Генератор случайных изображений
Зачем? (Введение)
Весна 2020... Самоизоляция длится вечно... Но если точнее - 1,5 месяца. Стало скучно. Захотелось ярких красок и сделать собственный веб-сайт.
Но как его сделать интересным? Необычным? Хотелось чтобы был оригинальный фон, возможно, интерактивный. Также хотелось разнообразия, но рисовать каждый раз новое изображение было лень. Поэтому было принято решение - реализовать генератор случайных изображений, который бы СОЗДАВАЛ ИЗОБРАЖЕНИЯ САМ!
Выбор варианта реализации
Во-первых, так как генератор изображений будет работать со стороны клиента в браузере, то он не должен тормозить работу сайта, должен быть не ресурсозатратным. Во-вторых, не хотелось учить новые языки. Надоело. Поэтому генератор должен быть реализован с помощью JavaScript с использованием canvas.
Изучив вопрос по реализации генератора изображений, были найдены 2 варианта, реализованные кем-то ранее:
- С помощью нейронной сети.
- С помощью генетического алгоритма.
Реализация с помощью нейронной сети интересна, меня заинтриговала. Картинки потрясающие. Но нужна глубокая, многослойная нейронная сеть, что означает - много вычислений, которые могут тормозить работу сайта. Поэтому этот вариант не подходит, но он не забыт.
Реализация с помощью генетического алгоритма не подходит тем, что нужна функция приспособленности, то есть функция, с помощью которой выбираются лучшие изображения. Но как математически описать лучшее изображение? Никак. Только человек может выбрать какое изображение лучше, красивее, интереснее. Я не хотела сидеть и выбирать. Да вы тоже. Отметаем этот вариант.
Но что теперь делать? А если представить, что наш экран - тетрадный лист и мы рисуем на нем графики? Цветные графики.
То есть цвет каждого пикселя можно представить как функцию, которая зависит от расположение пикселя (его координат).
Осталось выбрать как реализовать эту функцию и, собственно, реализовать ее.
Реализация
Нас интересуют три канала пикселя - R, G & B. Для каждого канала будет своя функция, которая зависит от координат x,y. Каждая функция состоит из функций-примитивов. Примеры таких функций представлены в таблице ниже.
| Бинарные | Унарные |
| + | sin |
| - | cos |
| \ | exp |
| * | acos |
| % | sqrt |
Лучшим способом хранения функции и расчета ее значения - дерево. Пример такого дерева и функция, которая ей соответствует представлена ниже.
Ниже представлена часть кода, которая содержит основные функции для дерева. Из-за того что не хотела писать комментарии - их нет. Поэтому напишу небольшое пояснение к коду.
Дерево создается прямым обходом, то есть от корня до конечных листьев. Сначала строится левое поддерево, потом правое. Листья дерева - координаты пикселя (x или y).
Вычисление значения функции происходит путем обратного обхода дерева.
Массивы Two, One содержат функции-примитивы. Класс Node - класс являющийся узлом дерева. Каждый узел состоит из данных, левого и правого потомков.
В коде представлены функции по добавлению узла дереву, созданию дерева и вычислению значения функции.
Есть массив, который содержит три дерева -RGBTree.
Также есть массив, который содержит количество функций-примитивов для каждого дерева - N. Опытным путем было выяснено, что количество составных функций не должно превышать 6 (иначе долгий расчет значений).
Кстати, в приведенном ниже коде нет текста функции FF(x,y,c). с- функция-примитив, а x,y- операторы. FF просто возвращает ответ функции-примитива (например x+y, думаю, что труда с этим не составит).
Примечание
Да, статья, возможно, не самая лучшая, но мне без разницы. Я рассказала как реализовала, слегка это объяснила. Додумывайте сами, решайте сами))) Я уверена, что у вас получится лучше! Стоит добавить, что я добавила шаг и координаты на экране центра графика, которые принимают случайные значения при создании новых деревьев. Так картинки получаются более разнообразные. Можете задать вопросы мне в соцсетях, которые увидите в контактах. А сейчас можете посмотреть на результаты работы генератора.
