Как сделать такое приложение?

Question

[Андрей]

Есть приложение социального графа: vk.com/app5621091
Мне не известно, какие технологии, фреймворки, библиотеки, функции и т п могли быть использованы для задания такого эффекта.
Подскажите, пожалуйста

Comments

[Griboks]

Я бы предложил вам самим написать это с нуля. Не такая уж и сложная задачка.

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

[Максим Осадчий]

https://m.habrahabr.ru/post/144758/

Answer 1

[Aleksey Solovyev]

А в чем проблема? Как Вы пытались решить эту проблему(написать в интернете "Решите мне задача" не считается)?

Разделите конечную цель на маленькие:
1. Создаете/рисуете точки
2. Добавляете обработчик движения мыши
3. Определяете дистанцию от мышки до точки ( теорема Пифагора )
4. Увеличиваете/уменьшаете значение радиуса точки в зависимости от положения мыши

Все! Самое сложное это теорема Пифагора(5-6 класс).
Остается все разбросать по методам....

Вот "наговнокодил" пример на коленках(использовал class поэтому поддержку браузера смотрите сами): https://codepen.io/janeRivas/full/NMGBvG/ (если лагает у Вас, то удалите функцию на строке 116 и 120 или поменяйте кол. точек на строке 18 )

Если нужно уместить все точки в какой-то фигуре(букве), то поменяйте функцию Rand, добавив в нее новые условия.

ps если как-то по-другому надо соединить линии между собой, то у нас на каждом кадре есть координаты точек this.pos.x и this.pos.y. Ну и меняй метод lineTo как тебе надо...

psps наверно начинать надо с простого, но если делать нормально, то я бы делал на three.js или pixi.js. Логика точно такая же, только перфоманс будет в разы лучше + сможем избежать кучу проблем с картинками и тп...

Comments

[Minu]

Минут 10 залипал на пример. Балдёж)

Answer 2

[profesor08]

Ничего сложного. Сгенерируй какой-то граф (матрицу со связями), нарисуй его на канвасе, как угодно, хоть сеткой. Далее при движении мышки по канвасу, у тебя будут доступны ее координаты. Возми окружность радиусом 200 пикселей и проверяй, входят ли координаты точек в нее, если да, то на сколько близко они к центру, это и будет размер точки. Расстояние от одних координат до других = гипотенуза(x2 - x1, y2- y1)

Comments

[xmoonlight]

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

[Zhainar]

xmoonlight, переключение классов css c transition? не подойдет?

[Alexander]

Походу чтобы работать на канвасе, нужно знать геометрию ))

[xmoonlight]

Zhainar, там именно в зависимости от центра круга (это курсор "мыши") соседние имеют пропорциональные радиусы - чем дальше от центра, тем меньше радиус. Следить за расстоянием объектов от курсора "мыши" на CSS - не получится. Здесь только js и канвас.

[xmoonlight]

Alexander, минимум - это надо знать!

Answer 3

[Сергей Савостин]

Вот тут поищите: https://d3-discovery.net/

Answer 4

[Артем Спиридонов]

технологии,

JavaScript

фреймворки, библиотеки,

jQuery

функции

onmouseup