Доброго времени суток, друзья!
На днях пересмотрел «Матрицу». Слушайте, до чего же классный фильм (это касается только первой части). В очередной раз обратил внимание на «падающие» строчки с иероглифами на ихних экранах. Задумался о том, как это можно реализовать… максимально простым способом (ибо лень). Вот что у меня получилось.
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()) Существует небольшая проблемка: время от времени колонки слипаются, отрисовываются почти вровень по горизонтали. Это влияет на восприятие: глаз цепляется за упорядоченность. Ощущается недостаток хаоса, что ли. Достойного решения пока не найдено.
Благодарю за внимание. Всех благ.
ссылка на оригинал статьи https://habr.com/ru/post/485404/
Добавить комментарий