Эффект дождя «Матрица» – популярный визуальный эффект, вдохновленный культовой сценой «падающего кода» из сериала «Матрица». Он включает в себя отображение потока символов, падающих на экран, создавая иллюзию цифрового ливня. В этой статье блога мы рассмотрим несколько методов кодирования эффекта матричного дождя, приведя примеры кода для каждого подхода.

Метод 1: анимация HTML5 Canvas (JavaScript)
Один из способов реализовать эффект матричного дождя — использовать HTML5 Canvas и JavaScript. Вот пример кода:

<canvas id="matrix-canvas"></canvas>
<script>
  const canvas = document.getElementById('matrix-canvas');
  const ctx = canvas.getContext('2d');

  // Set canvas dimensions
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  // Matrix rain configuration
  const columns = Math.floor(canvas.width / 20);
  const fontSize = 20;
  const characters = 'abcdefghijklmnopqrstuvwxyz0123456789';

  // Create the matrix rain effect
  const matrix = [];
  for (let i = 0; i < columns; i++) {
    matrix.push(Math.floor(Math.random() * canvas.height));
  }

  function draw() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = '#0f0';
    ctx.font = `${fontSize}px monospace`;

    for (let i = 0; i < matrix.length; i++) {
      const char = characters[Math.floor(Math.random() * characters.length)];
      ctx.fillText(char, i * fontSize, matrix[i] * fontSize);

      if (matrix[i] * fontSize > canvas.height && Math.random() > 0.975) {
        matrix[i] = 0;
      }

      matrix[i]++;
    }
  }

  function animate() {
    requestAnimationFrame(animate);
    draw();
  }

  animate();
</script>

Метод 2: CSS-анимация (HTML/CSS)
Другой подход заключается в использовании CSS-анимации для создания матричного эффекта дождя. Вот пример:

attr(data-content);
цвет: #0f0;
семейство шрифтов: monospace;
размер шрифта: 20 пикселей;
пробелы: pre;
}

@keyframes matrixFall {
from { Transform: TranslateY(-100%);
в {transform: TranslateY(100%);
}

Метод 3: Python и Pygame
Если вы предпочитаете настольное приложение, вы можете использовать Python и библиотеку Pygame для создания эффекта матричного дождя. Вот пример:

import pygame
import random
# Pygame initialization
pygame.init()
width, height = 800, 600
screen = pygame.display.set_mode((width, height))
clock = pygame.time.Clock()
# Matrix rain configuration
columns = width // 20
font_size = 20
characters = 'abcdefghijklmnopqrstuvwxyz0123456789'
# Create the matrix rain effect
matrix = []
for i in range(columns):
    matrix.append(random.randint(0, height))
while True:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.quit()
            exit()

    # Render the matrix rain effect
    screen.fill((0, 0, 0))

    for i in range(len(matrix)):
        char = random.choice(characters)
        text_surface = pygame.font.SysFont('monospace', font_size).render(char, True, (0, 255, 0))
        screen.blit(text_surface, (i * font_size, matrix[i] * font_size))

        if matrix[i] * font_size > height and random.random() > 0.975:
            matrix[i] = 0

        matrix[i] += 1

    pygame.display.flip()
    clock.tick(30)

В этой статье мы рассмотрели три различных метода кодирования эффекта дождя «Матрица». В первом методе использовались HTML5 Canvas и JavaScript, во втором — анимация CSS, а в третьем — Python и библиотека Pygame. Каждый метод предлагает уникальный подход к достижению эффекта дождя Matrix, и вы можете выбрать тот, который лучше всего соответствует вашим потребностям.