Lettura contorni (e buchi) dei caratteri

    let font
let contours

async function setup() {
  createCanvas(670, 200)
  font = await loadFont("UbuntuCondensed.ttf")
  fill(0)
  // leggi i punti
  textSize(140)
  let parametri = { sampleFactor: 0.5, simplifyThreshold: 0 }
  contours = font.textToContours("bagoga", 145, 140, parametri)
}

function draw() {
  background(255)
  line(0, 105, 670, 105)
  // visualizza le lettere
  beginShape()
  for (let i = 0; i < contours.length; i++) {
    beginContour()
    for (const pt of contours[i]) {
      let oscillazione = sin((frameCount + i*5)/20) * 30
      vertex(pt.x, pt.y + oscillazione)
    }
    endContour(CLOSE)
  }
  endShape()
}
  

  font = await loadFont("UbuntuCondensed.ttf")

Carica il font e aspetta (await) che il caricamento finisca prima di passare all’istruzione successiva, cosa possibile perché setup() è dichiarata async.

  contours = font.textToContours("bagoga", 145, 140, parametri)

Legge i punti delle forme che permettono di ricostruire le singole lettere. L’array contours conterrà un array per ogni forma o “buco” delle lettere.

  beginContour()
for (const pt of contours[i]) {
    let oscillazione = sin((frameCount + i*5)/20) * 30
    vertex(pt.x, pt.y + oscillazione)
}
endContour(CLOSE)

Disegna le singole forme e i “buchi” delle lettere facendole oscillare verticalmente.

Strutturazione dei file:

• CARTELLA-SKETCH
  • index.html
  • sketch.js
  • style.css
  • UbuntuCondensed.ttf