Доброго времени суток, друзья!
На днях пересмотрел «Матрицу». Слушайте, до чего же классный фильм (это касается только первой части). В очередной раз обратил внимание на «падающие» строчки с иероглифами на ихних экранах (намеренно использовал слово «ихних» забавы ради). Задумался о том, как это можно реализовать… максимально простым способом (ибо лень). Вот что у меня получилось.
Welcome to the Matrix
Разметка выглядит так:
<body style="margin: 0; background: #000; overflow: hidden;">
<canvas></canvas>
</body>
Инициализируем холст, контекст, ширину и высоту холста. Делаем последние равными ширине и высоте окна браузера:
const C = document.querySelector("canvas"),
$ = C.getContext("2d"),
W = C.width = innerWidth,
H = C.height = innerHeight
Создаем строку с символами, которые будут использоваться для визуализации (не хочу иероглифы, хочу кириллицу!). Преобразуем данную строку в массив. Пробелы дают пустоты в колонках, с ними эффект интереснее:
const str = "А+Б0В-Г1Д=Е2Ё Ж3З И4Й К5Л М6Н О7П Р8С Т9У Ф!Х Ц?Ч Ш.ЩЪ,Ы Ь:ЭЮ;Я",
matrix = str.split('')
Определяем размер шрифта, количество колонок и создаем пустой массив. Этот массив мы будем использовать для определения координаты y:
let font = 11,
// количество колонок = ширина холста / размер шрифта
col = W / font,
arr = []
Заполняем пустой массив единицами по количеству колонок:
for(let i = 0; i < col; i++) arr[i] = 1
К рисованию все готово. Приступаем:
function draw() {
// определяем цвет фона
// такой цвет позволяет добиться эффекта постепенного затухания символов
$.fillStyle = "rgba(0, 0, 0, .05)"
// заливаем холст выбранный цветом
$.fillRect(0, 0, W, H)
// меняем цвет для шрифта
$.fillStyle = "#0f0"
// устанавливаем параметры шрифта
$.font = font + "px system-ui"
// рисуем символы
for (let i = 0; i < arr.length; i++) {
// выбираем случайный набор символов
let txt = matrix[Math.floor(Math.random() * matrix.length)]
// рисуем символы
// двигаемся вправо и вниз
// fillText(набор символов, координата x = значение i, умноженное на размер шрифта, координата y = значение arr, умноженное на размер шрифта)
$.fillText(txt, i * font, arr[i] * font)
// если "y" больше высоты холста или Math.random() выдает больше 0.975 (чем это значение меньше, тем больше будет пустот на экране), то поднимаемся наверх (обнуляем "y")
// это позволяет обеспечить разницу отрисовки отдельных колонок
if (arr[i] * font > H && Math.random() > 0.975) arr[i] = 0
// увеличиваем значение y
arr[i]++
}
}
Запускаем функцию рисования через каждые 123 миллисекунды (число произвольное):
setInterval(draw, 123)
Наконец, при изменении размеров окна делаем перезагрузку страницы (ибо лень):
window.addEventListener('resize', () => location.reload())
Результат можно посмотреть здесь.
Существует небольшая проблемка: время от времени колонки слипаются, отрисовываются почти вровень по горизонтали. Это влияет на восприятие: глаз цепляется за упорядоченность. Ощущается недостаток хаоса, что ли. Достойного решения пока не найдено.
Благодарю за внимание.
