Trasformazioni globali

    let font;
let punti;

function preload() {
    font = loadFont("UbuntuCondensed.ttf");
}
function setup() {
    createCanvas(670,300);
    punti = font.textToPoints("testo", 30, 260, 320);
}
function draw() {
    let vettori = [];
    for (let i = 0; i < punti.length; ++i) {
        let vettore = createVector(punti[i].x, punti[i].y);

        let tempoX = frameCount / 20;
        let valoreX = vettore.y * sin(tempoX);
        vettore.x += map(valoreX, -300, 300, -50, 50);

        vettori[i] = vettore;
    }
    background(255);
    for (let vett of vettori) {
        circle(vett.x, vett.y, 2);
    }
}
  

  let tempoX = frameCount / 20;
let valoreX = /*1*/vettore.y * sin(tempoX)/**/;
vettore.x += map(valoreX, -300, 300, -50, 50);

Modifica le coordinate x tenendo conto del valore della coordinata y. Maggiore sarà il valore di y, più ampio sarà lo scostamento rispetto al valore iniziale di x. Attraverso la funzione sin() gli scostamenti vengono fatti oscillare a una velocità determinata da tempoX.

Provare a modificare la velocità di oscillazione intervenendo sul divisore di frameCount e l’ampiezza dell’oscillazione intervenendo sugli utlimi due paramteri di map().

Usare i valori invertiti di y attraverso (height-vettore.y) anziché solo vettore.y.

Strutturazione dei file:

• CARTELLA-SKETCH
  • libs
    • p5.min.js
  • index.html
  • sketch.js
  • UbuntuCondensed.ttf