как создать эффект сетки реагирующей на мышь по примеру сайта?

#javascript #анимация #canvas #background #webgl

Всем привет. Подскажите, как реализовать подобный эффект: сетку, реагирующую на наведение
мыши, как это сделано здесь уже второй раз встречаю подобное, но реализации, логично,
никто не раскрывает. Максимально приближенное - это либа particles.js, но то ли у меня
не хватает скиллов всё грамотно настроить, то ли это немного другое. CodePen уже облазил
весь, есть схожее тут codepen.io/soulwire/pen/Ffvlo, но там частицы не полностью восстанавливают
первоначальную структуру после размазывания их мышью - остаётся след. Буду благодарен
за подсказки, да и другим может пригодиться.



на гифке плохо видно, но точки соединены линиями в сетку
    

Ответы

Ответ 1

Реализовал нечто похожее на WebGL, при помощи вершинного шейдера

ps: неплохо бы прикрутить какую нибудь функцию сглаживания к значению burst. 

UPD: убрал шум, там больше похоже на эффект по ссылке, однако чтобы сделать эффект
рисования, это уже будет не 100 строчек..

самая актуальна версия тут: https://codepen.io/strangerintheq/pen/xoZeGQ