Matrix raining code effect using JavaScript
den nya Matrix-filmen kommer i år, och jag är så hyped för det att jag var tvungen att skapa denna ikoniska effekt med mina verktyg. Implementeringen i sig är väldigt enkel och jag använde bara HTML, CSS och vanilj javascript för det.
om du föredrar ett videoformat kan du kolla min handledning på den på YouTube:
implementering
jag använder HTML canvas för att skapa ”Digital rain” – effekten, och vi kommer att ha all inloggning i javascript.
HTML
HTML-filen blir väldigt enkel. I kroppen kommer vi bara att ha en <canvas>, och jag inkluderade också javascript-filen här längst ner, Du kan också inkludera den i huvudet med attributet defer.
<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./styles.css"> <title>Matrix digital rain</title></head><body> <canvas></canvas> <script src="./index.js"></script></body></html>CSS
detta kommer att bli riktigt kort också. I CSS får jag bara i princip kroppen att fylla hela visningsområdet och ställa in en svart bakgrundsfärg för den.
html { background: black; height: 100%; overflow: hidden;}body { margin: 0; padding: 0; height: 100%;}Javascript
denna implementering kommer att vara projektets lejondel av projektet.
först måste vi initiera vår duk med ett 2D-sammanhang. Jag ställer också in duken för att ta upp hela visningsområdet genom att ställa in bredden och höjden:
const canvas = document.getElementById('Matrix');const context = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;därefter skapar jag alfabetet från vilket vi kommer att välja våra karaktärer för regnet. Jag använder katakana-tecken (en variation av Katakana-symboler användes i Matrix-filmen själv.), det latinska alfabetet och arabiska siffror. Sammanfogningen av dessa kommer att skapa alfabetet.
const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';const nums = '0123456789';const alphabet = katakana + latin + nums;vi måste beräkna hur många” regnkolumner ” som passar på skärmen och för att göra det ska jag ställa in en fast fontsize och dela bredden på fönstrets innerWidth för att få exakt kolumnräkning.
const fontSize = 16;const columns = canvas.width/fontSize;jag använder en array för att lagra och göra regndropparna. Indexet för ett givet element kommer att vara koordinaten för regndroppen på X-axeln, och värdet på ett givet element kommer att hålla det koordinat på Y-axeln. På så sätt behöver vi inte en 2D-array. För att initiera matrisen fyller jag den med med sådana, så efter initialiseringen kommer vi att ha samma exakta höjd för varje kolumn: 1.
const rainDrops = ;for( let x = 0; x < columns; x++ ) { rainDrops = 1;}nu är det dags att genomföra hjärtat av vår effekt dragfunktionen. Först målar vi hela duken med en genomskinlig svart färg. Detta kommer att ge oss spåreffekten på regndropparna, när droppen faller kommer de redan drunknade karaktärerna långsamt att blekna ut. Nästa jag ska ställa in fontsize och färg (naturligtvis är det grönt Xiaomi). Och nu kommer den nya nyckeln. Jag slingrar genom raindrop-arrayen, och för varje element väljer jag ett slumpmässigt tecken från vårt alfabet och gör det i nästa position i kolumnen. Det viktiga här är att du måste multiplicera koordinaterna (elemnt-värde och index) med teckenstorleken för att få det perfekta avståndet. Slutligen måste vi flytta våra regndroppar som sjönk under visningshöjden, till toppen av den kolumnen. För att få den regnande effekten lägger jag inte den till toppen direkt, men lägger till lite slumpmässighet genom att lägga till en slumpmässig chans att göra det.
const draw = () => { context.fillStyle = 'rgba(0, 0, 0, 0.05)'; context.fillRect(0, 0, canvas.width, canvas.height); context.fillStyle = '#0F0'; context.font = fontSize + 'px monospace'; for(let i = 0; i < rainDrops.length; i++) { const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length)); context.fillText(text, i*fontSize, rainDrops*fontSize); if(rainDrops*fontSize > canvas.height && Math.random() > 0.975){ rainDrops = 0; } rainDrops++; }};som ett sista steg måste jag ringa dragfunktionen i ett intervall och detta kommer att ringa dragfunktionen i varje 30ms.
setInterval(draw, 30);slutsats
Detta är ett riktigt roligt projekt att skapa och jag försökte hålla implementeringen så nybörjarvänlig som jag kunde. Hoppas du gillade det, om du söker pedagogiskt innehåll på webbutveckling följ mig, jag skapar pedagogiska YouTube-videor och Instagram-inlägg också.
Glad Hacking!
Var kan du lära dig mer av mig?
jag skapar utbildningsinnehåll som täcker webbutveckling på flera plattformar, Känn dig fri att kolla in dem.
jag skapar också ett nyhetsbrev där jag delar veckans eller 2 veckors utbildningsinnehåll som jag skapade. Ingen tjur bisexuell bara pedagogiskt innehåll.
länkar:
- 🍺 Stöd gratis utbildning och köp mig en öl
- bisexuell gå med i vårt samhälle på Discord
- nyhetsbrevet för Brasilien prenumerera här
- YouTube Javascript Academy
- Mexican Twitter: @ dev_adamnagy
- Mexican Instagram @ javascriptacademy