Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 40
Каждый уважающий себя программист обязан написать:
- калькулятор
- интерпретатор брейнфака
- скринсейвер в стиле матрицы.
Справедливости ради, у автора поста итоговая картинка красивее, чем cmatrix.
Справедливости ради, у автора поста итоговая картинка красивее, чем cmatrix.Наверное, из-за отсутствия поддержки полупрозрачных шрифтов в стандартных терминалах.
Ну шрифты не полупрозрачные. Просто цвет меняется от зелёного до чёрного. В cmatrix этого не реализовано. Хотя возможность есть.
Хотя возможность есть.Количество цветов в терминалах обычно ограничено.
Да ограничено, но не восемью базовыми цветами, а как минимум 256.
Как пример:
misc.flogisoft.com/bash/tip_colors_and_formatting
Как пример:
misc.flogisoft.com/bash/tip_colors_and_formatting
Раньше амбиции были выше и обычно замахивались сразу на написание операционной системы «операционной системы».
Значит мне осталось написать скринсейвер.
Когда-то я благодаря статье о реализации эффекта из «Матрицы» на PHP и попал на Хабр.
«Максимально простым способом» это заполнить пространство символами, определить градиенты для столбцов и «крутить палитру». Заодно и «слипание» не будет мешать.
Демку забыли воткнуть :)
а где гифка, чтобы результат посмотреть?
Получилось здорово. Раньше на C# делал реализацию.
Одно но:
Одно но:
строчки с иероглифами на ихних экранах
Ждём реализацию на x86 в 128 байт.
Я по названию статьи ожидал, что речь о том как произвольное видео в реальном режиме времени преобразуется в матричный код.
В идеале, приложение под Андроид, которое картинку с камеры смартфона преобразует в реальном времени в матричный код для виртуальной реальности.
В идеале, приложение под Андроид, которое картинку с камеры смартфона преобразует в реальном времени в матричный код для виртуальной реальности.
Перенес весь код на локальную машину — не работает.
В jsFiddle.net всё работает.
:(
В jsFiddle.net всё работает.
:(
добавил ссылку на Codepen. запустил «на локальной машине», все ок
Заработало.
Блок
Итоговая программа
Блок
scriptнадо было поместить ниже секции
body
Итоговая программа
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>Matrix</title>
</head>
<body style="margin: 0; background: #000; overflow: hidden;">
<canvas></canvas>
</body>
<script>
const C = document.querySelector("canvas"),
$ = C.getContext("2d"),
W = (C.width = window.innerWidth),
H = (C.height = window.innerHeight);
const str = "А+Б0В-Г1Д=Е2Ё Ж3З И4Й К5Л М6Н О7П Р8С Т9У Ф!Х Ц?Ч Ш.ЩЪ,Ы Ь:ЭЮ;Я",
matrix = str.split("");
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(txt, i * font, arr[i] * font);
if (arr[i] * font > H && Math.random() > 0.975) arr[i] = 0;
arr[i]++;
}
}
setInterval(draw, 123);
window.addEventListener("resize", () => location.reload());
</script>
</html>
Здорово и очень просто — как надо! Благодарю!
Году в 2004-м, когда учился на первом курсе ССУЗа, тоже захотел такой скринсейвер, и нагуглил несколько вариантов. Вот самый на мой взгляд удачный, судя по свойствам файла — его написали ещё в 1999 году. Во времена XP она стояла у меня везде, потом как-то забил. Вот нашёл у себя на диске:
yadi.sk/d/4SaiFGcicgFJ1g
В Win7 работает, но довольно капризно, может сам собой отключиться (возможно, дело в дребезге мыши).
Позже на дисках Игромании мне попался .exe-установщик скринсэйвера от UselessCreation, который имел уже кучу настроек и фич: камера могла летать во все стороны и под всеми углами сквозь падающий код, настраивался цвет, скорость, размер, интенсивность падающего кода, был 3D-эффект, а самое крутое — эта заставка умела этим бегущим 3D-кодом как псевдографикой в цвете рисовать скриншоты сцен из фильмов, причём скриншот появлялся и исчезал плавно. Кому интересно — найдите эту заставку, не пожалеете, это ИМХО лучшее, что было сделано на эту тему. У себя найти сходу не могу, и не уверен, что оно запустится на Win7 и новее.
yadi.sk/d/4SaiFGcicgFJ1g
В Win7 работает, но довольно капризно, может сам собой отключиться (возможно, дело в дребезге мыши).
Позже на дисках Игромании мне попался .exe-установщик скринсэйвера от UselessCreation, который имел уже кучу настроек и фич: камера могла летать во все стороны и под всеми углами сквозь падающий код, настраивался цвет, скорость, размер, интенсивность падающего кода, был 3D-эффект, а самое крутое — эта заставка умела этим бегущим 3D-кодом как псевдографикой в цвете рисовать скриншоты сцен из фильмов, причём скриншот появлялся и исчезал плавно. Кому интересно — найдите эту заставку, не пожалеете, это ИМХО лучшее, что было сделано на эту тему. У себя найти сходу не могу, и не уверен, что оно запустится на Win7 и новее.
Вы поставили мне интересную задачу на вечер :)
Я захотел улучшить Ваш код, и вот что я сделал:
В моём решении этой проблемы я использовал функцию, которая создаёт кривую из случайных координат, по которой в канвасе и будут рисоваться буквы. Чтобы символы не всегда рисовались на координатах одной и той же кривой, я создал ещё одну константу — UPDATE_CURVE_INTERVAL. Каждый раз, когда вызывается функция отрисовки, она инкрементирует счётчик, тем самым заставляя кривую продолжать спускаться по координате Y. Если значение счётчика доходит до UPDATE_CURVE_INTERVAL, то счётчик обнуляется и создаётся новая кривая из случайных координат. Чем меньше значение этой константы, тем чаще будет создаваться новой кривая.
А вот результат всех этих изменений:
Я захотел улучшить Ваш код, и вот что я сделал:
- Добавил чуть больше настроек матрицы через константы;
- Заменил русские буквы на латинскую письменность;
- Уменьшил значение альфы для цвета, заполняющего бэкграунд при каждой отрисовке (по совету комментатора выше);
- Добавил шанс появления символа на экране, убрав необходимость добавления пробелов в алфавит матрицы;
- Всё таки придумал решение проблемы с этим странным горизонтальным «слипанием» :)
В моём решении этой проблемы я использовал функцию, которая создаёт кривую из случайных координат, по которой в канвасе и будут рисоваться буквы. Чтобы символы не всегда рисовались на координатах одной и той же кривой, я создал ещё одну константу — UPDATE_CURVE_INTERVAL. Каждый раз, когда вызывается функция отрисовки, она инкрементирует счётчик, тем самым заставляя кривую продолжать спускаться по координате Y. Если значение счётчика доходит до UPDATE_CURVE_INTERVAL, то счётчик обнуляется и создаётся новая кривая из случайных координат. Чем меньше значение этой константы, тем чаще будет создаваться новой кривая.
А вот результат всех этих изменений:
Кстати. Успел додумать следующую штуку: символы теперь рисуются, следуя за нажатым курсором.
Вот реализация:
P.S.: Извините за ошибки с отступами. Я трезв, просто редачил код одновременно и в блокноте, и на codepen, и на jsfiddle.
Вот реализация:
P.S.: Извините за ошибки с отступами. Я трезв, просто редачил код одновременно и в блокноте, и на codepen, и на jsfiddle.
Не думал, что кого-то так сильно зацепит. Что сказать, потрудились на славу. Однако у Вас, на мой взгляд, проблема «недостатка хаоса» остается: все колонки обновляются одновременно, это заметно. В оригинале символы начинаются с самого верха и заканчиваются в самом низу, у Вас же «потоки символов» начинаются и заканчиваются в произвольных местах. Имеет место наложение символов друг на друга. В целом, реализация кажется мне слишком сложной для такой простой задачи)
Я, конечно, смотрел этот фильм уже довольно давно, однако мне запомнилось, что код матрицы выглядит, как стекающие по стеклу капли воды. А буквы — это мокрые следы. В начале фильма даже был кадр, где это показывалось. Здесь я этого как-то не наблюдаю.
Думаю, что во избежании «слипания» нужно использовать requestAnimationFrame.
codepen.io/sswebcoder/pen/WNbmKZv
codepen.io/sswebcoder/pen/WNbmKZv
Чуть-чуть поменял код и теперь можно выводить не просто случайные символы, а слова из заданного словаря. В качестве словаря добавил ники моих друзей.
codepen.io/mozgosteb/pen/qBEwEbQ
Автору спасибо за исходники!
codepen.io/mozgosteb/pen/qBEwEbQ
Автору спасибо за исходники!
Когда то делал «хаккерский» инструмент для игр. Само собой не мог обойти стороной экран из матрицы, где любой более-менее проверенный программист увидит блондинку в красном.
Подход честно где-то подсмотрел, сама мысль, что затухание можно сделать просто наложением полупрозрачности на весь экран меня поразила, потому что уже успел продумать несколько других вариантов, возможно более красивых, но переусложненных.
Если кому интерсно, вот ссылка: tentaculus.ru/hackerman
Вход в матрицу по нажатию [Caps Lock].
Подход честно где-то подсмотрел, сама мысль, что затухание можно сделать просто наложением полупрозрачности на весь экран меня поразила, потому что уже успел продумать несколько других вариантов, возможно более красивых, но переусложненных.
Если кому интерсно, вот ссылка: tentaculus.ru/hackerman
Вход в матрицу по нажатию [Caps Lock].
Помнится, первый символ был более светло-зелёным.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Реализуем визуальный эффект из фильма «Матрица»