Как стать автором
Обновить

Комментарии 40

Каждый уважающий себя программист обязан написать:


  • калькулятор
  • интерпретатор брейнфака
  • скринсейвер в стиле матрицы.

Справедливости ради, у автора поста итоговая картинка красивее, чем cmatrix.

Справедливости ради, у автора поста итоговая картинка красивее, чем cmatrix.
Наверное, из-за отсутствия поддержки полупрозрачных шрифтов в стандартных терминалах.
Ну шрифты не полупрозрачные. Просто цвет меняется от зелёного до чёрного. В cmatrix этого не реализовано. Хотя возможность есть.
Хотя возможность есть.
Количество цветов в терминалах обычно ограничено.
Раньше амбиции были выше и обычно замахивались сразу на написание операционной системы «операционной системы».
Значит мне осталось написать скринсейвер.
Когда-то я благодаря статье о реализации эффекта из «Матрицы» на PHP и попал на Хабр.
«Максимально простым способом» это заполнить пространство символами, определить градиенты для столбцов и «крутить палитру». Заодно и «слипание» не будет мешать.
Демку забыли воткнуть :)
Мне кажется в строке
$.fillStyle = "rgba(0, 0, 0, .5)"
нужно заменить прозрачность на .25 и сделать заполнение чуть плотнее, тогда выходит куда более похоже на оригинал.
немного ошибся, должно быть так $.fillStyle = «rgba(0, 0, 0, .05)»
а где гифка, чтобы результат посмотреть?
вкладка Result
добавил ссылку на Codepen
Получилось здорово. Раньше на C# делал реализацию.
Одно но:
строчки с иероглифами на ихних экранах

Такие «но» лучше отправлять через ctrl+enter.

Ждём реализацию на x86 в 128 байт.

и под DOS 3.1 на C# :)
Я по названию статьи ожидал, что речь о том как произвольное видео в реальном режиме времени преобразуется в матричный код.
image

В идеале, приложение под Андроид, которое картинку с камеры смартфона преобразует в реальном времени в матричный код для виртуальной реальности.
image
Читал, что самая и притом живая старая в мире торрент-раздача — это как раз раздача фильма «Матрица», целиком прогнанного через библиотеку, преобразующую видео в такой matrix-код.
Перенес весь код на локальную машину — не работает.
В 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>

либо <script src=«script.js» defer></script>, либо обернуть скрипт в window.onload = ( ) => { }, в противном случае скрипт не видит canvas
Здорово и очень просто — как надо! Благодарю!
пожалуйста
НЛО прилетело и опубликовало эту надпись здесь
Году в 2004-м, когда учился на первом курсе ССУЗа, тоже захотел такой скринсейвер, и нагуглил несколько вариантов. Вот самый на мой взгляд удачный, судя по свойствам файла — его написали ещё в 1999 году. Во времена XP она стояла у меня везде, потом как-то забил. Вот нашёл у себя на диске:
yadi.sk/d/4SaiFGcicgFJ1g
В Win7 работает, но довольно капризно, может сам собой отключиться (возможно, дело в дребезге мыши).

Позже на дисках Игромании мне попался .exe-установщик скринсэйвера от UselessCreation, который имел уже кучу настроек и фич: камера могла летать во все стороны и под всеми углами сквозь падающий код, настраивался цвет, скорость, размер, интенсивность падающего кода, был 3D-эффект, а самое крутое — эта заставка умела этим бегущим 3D-кодом как псевдографикой в цвете рисовать скриншоты сцен из фильмов, причём скриншот появлялся и исчезал плавно. Кому интересно — найдите эту заставку, не пожалеете, это ИМХО лучшее, что было сделано на эту тему. У себя найти сходу не могу, и не уверен, что оно запустится на Win7 и новее.
Вы поставили мне интересную задачу на вечер :)

Я захотел улучшить Ваш код, и вот что я сделал:

  • Добавил чуть больше настроек матрицы через константы;
  • Заменил русские буквы на латинскую письменность;
  • Уменьшил значение альфы для цвета, заполняющего бэкграунд при каждой отрисовке (по совету комментатора выше);
  • Добавил шанс появления символа на экране, убрав необходимость добавления пробелов в алфавит матрицы;
  • Всё таки придумал решение проблемы с этим странным горизонтальным «слипанием» :)


В моём решении этой проблемы я использовал функцию, которая создаёт кривую из случайных координат, по которой в канвасе и будут рисоваться буквы. Чтобы символы не всегда рисовались на координатах одной и той же кривой, я создал ещё одну константу — UPDATE_CURVE_INTERVAL. Каждый раз, когда вызывается функция отрисовки, она инкрементирует счётчик, тем самым заставляя кривую продолжать спускаться по координате Y. Если значение счётчика доходит до UPDATE_CURVE_INTERVAL, то счётчик обнуляется и создаётся новая кривая из случайных координат. Чем меньше значение этой константы, тем чаще будет создаваться новой кривая.

А вот результат всех этих изменений:

Кстати. Успел додумать следующую штуку: символы теперь рисуются, следуя за нажатым курсором.
Вот реализация:



P.S.: Извините за ошибки с отступами. Я трезв, просто редачил код одновременно и в блокноте, и на codepen, и на jsfiddle.
Не думал, что кого-то так сильно зацепит. Что сказать, потрудились на славу. Однако у Вас, на мой взгляд, проблема «недостатка хаоса» остается: все колонки обновляются одновременно, это заметно. В оригинале символы начинаются с самого верха и заканчиваются в самом низу, у Вас же «потоки символов» начинаются и заканчиваются в произвольных местах. Имеет место наложение символов друг на друга. В целом, реализация кажется мне слишком сложной для такой простой задачи)
НЛО прилетело и опубликовало эту надпись здесь

Я, конечно, смотрел этот фильм уже довольно давно, однако мне запомнилось, что код матрицы выглядит, как стекающие по стеклу капли воды. А буквы — это мокрые следы. В начале фильма даже был кадр, где это показывалось. Здесь я этого как-то не наблюдаю.

Чуть-чуть поменял код и теперь можно выводить не просто случайные символы, а слова из заданного словаря. В качестве словаря добавил ники моих друзей.
codepen.io/mozgosteb/pen/qBEwEbQ
Автору спасибо за исходники!
Когда то делал «хаккерский» инструмент для игр. Само собой не мог обойти стороной экран из матрицы, где любой более-менее проверенный программист увидит блондинку в красном.

Подход честно где-то подсмотрел, сама мысль, что затухание можно сделать просто наложением полупрозрачности на весь экран меня поразила, потому что уже успел продумать несколько других вариантов, возможно более красивых, но переусложненных.

Если кому интерсно, вот ссылка: tentaculus.ru/hackerman
Вход в матрицу по нажатию [Caps Lock].
Зарегистрируйтесь на Хабре , чтобы оставить комментарий

Публикации

Истории