Реализуем визуальный эффект из фильма «Матрица»

Реализуем визуальный эффект из фильма «Матрица» - 1

Доброго времени суток, друзья!

На днях пересмотрел «Матрицу». Слушайте, до чего же классный фильм (это касается только первой части). В очередной раз обратил внимание на «падающие» строчки с иероглифами на ихних экранах. Задумался о том, как это можно реализовать… максимально простым способом (ибо лень). Вот что у меня получилось.

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, .5)"

  // заливаем холст выбранный цветом
  $.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())

Существует небольшая проблемка: время от времени колонки слипаются, отрисовываются почти вровень по горизонтали. Это влияет на восприятие: глаз цепляется за упорядоченность. Ощущается недостаток хаоса, что ли. Достойного решения пока не найдено.

Благодарю за внимание. Всех благ.

Автор: Harry Heman

Источник ^[1]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/344415

Ссылки в тексте:

[1] Источник: https://habr.com/ru/post/485404/?utm_source=habrahabr&utm_medium=rss&utm_campaign=485404

Нажмите здесь для печати.