Matrix raining code effect met behulp van JavaScript
de nieuwe Matrix film komt dit jaar, en ik ben zo hyped voor dat ik moest dit iconische effect te creëren met mijn tools. De implementatie zelf is heel eenvoudig en ik gebruikte alleen HTML, CSS en Vanilla javascript voor het.
als u een videoformaat verkiest, kunt u mijn tutorial bekijken op YouTube:
implementatie
Ik zal HTML canvas gebruiken om het “Digital rain” effect te creëren, en we zullen alle inloggen in javascript hebben.
HTML
het HTML-bestand zal heel eenvoudig zijn. In de body hebben we alleen een <canvas>, en ik heb ook het javascript-bestand hier onderaan opgenomen, Je kunt het ook in de head opnemen met het defer attribuut.
<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
dit zal ook heel kort zijn. In CSS ik gewoon in principe maken het lichaam vullen de hele viewport en stel een zwarte achtergrondkleur voor.
html { background: black; height: 100%; overflow: hidden;}body { margin: 0; padding: 0; height: 100%;}Javascript
deze implementatie zal het grootste deel van het project zijn.
eerst moeten we ons canvas initialiseren met een 2D context. Ik stel ook het canvas om de hele viewport te nemen door het instellen van de breedte en hoogte:
const canvas = document.getElementById('Matrix');const context = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;vervolgens maak ik het alfabet waaruit we onze personages kiezen voor de regen. I ‘ ll use katakana characters (een variatie van Katakana symbolen werd gebruikt in de Matrix film zelf.), het Latijnse alfabet en Arabische cijfers. De samenvoeging van deze zal het alfabet te creëren.
const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';const nums = '0123456789';const alphabet = katakana + latin + nums;we moeten berekenen hoeveel “regenkolommen” op het scherm passen en om dat te doen zal ik een vaste fontgrootte instellen en de breedte op de binnenbreedte van het venster verdelen om de exacte kolomtelling te krijgen.
const fontSize = 16;const columns = canvas.width/fontSize;Ik zal een array gebruiken om de regendruppels op te slaan en weer te geven. De index van een gegeven element is de coördinaat van de regendruppel op de X-as, en de waarde van een gegeven element houdt zijn coördinaat op de Y-as. Op deze manier hebben we geen 2D array nodig. Om de array te initialiseren vul ik hem met Enes, dus na de initialisatie hebben we dezelfde exacte hoogte voor elke kolom: 1.
const rainDrops = ;for( let x = 0; x < columns; x++ ) { rainDrops = 1;}nu is het tijd om de haard van ons effect De draw-functie te implementeren. Eerst schilderen we het hele doek met een transparante zwarte kleur. Dit geeft ons het trail effect op de regendruppels, wanneer de druppel valt de al verdrinken karakters zal langzaam verdwijnen. Vervolgens stel ik de lettergrootte en de kleur in (natuurlijk is het groen 😎). En nu komt de key sleutel. Ik loop door de regendruppel array, en voor elk element kies ik een willekeurig karakter uit ons alfabet en render dat in de volgende positie van de kolom. Het belangrijkste is dat je de coördinaten (elemnt waarde en index) moet vermenigvuldigen met de lettergrootte om de perfecte spatiëring te krijgen. Tot slot moeten we onze regendruppels die onder de viewport hoogte vielen, naar de top van die kolom verplaatsen. Om het regeneffect te krijgen zet ik het niet meteen naar de top, maar voeg een beetje willekeur toe door een willekeurige kans toe te voegen om dat te doen.
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++; }};als laatste stap moet ik de draw-functie in een interval aanroepen en dit zal de draw-functie in elke 30ms aanroepen.
setInterval(draw, 30);conclusie
Dit is een heel leuk project om te maken en ik probeerde de implementatie zo beginnervriendelijk mogelijk te houden. Ik hoop dat je ervan genoten hebt, als je educatieve content zoekt op web development volg mij, Ik maak educatieve YouTube-video ‘ s, en Instagram berichten ook.
Gelukkig Hacken!
waar kunt u meer van mij leren?
ik creëer educatieve inhoud die web-ontwikkeling op verschillende platforms omvat, voel je vrij om 👀 check them out.
ik maak ook een nieuwsbrief waarin ik de educatieve inhoud van de week of 2 weken die ik heb gemaakt, deel. Geen stier just alleen educatieve inhoud.
Links Links:
- 🍺 ondersteun gratis onderwijs en koop een biertje voor me
- 💬 Word lid van onze gemeenschap op onenigheid
- Newsletter Nieuwsbrief Schrijf je hier in
- YouTube YouTube Javascript Academy
- 🐦 Twitter: @ dev_adamnagy
- Inst Instagram @javascriptacademy