Bonjour mes amis!
Récemment révisé la "Matrice". Écoutez ce qu'est un film sympa (cela ne s'applique qu'à la première partie). Une fois de plus, j'ai attiré l'attention sur les lignes «tombantes» avec des hiéroglyphes sur leurs écrans (j'ai délibérément utilisé le mot «le leur» pour le plaisir). J'ai pensé à comment cela peut être mis en œuvre ... aussi simple que possible (parce que la paresse). Voilà ce que j'ai.
Bienvenue dans la matrice
Le balisage ressemble à ceci:
<body style="margin: 0; background: #000; overflow: hidden;"> <canvas></canvas> </body>
Initialisez le canevas, le contexte, la largeur et la hauteur du canevas. Nous faisons ce dernier égal à la largeur et la hauteur de la fenêtre du navigateur:
const C = document.querySelector("canvas"), $ = C.getContext("2d"), W = C.width = innerWidth, H = C.height = innerHeight
Nous créons une ligne avec des caractères qui seront utilisés pour la visualisation (je ne veux pas de hiéroglyphes, je veux l'alphabet cyrillique!). Convertissez cette chaîne en un tableau. Les espaces donnent des vides dans les colonnes, avec eux l'effet est plus intéressant:
const str = "+0-1=2 3 4 5 6 7 8 9 ! ? ., :;", matrix = str.split('')
Nous déterminons la taille de la police, le nombre de colonnes et créons un tableau vide. Nous utiliserons ce tableau pour déterminer la coordonnée y:
let font = 11,
Remplissez un tableau vide d'unités par le nombre de colonnes:
for(let i = 0; i < col; i++) arr[i] = 1
Tout est prêt pour le dessin. Pour commencer:
function draw() {
Nous démarrons la fonction de dessin toutes les 123 millisecondes (un nombre aléatoire):
setInterval(draw, 123)
Enfin, lors du redimensionnement de la fenêtre, nous rechargeons la page (par paresse):
window.addEventListener('resize', () => location.reload())
Le résultat peut être vu
ici .
Il y a un petit problème: de temps en temps, les colonnes collent les unes aux autres, elles sont presque alignées horizontalement. Cela affecte la perception: l'œil s'accroche à la commande. Il y a un manque de chaos, ou quelque chose. Une solution valable n'a pas encore été trouvée.
Merci de votre attention. Mes meilleurs vœux.