Мосты и ветер

Кому как а мне ветрено очень, часто и долго гуляю с ребенком у воды, приходится испытывать иммунитет.

К прошлому примеру добавил мосты и заменил синус на арктангенс, если синус рисовал цветочек, то обратный тангенс подходит для вихрей.

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

Новая технология от Airbnb

TLDR: они сделали формат для очень четкой растровой анимации — LAVA. Пока не в опенсорсе, просто везде похвастались, ждем.

🚀 Так что там прорывного?

Однажды я сделал доклад про то как тяжело сделать прозрачное видео чтобы оно у всех работало (запись тут). Вот и теперь его сделали.

🤔 Почему создатели Lottie и Rive сделали еще один формат?

В отличие от них он расcтровый, попытки сделать что-то такое на Lottie приведут к большому кол-ву слоев, а значит будет больше тормозить.

В теории можно отказаться от флет дизайна в иконках и сделать их еще более детальными, например сделать крутящиеся 3д рендеры с сжатием как в AVIF.

Подробный пост о том что там внутри
Статья на Medium

Мосты и Лахта

Вспомнил про самое высокое здание в Европе и добавил вид сверху к композиции, вообще я про взял прошлую работу и поместил все вихри в центр, смешавшись вместе они выдали вид на «кукурузину» сверху.

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

🎂 С днем рождения, Паша!

Если вы когда-то копались в интернете в поиcках решении как что-то сделать на Three.js, то, скорее всего видели только его ответы на форуме "Трехи".

Можете зайти на его codepen https://codepen.io/prisoner849/ и увидеть насколько много у него там разных работ, которые он делает просто по фану. В том числе и про наши местные сообщества. Сходки которых стабильно посещает. Спасибо тебе, Паша!

Ну и как же еще тебя поздравить как не демкой на Three.js https://codepen.io/lekzd/pen/ByyEoxK

Диаграмма Вороного в полярных координатах

1. Взял реализацию диаграмы от Иниго Квилеза
2. Свернул координатную ось в трубочку
3. Отзеркалил половину экрана, чтобы не было видно места склейки
4. Сделал 2 диаграммы: одна плюс время, другая минус время
5. Смешал их чтобы просвечивали друг через друга

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

В субботу был день рождения интернета, кстати. Не знаю, к этому ли дню делали эту штуку или нет, но так или иначе — Виртуальный музей интернет артефактов — с 1977 года и карты Arpanet до 2007 года и Интернет коммуникатора = первого айфона. Там можно увидеть первое спам-письмо или послушать первый mp3 трек, поностальгировать и заодно насладиться прекрасной визуальной культурой интернета 90-х и начала нулевых

Если бы «Автостопом по галактике» писали бы в наши дни, то ответом на главный вопрос вселенной, жизни и вообще был бы — jQuery.

77% из 10 миллионов самых популярных сайтов используют ее, что в 3-4 раза популярнее следующих библиотек в рейтинге.

«Напишите реализацию jQuery” было одной из моих любимых задачек которые я давал на лайв кодинг на собеседованиях.

Еще в 5 лет она покорила веб разработку настолько, что я лично знал только jQuery а не JS. 26 августа ей исполнится 19 а она все еще уверенно обновляется и готовит 4 версию.

В калейдоскопе все красивее

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

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

Записали в организаторы TbilisiJS

Теперь я со своим ковром еще и тут https://tbilisijs.dev/

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

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

Кстати с ней подкаст недавно вышел, где она рассказала зачем и как она все это делает.

Мароканский паттерн

По старой схеме:

1. взял калейдоскоп на 16 сегментов
2. засунул в него шум перлина
3. добавил генеративную палитру

Зеркальные орнаменты это прямо чит какой-то, как сделать что угодно красивым.

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

Глазастая композиция

По совету https://news.1rj.ru/str/mathimages сделал композицию симметричную по горизонтали, чтобы получились лица с глазами.

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

Дорогие подписчики, вам слово

И вот уже нас 300 на этом канале, спасибо за ваш интерес к графике, алгоритмам и моим мыслям про ИТ, это очень поддерживает, особенно когда мне трудно!

Расскажите в комментариях немного о себе, чем занимаетесь, о чем сами ведете канал и что полезного я тут еще могу для вас написать.

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

#видеозаписи #ТяжелыйПонедельник

Открываем новую видеозапись выступления:
Иван Дианов — Алгоритмическая графика: JS для дизайна и искусства

YouTube | VK Видео

Когда даже одна сфера это довольно трудно

Среди сайтов Awwwards довольно популярны лендинги с одной сферой, которая как полиэтиленовый пакет плавает в какой-то жидкости, подсвеченная мифическим студийным светом, светит гранями с качеством 4К и чтобы не тормозило. Короче говоря — Wobbling sphere. Я сделал подобных уже штуки три, если брать отметенные варианты то и все 10.

Казалось бы, всего одна сфера, буквально мешок из 30000 точек с шумом Перлина. Но ни один материал из Three.js даже близко не приближается к искомому результату. Приходится искать реализации с нужными эффектами самостоятельно, например, такие или такие.

Так как почти любой хороший производительный 3д эффект это редкое сочетание ограничений и математики, могу поделиться своими находками как я за полгода научился работать с референсами из чужой головы:

1. Было бы круто найти исходную картинку которую кидают как референс, вдруг она уже реализована или хотя бы можно найти как она называется чтобы уважаемые люди не иностранном форуме, часть из которых славяне, не засмеяли.

2. Chat GPT, Deepseek, Claude, etc. генерят нечто только на 20% отдаленно похожее на референс, а так как кривая качества экспоненциальна, то навайбкодить такое решение и продать его можно рублей за 10 максимум.

3. Истина в исходниках, больше нигде, только там содержатся все знания человечества. Потому надо загружать исходники сайтов с нужными эффектами на комп и натравливать на них нейросети с большим контекстным окном, чтобы они не дохли от обработки 10К+ строк кода, например такие есть в IDE Cursor.

4. Ну еще решает насмотренность, если в голове есть каталог всевозможных техник и эффектов и ты знаешь где их посмотреть, например, сфера с видео не вышла бы если бы не Паша с его демкой похожей сферы.

Очень трудно, короче.