Effet de code de pluie de matrice à l’aide de JavaScript
Le nouveau film Matrix arrive cette année, et je suis tellement excité pour cela que j’ai dû créer cet effet emblématique avec mes outils. L’implémentation elle-même est vraiment simple et je n’ai utilisé que du HTML, du CSS et du javascript vanillé pour cela.
Si vous préférez un format vidéo, vous pouvez consulter mon tutoriel dessus sur YouTube:
Implémentation
J’utiliserai le canevas HTML pour créer l’effet « Pluie numérique », et nous aurons toute la connexion en javascript.
HTML
Le fichier HTML sera vraiment simple. Dans le corps, nous n’aurons qu’un <canvas>, et j’ai également inclus le fichier javascript ici en bas, vous pouvez également l’inclure dans la tête avec l’attribut 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
Ce sera vraiment court aussi. En CSS, je fais simplement en sorte que le corps remplisse toute la fenêtre d’affichage et définisse une couleur de fond noire pour celle-ci.
html { background: black; height: 100%; overflow: hidden;}body { margin: 0; padding: 0; height: 100%;}Javascript
Cette implémentation sera learelionshare du projet.
Nous devons d’abord initialiser notre canevas avec un contexte 2D. J’ai également défini le canevas pour qu’il occupe toute la fenêtre d’affichage en définissant sa largeur et sa hauteur:
const canvas = document.getElementById('Matrix');const context = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;Ensuite, je crée l’alphabet à partir duquel nous choisirons nos personnages pour la pluie. Je vais utiliser des caractères katakana (Une variante des symboles Katakana a été utilisée dans le film Matrix lui-même.), l’alphabet latin et les chiffres arabes. La concaténation de ceux-ci créera l’alphabet.
const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';const nums = '0123456789';const alphabet = katakana + latin + nums;Nous devons calculer combien de « colonnes de pluie » s’adapteront à l’écran et pour ce faire, je vais définir une taille de police fixe et diviser la largeur sur la largeur intérieure de la fenêtre pour obtenir le nombre exact de colonnes.
const fontSize = 16;const columns = canvas.width/fontSize;Je vais utiliser un tableau pour stocker et rendre les gouttes de pluie. L’indice d’un élément donné sera la coordonnée de la goutte de pluie sur l’axe X, et la valeur d’un élément donné tiendra sa coordonnée sur l’axe Y. De cette façon, nous n’avons pas besoin d’un tableau 2D. Pour initialiser le tableau, je le remplis avec ceux, donc après l’initialisation, nous aurons la même hauteur exacte pour chaque colonne: 1.
const rainDrops = ;for( let x = 0; x < columns; x++ ) { rainDrops = 1;}Il est maintenant temps d’implémenter le foyer de notre effet la fonction de tirage. Nous allons d’abord peindre toute la toile avec une couleur noire transparente. Cela nous donnera l’effet de traînée sur les gouttes de pluie, lorsque la goutte tombera, les personnages déjà noyés disparaîtront lentement. Ensuite, je vais définir la taille de la police et la couleur (bien sûr, elle est verte 😎). Et maintenant vient la key clé. Je parcourrai le tableau de gouttes de pluie, et pour chaque élément, je choisirai un caractère aléatoire de notre alphabet et le rendrai à la position suivante de la colonne. L’important ici est que vous deviez multiplier les coordonnées (valeur elemnt et index) avec la taille de la police pour obtenir l’espacement parfait. Enfin, nous devons déplacer nos gouttes de pluie qui sont tombées en dessous de la hauteur de la fenêtre, en haut de cette colonne. Pour obtenir l’effet de pluie, je ne le mets pas tout de suite en haut, mais ajoute un peu de hasard en ajoutant une chance aléatoire de le faire.
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++; }};En dernière étape, je dois appeler la fonction draw dans un intervalle et cela appellera la fonction draw toutes les 30 ms.
setInterval(draw, 30);Conclusion
C’est un projet vraiment amusant à créer et j’ai essayé de garder l’implémentation aussi conviviale que possible pour les débutants. J’espère que vous l’avez apprécié, si vous recherchez du contenu éducatif sur le développement Web, suivez-moi, je crée des vidéos éducatives sur YouTube et des publications Instagram.
Bon piratage!
Où pouvez-vous en apprendre plus de moi?
Je crée du contenu éducatif couvrant le développement web sur plusieurs plateformes, n’hésitez pas à check les consulter.
Je crée également une newsletter où je partage le contenu éducatif de la semaine ou de la semaine 2 que j’ai créé. Pas de taureau just juste du contenu éducatif.
Links Liens:
- 🍺 Soutenez l’éducation gratuite et achetez-moi une bière
- Join Rejoignez notre communauté sur Discord
- Subscribe Newsletter Abonnez-vous ici
- Academy YouTube Javascript Academy
- Twitter Twitter: @dev_adamnagy
- Instagram Instagram @javascriptacademy