10 - generative typography

práca s textom a písmom v p5.js

V tejto lekcii sa naučíte, ako pracovať s textom a typografiou v p5.js, a ako vytvoriť animované a generatívne efekty. Čaká vás aj niekoľko úloh na experimentovanie.

Prezentácia

29MB

Generative Typography_Cholvadt Jan.pptx

Autor: Ján Cholvadt

Na úvod si stiahnite font:

Google FontsGoogle Fonts

Roboto font

143KB

Roboto-Regular.ttf

283KB

FiraCode-Regular.ttf

Krok 1: Zobrazenie textu

1. Vytvorte jednoduchý sketch:

function setup() {
  createCanvas(800, 400);
  textSize(48);
  textAlign(CENTER, CENTER);
  text("Ahoj, svet!", width / 2, height / 2);
}

1. Vysvetlenie:

   • textSize() nastavuje veľkosť textu.

   • textAlign() definuje zarovnanie textu (horizontálne a vertikálne).

---

Krok 2: Dynamický text

1. Použite myš pre dynamické ovládanie:

function setup() {
  createCanvas(800, 400);
  textSize(48);
  textAlign(CENTER, CENTER);
}

function draw() {
  background(30);
  fill(lerpColor(color("red"), color("blue"), mouseX / width));
  text("Ahoj svet", mouseX, mouseY);
}

1. Tipy:

   • lerpColor() interpoluje medzi dvoma farbami.

   • Myš kontroluje pozíciu a farbu textu.

Krok 3: Animovaný text

Naučiť sa, ako pracovať s jednotlivými znakmi textu a animovať ich nezávisle

let myFont;

function preload() {
  myFont = loadFont('FiraCode-Regular.ttf');
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  textFont(myFont);
  textSize(64);
  textAlign(CENTER, CENTER);
}

function draw() {
  background(30);
  fill(255);

  let txt = "Ahoj svet!";
  let baseX = width / 2 - textWidth(txt) / 2; // Začiatočná X súradnica textu
  let baseY = height / 2;

  for (let i = 0; i < txt.length; i++) {
    let charWidth = textWidth(txt[i]);
    let x = baseX + i * charWidth; // X pozícia znaku
    let y = baseY + sin(frameCount * 0.1 + i * 0.5) * 20; // Animovaná Y pozícia

    text(txt[i], x, y);
  }
}

Krok 4: práca so samotnou typografiou:

Cieľom tohto kroku je ukázať, ako možno Perlin noise použiť na plynulé a organické animácie textu.

---

Krok za krokom:

1. Pridanie Perlin Noise do polohy jednotlivých znakov:

   • Použijeme funkciu noise() na modifikáciu pozícií znakov textu.

   • Každý znak dostane unikátne hodnoty na základe jeho indexu a času.

   let font;
   let points;
   let time = 0;
   
   function preload() {
     font = loadFont('Roboto-Regular.ttf'); 
   }
   
   function setup() {
     createCanvas(800, 400);
     textFont(font);
     textSize(128);
     fill(255);
     noStroke();
   
     points = font.textToPoints("Ahoj svet", 100, 200, 128, {
       sampleFactor: 0.2,
     });
   }
   
   function draw() {
     background(0);
   
     for (let i = 0; i < points.length; i++) {
       let p = points[i];
   
       // Použitie noise pre jemný pohyb
       let nX = noise(p.x * 0.01, p.y * 0.01, time) * 20;
       let nY = noise(p.y * 0.01, p.x * 0.01, time) * 20;
   
       let x = p.x + nX;
       let y = p.y + nY;
   
       ellipse(x, y, 5, 5);
     }
   
     // Posun v čase pre animáciu
     time += 0.01;
   }

textToPoints() je funkcia v p5.js, ktorá prevádza text do množiny bodov (vektorov), ktoré reprezentujú obrysy písma. Tieto body sa následne dajú použiť na animácie, modifikácie alebo vizualizácie. Viac info: https://p5js.org/reference/p5.Font/textToPoints/

1. Vysvetlenie kódu:

   • textToPoints: Táto funkcia konvertuje text na body (vektory), ktoré môžeme upraviť.

   • noise(): Používame Perlin noise na plynulé animácie.

   • time: Časová premenná sa posúva každým frame-om, čím vzniká ilúzia pohybu.

2. Tipy:

   1. Pridanie polopriesvitného pozadia background(0, 20);

   2. Použitie väčších bodov

   3. Umožnite používateľovi zadať vlastný text