Aderus
@Aderus

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

Здравствуйте! Я посмотрел исходный код и видно,что сделано на канве. Вопрос в другом. Как пишут слова или цифры не просто каким-то шрифтом, а кружочками или какими-то объектами. Типа звездами на черном фоне написать "404" и т.д.
Вот пример
Как такие вещи реализовывают? Библиотеки или можно и руками намутить?
  • Вопрос задан
  • 444 просмотра
Решения вопроса 1
Sanasol
@Sanasol Куратор тега JavaScript
нельзя просто так взять и загуглить ошибку
hotdot.pro/js/404.js

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

На выходе получаем эффектную и очень тяжелую хрень ;D
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
sfi0zy
@sfi0zy Куратор тега CSS
UI developer. Верстаю неверстаемое.
Алгоритм примерно такой:
- Берем обычный canvas, на нем что-то пишем или выводим картинку (в данном случае строго 2 цвета).
- Берем imageData у того, что получилось.
- Проходим по всем пикселям этой imageDatы с каким-то шагом, делаем объект "частица" с нужными координатами когда цвет соответствует определенному (если писали черным по белому - значит если цвет пикселя черный).
- Стираем надпись.
- Проходим по массиву частиц, рисуем небольшой круг (что угодно, но пусть будет круг) на месте с координатами этой частицы.
- PROFIT.

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

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

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