Доклад про генеративное исcкуство на TbilisiJS

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

видео: https://www.youtube.com/watch?v=JxBbe26uE-M
слайды: https://lekzd.github.io/presentations/generative_art_tbilisi/bundled/

Почему трудно быть Коротаевым?

Сегодня надо было перечислить все свои комьюнити где я что-то периодически делаю и все сразу стало понятно:

Я Саша, помогаю организовывать SPB-Frontend, BeerJS, TbilisiJS и еще я в программном комитете HolyJS.

Кто-нибудь хочет помочь?)

Клубок

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

Если отключить ноут от кабеля питания, он начинает слегка попискивать при рисовании)

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

Плавающие молекулы

Очередной раз задумывалось одно, но вышло совсем другое, главное найти красивое состояние, на котором можно остановиться

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

Пробуем вписаться в Codepen challenge

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

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

Генклуб, где, я многому научился, поставил мою прошлую работу на аватарку, приятно, спасибо им.

не знал что за это еще и платят 😁
круто будет посмотреть на работы

50$ криптой тому господину, который запилит самую крутую демосцену на тему https://reatom.dev/favicon.noscript

https://github.com/artalar/reatom/issues/1071

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

Что такое демосцена? Это аудиовизуальная абстракция или история сделанная с помощью кода! Преимущественно микроскопического размера. Можно потыкать тут https://nanogems.demozoo.org/. Крутой пример: https://youtu.be/4r1732c04aY

Reatom

пробую сделать демку по заказу из поста https://news.1rj.ru/str/korotaev_to_hard/98
минут за 20 накидал

работа продолжается...

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

Соединил наработки вместе

После репоста в сообществе @artalog получил массу подозрений в наркомании ценного фидбека и постарался улучшить демку.

Появилась идея, что все наработанное можно объединить в одну сцену: сначала будет хаос, затем его упорядочит Reatom, который потом распадется на цветы и обратно в хаос.

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

SDF или как сделана демка из этого поста

Signed Distance Fields (SDF) — это техника в шейдерах, позволяющая описывать формы с помощью функций, возвращающих расстояние до ближайшей поверхности объекта. Визуализация происходит путём вычисления расстояния для каждого пикселя и определения, находится ли он внутри или снаружи фигуры.

Наткнулся на крутую статью про это, там рисуют анимацию из Рика и Морти, пошагово: берем кружок, потом еще один, искривляем и вот у нас уже голова, далее рисуем остальную сову.

https://danielchasehooper.com/posts/code-animated-rick/

Туннель из 5 синусов

Как справедливо заметил @StrangerintheQ про туннель из логотипов Reatom: "я вижу тут sin sin sin", а их оказалось 5

В начале я сделал просто рендер колец, идущих друг за другом, было уже поздно, решил оставить работу как есть, но добавить туда немного ряби, так как с ней все выглядит лучше. И увлекся синусами настолько, что за 20 минут превратил кольца во что-то неузнаваемое, даже создатель Codepen оценил и запинил работу в тренды.

float ripple(vec4 p, float rad, float freq, float amp, float time) {
        return 
          sin((rad) * freq) * amp
          + sin(p.x * freq) * amp 
          + sin(p.y * freq) * amp
          + sin((p.z * 0.01) * freq) * amp
          + sin(time * 0.01) * amp
          ;
      }

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

Очередная серия Animations vs, теперь про кодинг

Как сказали в комментариях:

Episode 4 of the "I don't understand much of it but it looks amazing"

https://www.youtube.com/watch?v=EFmxPMdBqmU

Молнии и магнетизм

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

Чтобы это вообще хоть как-то успевало считаться за один кадр использую паттерн Spatial partitioning (пространственное разделение), о котором прочел довольно давно, не самый эффективный зато пишется в 10 строчек:

const getKey = (x, y) => `${grid(x, 100)},${grid(y, 100)}`
  
  const spatial = {}
  points.forEach((point, index) => {
    const key = getKey(point.x, point.y)
    
    if (!spatial[key]) {
      spatial[key] = [point]
    } else {
      spatial[key].push(point)
    }
  })

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

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