Animations de terminaux avec Node.js

Node.js a l'objet processus avec la propriété stdout qui est un flux connecté à stdout. En utilisant la propriété process.stdout, nous pouvons accéder à plusieurs propriétés et méthodes utiles : colonnes, lignes, curseurTo et écriture. Ce sont des éléments essentiels pour commencer à "animer" quelque chose dans le terminal.

Imaginez que nous voulions animer un « personnage » qui tombe de haut en bas de l'écran, ce qui pourrait être une petite partie de l'animation « pluie numérique » du film Matrix.

Pour ce faire, nous aurons besoin de plusieurs étapes :

• Écrivez le personnage dans une position de départ.
• Faites une pause.
• Supprimez le personnage.
• Écrivez le personnage dans une nouvelle position.
• Répétez...

const column = 0
const character = '$'

/* Pause for 1 second (1000 ms) */
const pause = () => new Promise((resolve) => setTimeout(resolve, 1000))

const main = async () => {
  /* Clear screen */
  console.clear()
  /* Hide cursor */
  process.stderr.write('\x1B[?25l')

  /* The number of rows */
  const rows = process.stdout.rows

  /* Starting from the first row on the top of the screen.
   * Going to the bottom of the screen `process.stdout.rows`.
   */
  for (let row = 0; row < rows; row++) {
    /* Set cursor into position `cursorTo(x, y)`
     * and write a character */
    process.stdout.cursorTo(column, row)
    process.stdout.write(character)
    /* Pause for 1 second */
    await pause()
    /* Set cursor into position and clear the character
     * (write a space) */
    process.stdout.cursorTo(column, row)
    process.stdout.write(' ')
  }

  /* Show cursor */
  process.stderr.write('\x1B[?25h')
}

main()

Vous pouvez jouer avec ce code ici.

Ensuite, ce sera bien d'ajouter quelques couleurs à notre animation. Nous pouvons utiliser la grande bibliothèque Ansis pour cela.

Produisons quelque chose de couleur verte :

/* import Ansis library */
import { green } from 'ansis'

const character = '$'

/* Apply green color to our character */
const coloredCharacter = green`${character}`

/* Write colored character to the terminal */
process.stdout.write(coloredCharacter)

Ou encore mieux, animez la couleur du vert foncé au vert clair :

import { rgb } from 'ansis'

const column = 0
const character = '$'

/* Pause for 1 second (1000 ms) */
const pause = () => new Promise((resolve) => setTimeout(resolve, 1000))

const main = async () => {
  /* Clear screen */
  console.clear()
  /* Hide cursor */
  process.stderr.write('\x1B[?25l')

  /* The number of rows */
  const rows = process.stdout.rows

  /* Starting from the first row on the top of the screen.
   * Going to the bottom of the screen `process.stdout.rows`.
   */
  for (let row = 0; row < rows; row++) {
    /* Use the `rgb` function to change color
     * from dark to light green */
    const g = Math.floor((255 / rows) * row)
    const coloredCharacter = rgb(0, g, 0)`${character}`

    /* Set cursor into position `cursorTo(x, y)`
     * and write a character */
    process.stdout.cursorTo(column, row)
    process.stdout.write(coloredCharacter)
    /* Pause for 1 second */
    await pause()
    /* Set cursor into position and clear the character
     * (write a space) */
    process.stdout.cursorTo(column, row)
    process.stdout.write(' ')
  }

  /* Show cursor */
  process.stderr.write('\x1B[?25h')
}

main()

Nous pouvons créer quelque chose d'intéressant et de cool en utilisant ces idées simples et ces techniques d'animation. ?

Découvrez la pluie numérique Matrix en action avec la commande npx jmatrix et consultez le code source sur Github.

Crédits

Photo de Lukas sur Unsplash

---

Veuillez poster vos réflexions, questions et idées dans les commentaires, appuyez sur la touche ? bouton, et bon piratage ! ??

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!