Animacja deszczu kodu Matrix
Generuj ikoniczną animację deszczu kodu Matrix (zielone znaki spływające w dół). Canvas JS lub CSS. Konfiguruj prędkość i kolory.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Deszcz kodu Matrix</title>
<style>body{margin:0;padding:24px;background:#000000;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;} .wrap{width:800px;max-width:100%;height:450px;border-radius:18px;overflow:hidden;} canvas{display:block;width:100%;height:100%;} </style>
</head>
<body>
<div class="wrap"><canvas id="matrix"></canvas></div>
<script>(function(){
var cfg = {"charset":"アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ","width":800,"height":450,"fontSize":16,"speed":35,"fade":0.08000000000000000166533453693773481063544750213623046875,"textColor":"#00ff66","bgColor":"#000000","glow":true,"glowStrength":16,"fullpage":false};
var canvas = document.getElementById("matrix");
var ctx = canvas.getContext("2d");
var dpr = window.devicePixelRatio || 1;
var cols = 0; var drops = [];
function rgbFromHex(hex){ return [parseInt(hex.slice(1,3),16), parseInt(hex.slice(3,5),16), parseInt(hex.slice(5,7),16)]; }
function resize(){
var rect = canvas.getBoundingClientRect();
canvas.width = Math.floor(rect.width * dpr);
canvas.height = Math.floor(rect.height * dpr);
ctx.setTransform(dpr,0,0,dpr,0,0);
cols = Math.max(1, Math.floor(rect.width / cfg.fontSize));
drops = new Array(cols).fill(1);
}
function pickChar(){ return cfg.charset.charAt(Math.floor(Math.random()*cfg.charset.length)); }
function draw(){
var rect = canvas.getBoundingClientRect();
var rgb = rgbFromHex(cfg.bgColor);
ctx.fillStyle = "rgba("+rgb[0]+","+rgb[1]+","+rgb[2]+","+cfg.fade+")";
ctx.fillRect(0,0,rect.width,rect.height);
ctx.font = cfg.fontSize + "px monospace";
ctx.fillStyle = cfg.textColor;
if(cfg.glow){ ctx.shadowColor = cfg.textColor; ctx.shadowBlur = cfg.glowStrength; } else { ctx.shadowBlur = 0; }
for(var i=0;i<drops.length;i++){
ctx.fillText(pickChar(), i*cfg.fontSize, drops[i]*cfg.fontSize);
if(drops[i]*cfg.fontSize > rect.height && Math.random()>0.975) drops[i] = 0;
drops[i]++;
}
}
resize(); window.addEventListener("resize", resize); setInterval(draw, cfg.speed);
})();</script>
</body></html>
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćAnimacja deszczu kodu Matrix — efekt kaskadowego kodu
Animacja deszczu kodu Matrix to interaktywna wizualizacja słynnego efektu "cyfrowego deszczu" z serii filmów Matrix. Obserwuj kaskadujące kolumny znaków na czarnym tle — dokładnie tak, jak w kultowych scenach otwarcia filmów Wachowskich.
Skąd pochodzi efekt deszczu kodu?
Efekt "deszczu kodu" (ang. digital rain, Matrix code) po raz pierwszy pojawił się w filmie "Matrix" (1999) w reżyserii rodzeństwa Wachowskich jako wizualna reprezentacja "Matrixa" — symulowanej rzeczywistości. Oryginalne animacje filmowe zostały stworzone przez Simona Whiteley'a, który inspirował się japońską kulturą — znaki w filmie to odbicia znaków z gotowanej japońskiej sushi na tablicy (podobno od przepisu żony). Efekt stał się jednym z najbardziej rozpoznawalnych elementów estetyki cyberpunk i hakerskiej popkultury.
Jak działa animacja?
Animacja jest zaimplementowana w JavaScript z użyciem Canvas API. Algorytm: definiuje kolumny znaków na całej szerokości ekranu, każda kolumna ma niezależną pozycję Y i losową prędkość, znaki są losowo wybierane z zestawu (katakana, cyfry, litery), nowe znaki pojawiają się na szczycie z jasno-zielonym kolorem ("głowa"), starsze znaki stopniowo bledną do ciemnej zieleni, po osiągnięciu dołu kolumna resetuje się losowo. Efekt jest renderowany na znaczniku <canvas> w pętli requestAnimationFrame.
Personalizacja animacji
Możesz dostosować: zestaw używanych znaków (katakana, ascii, cyfry, custom), szybkość spadania kolumn, gęstość kolumn, kolor (klasyczna zieleń, niebieski, czerwony lub własny), rozmiar czcionki oraz efekt głębi (różne odcienie dla pierwszego i tła). Animacja działa w trybie fullscreen — idealna jako wygaszacz ekranu lub tło podczas prezentacji.
Implementacja własnej animacji Matrix
Efekt jest łatwy do zaimplementowania samodzielnie w JavaScript: potrzebujesz canvas, tablicy pozycji Y dla każdej kolumny i funkcji rysującej znaki z fadingiem. Kod zajmuje ok. 30–50 linii i jest świetnym projektem dla uczących się programowania grafiki. Nasz generator pozwala eksperymentować z parametrami bez pisania kodu.
Najczęściej zadawane pytania
Czy animacja Matrix zużywa dużo zasobów CPU?
Animacja jest zoptymalizowana — używa requestAnimationFrame (synchronizuje się z odświeżaniem monitora) i Canvas 2D (akceleracja sprzętowa w nowoczesnych przeglądarkach). Na typowym komputerze zużywa 2–5% CPU. Dla słabszych urządzeń możesz zmniejszyć liczbę kolumn lub prędkość animacji.
Jak zapisać animację Matrix jako wideo lub GIF?
W Chrome możesz użyć Screen Recorder (Ctrl+Shift+I → Recording). Alternatywnie narzędzia jak OBS Studio, LICEcap (GIF) lub ffmpeg pozwalają nagrać animację canvas. Programowo można użyć MediaRecorder API do nagrania canvas stream: canvas.captureStream(30) zwraca strumień wideo.
Jakie znaki są używane w oryginalnym efekcie Matrix?
W oryginale filmowym użyto mieszanki katakany (japońskiego syllabary — ァ, カ, サ, タ...), cyfr i lustrzanych liter łacińskich. Whiteley dosłownie skanował znaki z japońskich receptur sushi. Nasz generator domyślnie używa katakany, ale można przełączyć na ASCII lub cyfry.
Czy mogę użyć efektu Matrix na swojej stronie internetowej?
Tak — efekt Matrix jest wolny do użycia. Implementacja w canvas/JS jest dostępna na GitHub (wiele wariantów) i może być wbudowana jako tło, element dekoracyjny lub interaktywna sekcja strony. Zadbaj o czytelność — ciemny tekst na animowanym tle jest trudny do czytania, więc użyj animacji jako elementu tła z niską opacity lub wyłącz dla użytkowników preferujących reduced motion.
Jaka jest symbolika efektu Matrix w kulturze pop?
Efekt Matrix stał się symbolem "hakowania", cyberpunku i pojęcia symulowanej rzeczywistości. Jest powszechnie rozpoznawany nawet przez osoby, które nie oglądały filmów. Pojawia się w popkulturze jako shorthand dla "świata komputerów", "programowania" lub "głębszej warstwy rzeczywistości". Ironicznie, efekt nie ma nic wspólnego z rzeczywistym kodem — to czysta estetyka.