ASCII Art con la logica degli Split-Flap

Tutte le celle possono visualizzare solo una determinata successione di caratteri. Le transizioni fra le “immagini” avvengono mostrando sempre tutti i caratteri intermedi fra quello di partenza e quello di arrivo. Quest’ultimo appare quindi in tempi che possono essere anche molto diversi fra una cella e l’altra.

    let caratteri =
  " !\"#%&'()*,-./:;?@[\\]_{|}0123456789" +
  "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
let charW = 10
let charH = 13
let moduli = []

class Modulo {
  constructor(x, y) {
    this.pos = createVector(x, y)
    this.indiceCarattere = 0
    this.indiceCarattereCorrente = 0
  }
  display() {
    text(caratteri[this.indiceCarattereCorrente], this.pos.x, this.pos.y)
    // se necessario, vai al prossimo carattere
    if (this.indiceCarattereCorrente != this.indiceCarattere) {
      if (this.indiceCarattereCorrente < caratteri.length - 1) {
        this.indiceCarattereCorrente++
      } else {
        this.indiceCarattereCorrente = 0
      }
    }
  }
}

function creaModuli() {
  moduli = []
  let colonne = int(width / charW)
  let righe = int(height / charH)
  let xStart = (width - colonne * charW) / 2 + charW / 2
  let yStart = (height - righe * charH) / 2 + charH / 2
  for (let c = 0; c < colonne; c++) {
    moduli[c] = []; // array colonna (vuoto)
    let x = xStart + c * charW
    for (let r = 0; r < righe; r++) {
      let y = yStart + r * charH
      moduli[c].push(new Modulo(x, y))
    }
  }
}

function impostaConfigurazione() {
  for (let c = 0; c < moduli.length; c++) {
    for (let r = 0; r < moduli[c].length; r++) {
      let valoreNoise = noise(c / 100, r / 70, frameCount / 40)
      let i = constrain(valoreNoise, 0, 1) * caratteri.length
      moduli[c][r].indiceCarattere = int(i)
    }
  }
}

function setup() {
  createCanvas(windowWidth, windowHeight)
  textFont('Verdana', charH+1)
  textAlign(CENTER, CENTER)
  frameRate(25)
  creaModuli()
}

function draw() {
  background(250)
  if (frameCount % 120 == 1) {
    impostaConfigurazione()
  }
  for (let c = 0; c < moduli.length; c++) {
    for (let r = 0; r < moduli[c].length; r++) {
      moduli[c][r].display()
    }
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight)
  creaModuli()
  impostaConfigurazione()
}

L’esempio simula la logica di alcuni lavori di Andreas Gysin usando però configurazioni di caratteri generate in modo pseudo-casuale (attraverso il Perlin noise) per evitare di complicare troppo il codice.