§ Page

Matrix Rain Maker

Icône de Matrix Rain Maker (512x512)

Ce petit outil est disponible en open source et est déployé sur GitLab, pour consulter le code, voir ici ; pour consulter l'outil en ligne, allez ici.


README

Un générateur d’animation Matrix Rain interactif et personnalisable directement dans le navigateur, avec la fonctionnalité de télécharger l’animation au format GIF grâce à gif.js.


Fonctionnalités

  • Animation fluide : Effet de pluie de caractères entièrement personnalisable (vitesse, caractères, palettes de couleurs et combinaisons).
  • Formats multiples : Choix du format et des dimensions du GIF (Paysage, Carré, Portrait, Bannière ou Personnalisé).
  • Export GIF natif : Transforme l’animation en cours en un fichier .gif téléchargeable en un clic depuis le navigateur.
  • Interface intuitive : Panneau de configuration latéral pour modifier les paramètres en direct.
  • Léger et sans serveur : Fonctionne entièrement en HTML5/JavaScript pur (utilise un Web Worker pour le rendu du GIF en arrière-plan).

Structure du projet

Le projet est contenu dans un fichier unique :

  • index.html : Contient toute la structure, le style CSS, les contrôles interactifs, la logique de l’animation Canvas et la génération du GIF.

Installation & Utilisation

  1. Cloner ou télécharger le dépôt sur votre machine :
git clone https://gitlab.com/Portfolio-personnel-Ax4M3/matrix-rain-maker.git
  1. Ouvrez le fichier index.html directement dans un navigateur web moderne (Google Chrome, Firefox, Edge, etc.).

  2. Utilisez le panneau de configuration sur le côté pour ajuster la vitesse, les caractères ou choisir une palette de couleurs/combinaisons.

  3. Cliquez sur le bouton “Télécharger le GIF”, patientez pendant que le script capture les images et assemble le GIF, puis récupérez votre fichier.

Personnalisation rapide

Vous pouvez facilement modifier les paramètres directement depuis l’interface utilisateur de la page :

Format / Forme : Via le menu déroulant (Paysage, Carré, Portrait, Bannière).

Vitesse : Champ numérique dédié.

Caractères : Zone de texte modifiable en direct.

Couleurs : Champ de texte ou boutons de sélection rapide de palettes/combinaisons.

Dépendances

gif.js : Bibliothèque JavaScript pour encoder des fichiers GIF animés côté client (chargée via CDN).

Licence

Distribué sous la licence MIT.