Текст как в матрице
Текстовый дождь, как в «Матрице»
Приятная кодовая безделушка.
Недавно мы делали проект про полёт в космос в 3D, где использовали для рисования библиотеку p5 и принципы ООП. Тогда мы ограничились одним классом и объектами на основе этого класса.
Сегодня будет интереснее — мы сделаем два класса, причём объекты одного класса будут состоять из объектов другого класса. Это нужно, чтобы воссоздать эффект «Матрицы»: когда буквы одновременно и падают, и сменяются.
Что делаем
Тучку, из которой падают буквы, как в фильме «Матрица»:
Зачем мы это сделаем? Ради красоты, ради искусства, ради JavaScript.
Последовательность действий будет такая:
Обратите внимание, что тучка и символы — это разные сущности, их можно спокойно использовать отдельно друг от друга.
Подготовка страницы
Используем для проекта стандартный HTML-шаблон.
Чтобы символы выглядели красиво и мы могли ими управлять, подключим стили Font Awesome — это такой набор правил по оформлению шрифтов.
Настраиваем стили
Сначала сделаем то же самое, что и в проекте со звёздами — разрешим задавать размеры всех элементов в разных единицах одновременно, обнулим отступы и растянем страницу на всё окно браузера.
Затем зададим общие свойства для той области, где будет нарисована тучка — размеры и положение. Отдельно пропишем свойство z-index — оно виртуально приподнимет слой с тучкой выше остальных, чтобы тучка закрывала те символы, которые появились внутри неё, но которым ещё рано появляться.
Последнее, что сделаем здесь, — настроим саму область, где будут видны падающие буквы. Всё это пока делается чистым CSS, никакого программирования.
Рисуем тучку
Чтобы нарисовать тучку, используем теги и
. Первый тэг говорит браузеру, что в выбранном блоке будем рисовать векторную графику.
👉 Векторная графика состоит не из отдельных пикселей, а из элементов — линий, прямоугольников, кругов и прочих геометрических фигур. Эти фигуры можно объединять друг с другом, рисовать их любого размера и цвета и комбинировать как угодно, чтобы получить нужный рисунок. Подробно мы это разобрали в отдельной статье про графику.
рисует линию по заданным правилам. Вкратце эти правила можно описать так:
У нас ещё будет отдельная статья с разбором, как работает SVG, а пока просто используем готовый код:
Что такое объекты, классы, методы и конструкторы?
Далее мы будем использовать понятия «объект», «метод», «класс» и «конструктор». Это базовые понятия ООП. Если хотите углубиться — читайте наш цикл, а пока вот основные положения:
Объект — это «коробка», в которой могут лежать данные и действия. В нашем случае объектами будут отдельные сменяющиеся буквы и «потоки» из этих букв. Объекты можно вкладывать в объекты.
Класс — это «чертёж», по которому наша программа может изготовить много одинаковых объектов, как на конвейере. В нашем случае нам нужно, чтобы программа рисовала сотни букв в десятках потоков, и изготавливать их мы будем не вручную, а с помощью класса.
Конструктор — это действие, которое совершает программа при создании объекта. Без конструктора объект просто висел бы в памяти, а с конструктором он сразу при создании будет выполнять какое-то действие. В нашем случае конструктор будет у класса «Поток», чтобы при создании такого потока в него сразу добавлялось несколько сменяющихся букв.
Готовим основной скрипт
Вся дождевая магия будет происходить в отдельном скрипте, который мы напишем после кода с тучкой. Чтобы рисовать было проще, подключим библиотеку p5 и пропишем основные переменные для скрипта:
Проектируем поведение символов
Чтобы не прописывать поведение для каждого символа в отдельности, а задать общие правила для всех, сделаем класс Symbol. Каждый объект, созданный на основе этого класса, будет вести себя так, как написано в классе. Это даст нам предсказуемое поведение для каждого символа и сократит количество кода.
В конструкторе класса мы пропишем начальные координаты для символа, его скорость, а также смену символа через некоторое время, чтобы получить эффект как в «Матрице». Чтобы все символы не обновлялись одновременно, используем в конструкторе генератор случайных чисел — он выберет случайное время обновления для каждого нового символа.
Также сделаем метод rain() — он будет отвечать за падение символа вниз, как капля дождя. Логика простая: если символ ещё не улетел за край, сдвигаем его вниз на значение скорости.
Собираем символы в потоки
Следующий шаг — собрать символы в потоки, чтобы они красиво падали из тучки. Поток — это от 2 до 5 символов, падающих друг за другом. При этом каждый символ независимо от других меняется во время падения, потому что мы прописали это в классе символов.
Конструктор просто создаёт массив случайного размера, а метод generateSymbols(x,y) как раз и наполнит этот массив нужными символами. При этом каждый символ — это объект класса Symbol, свойство которых мы написали выше.
Отдельный метод render() будет отвечать за отрисовку потока. Обратите внимание — внутри этого метода мы вызываем метод из другого класса, который отвечает за падение символов.
Запуск
В проекте со звёздами мы выяснили, что для запуска и работы библиотеки p5 используются две функции — setup() для подготовки к запуску и draw(), которая по кругу выполняет свой код.
Для подготовки нам нужно создать холст, где будем рисовать падающие буквы и сформировать потоки. Потоки будем делать так:
Для анимации в функции draw() мы будем делать всего две вещи — постоянно очищать фон и отрисовывать потоки.
Можно скопировать и запустить у себя готовый код, а можно посмотреть на тучку на странице проекта.
Что дальше
Будем осваивать SVG-рисование в браузере — рисовать всякие классные и красивые штуки.
Реализуем визуальный эффект из фильма «Матрица»
Доброго времени суток, друзья!
На днях пересмотрел «Матрицу». Слушайте, до чего же классный фильм (это касается только первой части). В очередной раз обратил внимание на «падающие» строчки с иероглифами на ихних экранах (намеренно использовал слово «ихних» забавы ради). Задумался о том, как это можно реализовать… максимально простым способом (ибо лень). Вот что у меня получилось.
Welcome to the Matrix
Разметка выглядит так:
Инициализируем холст, контекст, ширину и высоту холста. Делаем последние равными ширине и высоте окна браузера:
Создаем строку с символами, которые будут использоваться для визуализации (не хочу иероглифы, хочу кириллицу!). Преобразуем данную строку в массив. Пробелы дают пустоты в колонках, с ними эффект интереснее:
Определяем размер шрифта, количество колонок и создаем пустой массив. Этот массив мы будем использовать для определения координаты y:
Заполняем пустой массив единицами по количеству колонок:
К рисованию все готово. Приступаем:
Запускаем функцию рисования через каждые 123 миллисекунды (число произвольное):
Наконец, при изменении размеров окна делаем перезагрузку страницы (ибо лень):
Результат можно посмотреть здесь.
Существует небольшая проблемка: время от времени колонки слипаются, отрисовываются почти вровень по горизонтали. Это влияет на восприятие: глаз цепляется за упорядоченность. Ощущается недостаток хаоса, что ли. Достойного решения пока не найдено.
Текст как в матрице
Windows Blog запись закреплена
Создаем матрицу в блокноте
Откройте блокнот и скопируйте туда этот текст:
setlocal enabledelayedexpansion
:: Отключаем вывод.
echo off
:: Задаём заголовок окошка.
title It’s Matrix
color 02
:: Отчищаем экран командной строки.
cls
:: Ставим метку для создания замкнутого цикла.
:prodolgit
:: Задаём цикл со сменой цветов в случайном порядке, но в заданном диапазое.
set stroka=
for /l %%i in (0,1,78) do (
set /a vremenno=!random!%%2
set stroka=!stroka!!vremenno!
)
set /a generate=!random!%
if %generate%==0 (color 0A) else (color 02)
:: Выводим матрицу на экран.
echo %stroka%
:: Переходим по метке.
goto prodolgit
Файл->сохранить как->тип файла(все файлы)->имя файлы->matrix.bat
Можете поэкспериментировать: если в строке color ввести не 02 (кстати, можно и просто 2), а 03 (или 3), то на черном фоне побегут не зеленые, а голубые цифры; 04 (4) – красные; 05 (5) – сиреневые; 06 (6) – желтые; 07 (7) – белые; 08 (8) – серые; 09 (9) – синие; 10 – черные цифры на синем фоне; 11 – белые цифры на голубом фоне; 12 – желтые цифры на синем фоне; … 14 – красные цифры на синем фоне; …
Рисуем код из «Матрицы» на PHP
Однажды мне пришла в голову идея сделать динамически создаваемый фон для блога в виде пресловутого кода из фильма «Матрица». После убийства вечера и половины ночи я-таки достиг желаемого результата, и решил поделиться им с народом. К сожалению, я не нашёл подобной реализации, а иметь динамически создаваемую «матрицу» как фон бложика таки хочется.
Итак, пишем генератор кода «Матрицы» на PHP с использованием библиотеки gd.
Итак, поставлены следующие требования к генерируемой картинке:
1. Столбики кода не должны быть равны по длине, длина должна выбираться случайно
2. Яркость цвета должна нарастать сверху вниз
3. Расположение столбиков должно быть случайным, но они не должны налезать друг на друга
4. Полученная картинка не должна кэшироваться браузерами, дабы при каждом обновлении получался новый код
5. Код не должен улетать за пределы картинки.
Приступим, собственно, к генерации картинки.
Для начала надо придумать, что будет выступать в роли элементов кода. В «Матрице» использовались как цифры, так и кана (слоговая азбука японского языка). Последняя выглядят более эффектно, следовательно, её и возьмём.
Создадим функцию getJapanSym(), возвращающую HTML-Entity код (его использует функция imagettftext(), но о ней позже).
В Unicode кана расположена в диапазоне кодов от 0x3040 до 0x30FF. Из этого диапазона и требуется брать случайный код символа. В результате получаем вот такую функцию:
Далее нам требуется отрисовать собственно картинку. Давайте по порядку.
Первым делом нам нужно нарисовать столбик с каной с заданным количеством знаков. Для отрисовки будем использовать упомянутую ранее функцию imagettftext() из библиотеки gd. Более того, цвет каждого символа должен отличаться от предыдущего, так что простым \n тут не обойтись, придётся писать целый цикл.
Саму кану можно найти в шрифте Arial Unicode MS, который мы, собственно, и используем.
Функция для рисования каны в столбик выглядит так:
Для удобочитаемости и комментирования каждый параметр вынесен на отдельную строку.
Итак, теперь нам нужно нарисовать несколько таких столбиков, чтобы получился полноценный «матричный» код. Думаю, здесь потребуется меньше разъяснений, и хватит кода с комментариями.
В результате получаем вот такое вот изображение:
Можете пообновлять страничку, каждый раз скрипт выдаст новый код
К сожалению, браузер Firefox не умеет правильно отображать фон после обновления, и получается слияние двух версий, остальные же браузеры подобным не страдают.