Далее я добавил туда линии и вышла...акварель!

Ну и, наконец-то, получился столь желанный калейдоскоп со стеклышками, залитыми полупрозрачным градиентом

https://codepen.io/lekzd/pen/jENzLGg

Но я все еще не мог остановиться на достигнутом и сделал уже правильный мароканский узор, кстати, все 5 работ выполнены с использованием одной и той же палитры, взятой отсюда https://coolors.co/palettes/trending

https://codepen.io/lekzd/pen/jENzZJL

Пожалуй, второй самый залайканный везде пост.

Genuary 12: "Subdivision"
https://codepen.io/lekzd/pen/ogvqdxZ

Разделение...что бы это могло быть, я не силен в алгоритмах где большой полигон делится на мелкие, потом еще и еще и я вспомнил, что еще когда начинал разбираться в вебе в 2010 году шуму наделала flash-анимация на сайте испанской певицы Labuat (судя по всему она так расфорсилась в рунете что домен захватил какой-то сеошный каталог, хе-хе).

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

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

UPD: нашел тред на гитхабе, где достучались до разработчика и он выложил видео на сайте https://github.com/open-source-flash/open-source-flash/issues/70

Genuary 13: "Triangles and nothing else."
https://codepen.io/lekzd/pen/VYZXNdy

Треугольники значит, нарисовал сетку на треугольниках и отрендерил на ней цвета при помощи кода:

(1 + Math.sin((y) / 40) + Math.cos((x) / 50))

когда не знаешь что делать бери синус и косинус)

Но, как обычно, не достигнув вау-эффекта лично для себя, пошел дальше: решил отрендерить картину, и не просто нарисовать, а используя 1 линию, которая каждый тик поворачивается на 120 градусов, образуя треугольники. В итоге получился некий муравей, который прогрызает темноту, открывая миру Мону Лизу. Таких муравьев у меня 256, раскиданных по спирали, чтобы картинка проявлялась вся начиная с лица

https://codepen.io/lekzd/pen/NPKMGjv

Остался вопрос, где взять Мону Лизу, чтобы не было запроса на сторонний ресурс, что помешало бы сгенерировать красивое превью на CodePen. На помощь пришел старый добрый ASCII арт из 1994 года.

Поискав автора, нашел что у него есть целая статья о том как это было сделано, если вкратце, автор написал скрипт, который по сетке перевел картинку в текст, я, выходит сделал наоборот)

Genuary 14: "Pure black and white. No gray."
https://codepen.io/lekzd/pen/yyBjMOr

В этом задании я вспомнил молодые годы и обучение рисованию и графике в школе, затем в институте, где одним из приемов композиции была инверсия. Захотелось сделать что-то такое, и на ум сразу пришел мастер инверсии из Дании Эшер, работы которого построены на особенностях периферического зрения.

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

Именно этот эффект я взял своей черно-белой композиции, но кажется испортил его динамикой перерисовки фона, которая уж очень понравилась и решил так и оставить

Genuary 15: "Design a rug."
https://codepen.io/lekzd/pen/emOKZMv

Мастерим коврик) Началось все с попыток сделать гексагональную плитку Труше, так как для ковра вполне подходят абстрактные структуры и казалось что буквально добавить рандома и все полетит. Но сделать из этого красивую картинку на рандоме не вышло, в итоге гексы остались, а их заполнение стало в разы проще чем планировалось. Потому я обратился к старому доброму паттерну sin + cos и повторил его отдельно для края ковра.

Неужели это все? Да это все, коврик буквально собран на случайностях. Бывает так, что собрал алгоритм, который что-то рисует, начинаешь играться с параметрами и тут раз! и красиво выходит

Genuary 16: "Generative palette."

https://codepen.io/lekzd/pen/VYZdyJM

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

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

Кстати, вычитал на Википедии, что данный тип орнамента классифицирован с 17 другими возможными вариантами и называется p4 (то есть 4 поворота), ранее я делал узоры по наитию, теперь можно пробовать использовать шаблоны, описанные еще 130 лет назад.

Иногда банан это просто банан

10 итишников за столом, много пива спустя, на стене висит картина с кольцами, повернутыми в разные стороны. Бармен очередной раз проходя мимо шутливо закидывает нам идею что картина может быть не просто картина, а шифр! На все подсказки реагирует улыбкой Моны Лизы, чем еще сильнее подталкивает нас к исследованию.

За полчаса опробовано:
— шифр Цезаря
— 8-ричная система исчисления (у колец 8 поворотов)
— чат гпт
— бинарные последовательности

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

Короче, кто-то копает что за кольца, кто-то ищет инфу про художника, я начинаю обводить на картине последовательности, которые неожиданно прерываются без всякой логики. В итоге находим заметку о выставке, где была эта картина, оказывается смысла в написанном реально нет. А последовательности символов такие, потому что художник использовал трафарет, переворачивал его и сдвигал на 1 символ, чтобы было немного по-интереснее. А вся суть картины в том, что тут изображена адресная табличка, а все остальное заполнено кольцами Ландольта, которые используются для проверки зрения и ВНИМАНИЯ, такой вот символизм. Художник говорит что там еще на первом слое какая-то молния нарисовано, но кто знает... заходите лучше в бар Ящик пива где висит эта картина, и не такое узнаете.

Genuary 17: "What happens if pi=4?"

Для тех кто недоумевает что такое Genuary, в этом посте я объяснял

Когда буквально первый эксперимент приводит к неожиданным последствиям: берем число PI которое будет равно 4, рисуем 8 полукругов с поворотом ((PI * 2) / 10) поворачивая их по часовой стрелке и получается лягушка в очках. Мне оставалось только добавить ей глаза и анимировать ее движения чуть-чуть сдвигая углы конечностей. Почти генеративный брендинг для @laranatech =)

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

https://codepen.io/lekzd/pen/raBrNMY

Genuary day 18: "What does wind look like?"

https://codepen.io/lekzd/pen/KwPBzrd

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

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

Genuary 19: "Op Art."

Оптическое искусство, снова ограничился только черным и белым, получился хоррор с глазами как в игре Stray.

https://codepen.io/lekzd/pen/ByBPVzO

Genuary 20: «Generative Architecture.»
https://codepen.io/lekzd/pen/OPLwYJv

Я два раза был в Соборе Святого семейства в Барселоне, он начал строиться еще с 1882 года и до сих пор возводится, исключительно на донаты, в том числе и мои)

Завтрашний день в Genuary посвящаю этому великолепному храму, желаю каждому увидеть его в живую.

Как начать заниматься генартом

Нужно учить алгоритмы? Computer Science? Все проще, нужно правильное окружение и проводники.

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

Но еще ранее кто-то должен был меня туда привеcти и это были Паша, который часто рисует генарт на ThreeJS, в том числе и для BeerJS и Вася, который очень любит создавать генеративные миры. Обоих я нашел в чатике по WebGL, так как часто ищу новых спикеров для конференций. А теперь они активно влились уже к нам в BeerJS.

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

Genuary 22: «Gradients only.»
https://codepen.io/lekzd/pen/QwLVYgJ

Запускаем механизм с любимой палитрой