@Andreiyw
AnyKey, студент 4 курса

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

Есть приложение социального графа: vk.com/app5621091
Мне не известно, какие технологии, фреймворки, библиотеки, функции и т п могли быть использованы для задания такого эффекта.
Подскажите, пожалуйста 5adbe8603b198826665871.gif
  • Вопрос задан
  • 2325 просмотров
Решения вопроса 1
alsolovyev
@alsolovyev
А в чем проблема? Как Вы пытались решить эту проблему(написать в интернете "Решите мне задача" не считается)?

Разделите конечную цель на маленькие:
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. Логика точно такая же, только перфоманс будет в разы лучше + сможем избежать кучу проблем с картинками и тп...
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
profesor08
@profesor08
Ничего сложного. Сгенерируй какой-то граф (матрицу со связями), нарисуй его на канвасе, как угодно, хоть сеткой. Далее при движении мышки по канвасу, у тебя будут доступны ее координаты. Возми окружность радиусом 200 пикселей и проверяй, входят ли координаты точек в нее, если да, то на сколько близко они к центру, это и будет размер точки. Расстояние от одних координат до других = гипотенуза(x2 - x1, y2- y1)
Ответ написан
savostin
@savostin
Еще один программист
Вот тут поищите: https://d3-discovery.net/
Ответ написан
Комментировать
customtema
@customtema
arint.ru
технологии,

JavaScript

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

jQuery

функции

onmouseup
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы