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

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

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

Luma + Three.js = 1 апрельский пост

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

Luma WebGL Library — это библиотека которая позволяет вставить 3д снимок из приложения Luma в сцену на Three.js вообще без каких-либо приседаний.

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

https://lekzd.github.io/demo/luma/dancing_castle.html