📝 Codi explicat línia a línia
/*
====================================================
PRÀCTICA 6
TIPOGRAFIA GENERATIVA
====================================================
REFERENTS
- Jenny Holzer
- Barbara Kruger
- Zach Lieberman
OBJECTIU
Aprendre a utilitzar:
- text()
- tipografia
- animació simple
- sistemes visuals
- dades convertides en imatge
En aquesta pràctica descobrirem
que una paraula no és només un text.
Una paraula també és una forma.
Podem deformar-la, repetir-la,
fragmentar-la o transformar-la
fins que quasi deixi de semblar text.
*/
let paraula = "ART";
function setup() {
createCanvas(900, 600);
// Vinculem el canvas al contenidor HTML
let cnv = createCanvas(900, 600);
cnv.parent("canvas-container");
textAlign(CENTER, CENTER);
}
function draw() {
background(250);
/*
Color del text
*/
fill(0);
noStroke();
/*
Dibuixarem moltes còpies
de la paraula.
Cada línia tindrà una mida
diferent.
*/
for (let y = 40; y < height; y += 40) {
let mida = map(y, 0, height, 10, 100);
textSize(mida);
/*
Desplaçament visual
*/
let desplacament =
sin(frameCount * 0.03 + y * 0.05) * 100;
text(
paraula,
width / 2 + desplacament,
y
);
}
}
/*
====================================================
QUÈ ÉS TEXT()?
====================================================
text() serveix per escriure text
a la pantalla.
Exemple:
text("Hola", 100, 100);
*/
/*
====================================================
TEXTSIZE()
====================================================
Permet canviar la mida.
Exemple:
textSize(50);
text("ART", 200, 200);
*/
/*
====================================================
TEXTALIGN()
====================================================
Alinea el text.
textAlign(CENTER, CENTER);
El text queda centrat.
*/
/*
====================================================
FRAMECOUNT
====================================================
Variable automàtica.
Compta els fotogrames.
Augmenta contínuament:
1, 2, 3, 4, 5...
Ens permet crear moviment.
*/
/*
====================================================
SIN()
====================================================
Genera oscil·lacions.
És ideal per crear:
- ones
- respiracions
- vibracions
Exemple:
sin(frameCount * 0.05)
Retorna valors entre -1 i 1.
*/
/*
====================================================
EXERCICI 1
====================================================
Canvia "ART" per "COLOR", "DISSENY"
o "MOVIMENT". Observa els resultats.
*/
/*
====================================================
EXERCICI 2
====================================================
Canvia 100 per 200 dins del desplaçament.
Resultat: més moviment.
*/
/*
====================================================
EXERCICI 3
====================================================
Canvia la mida màxima.
Ara: map(y,0,height,10,100)
Prova: map(y,0,height,10,200)
*/
/*
====================================================
EXERCICI 4
====================================================
Canvia el color.
Exemple: fill(255,0,0); o fill(0,100,255);
*/
/*
====================================================
EXERCICI 5
====================================================
Canvia el fons.
background(0);
Llavors afegeix fill(255); per crear contrast.
*/
/*
====================================================
INTERACCIÓ
====================================================
Cada clic canvia la paraula.
*/
function mousePressed() {
let paraules = [
"ART",
"COLOR",
"FORMA",
"LLUM",
"RITME",
"CAOS",
"CODI",
"IDEA"
];
paraula = random(paraules);
}
/*
====================================================
REPTE 1 · POEMA VISUAL
====================================================
Utilitza una paraula important per a tu.
Transforma-la visualment.
L'objectiu és que el significat i la forma
estiguin relacionats.
*/
/*
====================================================
REPTE 2 · MOVIMENT
====================================================
Fes que la paraula sembli:
- respirar
- vibrar
- caure
- flotar
Utilitzant només moviment.
*/
/*
====================================================
REPTE 3 · REPETICIÓ
====================================================
Construeix una composició amb centenars
de paraules. La paraula ha d'esdevenir
textura.
*/
/*
====================================================
REPTE AVANÇAT
====================================================
Substitueix fill(0); per:
fill(
frameCount % 255,
150,
200
);
Observa com canvia el color.
*/
/*
====================================================
REFLEXIÓ ARTÍSTICA
====================================================
1. Quan deixa una paraula de semblar paraula?
2. Es pot llegir encara?
3. És text o és imatge?
4. Quin artista t'ha inspirat?
5. Quin significat té la teva obra?
*/
/*
====================================================
PROJECTE FINAL DE LA PRÀCTICA
====================================================
Crea tres versions.
VERSIÓ 1 - Text llegible.
VERSIÓ 2 - Text parcialment abstracte.
VERSIÓ 3 - Text convertit en textura visual.
Condicions:
- Utilitzar text()
- Utilitzar animació
- Utilitzar repetició
- Intenció artística clara
Guarda:
practica6_v1.png
practica6_v2.png
practica6_v3.png
====================================================
IDEA CLAU
A la pràctica 1 dibuixàvem formes.
A la pràctica 3 creàvem patrons.
A la pràctica 4 introduíem l'atzar.
A la pràctica 5 generàvem color.
Ara utilitzem les paraules
com a matèria primera.
El text deixa de ser només
informació i es converteix
en una experiència visual.
====================================================
*/
🎨 Resultat renderitzat (clic per canviar paraula)