Как делают такие вещи?

Question

[Айдар]

Здравствуйте! Я посмотрел исходный код и видно,что сделано на канве. Вопрос в другом. Как пишут слова или цифры не просто каким-то шрифтом, а кружочками или какими-то объектами. Типа звездами на черном фоне написать "404" и т.д.
Вот пример
Как такие вещи реализовывают? Библиотеки или можно и руками намутить?

Comments

[Ярослав Иванов]

Ctrl + S

[Kovalsky]

Прогоните это через какой-нибудь js beautifier, увидите что используются Three.js, Tween.js и прямые руки, то есть наиболее вероятно что непосредственно алгоритм отрисовывающий данную конкретную анимацию написан разработчиками компании hotdot.

[twobomb]

Если прямые руки, то можно и намутить.А библиотек для такой фигни хватает

Answer 1

[Александр Аксентьев]

hotdot.pro/js/404.js

слишком сложно чтобы даже думать о том как это сделать :D
threejs и свой код.

На выходе получаем эффектную и очень тяжелую хрень ;D

Answer 2

[Ivan Bogachev]

Алгоритм примерно такой:
- Берем обычный canvas, на нем что-то пишем или выводим картинку (в данном случае строго 2 цвета).
- Берем imageData у того, что получилось.
- Проходим по всем пикселям этой imageDatы с каким-то шагом, делаем объект "частица" с нужными координатами когда цвет соответствует определенному (если писали черным по белому - значит если цвет пикселя черный).
- Стираем надпись.
- Проходим по массиву частиц, рисуем небольшой круг (что угодно, но пусть будет круг) на месте с координатами этой частицы.
- PROFIT.

По вкусу к частице добавляется параметр "цвет" (лучше полупрозрачный) и "размер". Можно сделать функцию обновления, которая будет менять эти параметры и координаты, requestAnimationFrame нам в помощь. Координаты частицы меняются по определенному закону в каком-то радиусе от ее изначального положения, можно взять параметрическое уравнение любой замкнутой кривой и использовать его для вычисления отклонения частицы от ее изначального положения.