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

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

Genuary 23: "Inspired by brutalism."
https://www.shadertoy.com/view/M3cBWS

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

Ray marching или подробнее о том как сделано видео из прошлого поста

Ray Marching — это метод рендеринга, основанный на трассировке лучей, который используется для визуализации трёхмерных сцен. Притом для достижения этой трассировки лучей совсем не нужна RTX видеокарта. Почему? Вместо того чтобы работать с тяжелыми объектами из 3д редактора, этот метод описывает геометрию с помощью математических функций, определяющих расстояние от точки в пространстве до ближайшей поверхности (Distance Fields). Алгоритм последовательно “шагает” вдоль луча, уменьшая расстояние до объекта, пока не достигнет поверхности или выйдет за пределы сцены.

Как это работает?

Основная идея в том, чтобы каждый шаг приближал нас к ближайшему объекту, используя функцию расстояния. На каждом этапе мы проверяем, пересекли ли объект (расстояние стало достаточно малым). Это позволяет эффективно рендерить сцены с множеством объектов, сложными поверхностями или даже изменяющимися во времени формами. Ray Marching идеально подходит для процедурной графики: например, вы можете описывать целые миры с помощью нескольких уравнений, правда повторенных тысячи раз)

Почему это круто?

Видите видео в посте? Это работа Inigo Quilez, где он на стриме, в течение 5 часов 28 минут шаг за шагом делал из шарика, этого персонажа и остальное окружение. Если подробнее описывать как я делал свою первую сцену, то я взял шаблонный шейдер с которого можно начать свою первую сцену, загнал его в ChatGPT и попросил объяснить как это работает, как туда что-то можно добавить и спросил про основные техники, которые можно использовать. Сидел я конечно долго, даже на BeerJS за пивом дописывал его, но это вышел буквально hand-made свитер, кривой, косой, но такой любимый)

Genuary 24: "Geometric art - pick either a circle, rectangle, or triangle and use only that geometric shape."
https://codepen.io/lekzd/pen/GgKwEjd

Я выбрал кружки и Мону Лизу с прошлой работы, еще сделал генеративную палитру, думаю если подобрать диапазоны на цветовом круге HSL правильно можно делать довольно хорошие палитры.

О, я здесь живу

https://www.ivd.ru/dizajn-i-dekor/kvartira/kak-dizajner-oformila-interer-dlya-sebya-yarkaya-kvartira-69-kv-m-s-klassnoj-pereplanirovkoj-i-iskusstvom-134992

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

PS: картины на стенах тоже ее