📝 Codi explicat línia a línia
/*
====================================================
PRÀCTICA 13
GEOMETRIA TRANSFORMADA
====================================================
REFERENTS
- Vera Molnár
- Georg Nees
- Art minimalista generatiu
OBJECTIU
Aprendre a utilitzar:
- translate()
- rotate()
- scale()
- push() i pop()
- transformacions geomètriques
Fins ara hem dibuixat formes en posicions
fixes. Ara aprendrem a moure, girar i
escalar el sistema de coordenades.
Això ens permet crear composicions
complexes amb molt poques línies.
*/
/*
Variable global per al paràmetre de
transformació. Canvia amb cada clic.
*/
let factor = 0.5;
function setup() {
createCanvas(800, 800);
// Vinculem el canvas al contenidor HTML
let cnv = createCanvas(800, 800);
cnv.parent("canvas-container");
// Desactivem el bucle continu
noLoop();
}
/*
====================================================
DRAW()
====================================================
Es crida un cop gràcies a noLoop().
Dibuixarem una graella de motius
transformats.
*/
function draw() {
background(245, 240, 235);
noStroke();
/*
Definim la mida del motiu i l'espaiat.
*/
let cols = 8;
let files = 8;
let marge = 40;
let ampleCel = (width - marge * 2) / cols;
let altCel = (height - marge * 2) / files;
/*
Dibuixem un motiu a cada cel·la.
*/
for (let fila = 0; fila < files; fila++) {
for (let col = 0; col < cols; col++) {
/*
Posició central de la cel·la actual.
*/
let x = marge + col * ampleCel + ampleCel / 2;
let y = marge + fila * altCel + altCel / 2;
/*
Cridem la funció que dibuixa
el motiu, passant-li la posició
i el factor actual.
*/
dibuixarMotiu(x, y, ampleCel, factor);
}
}
}
/*
====================================================
FUNCIÓ DIBUIXAR MOTIU
====================================================
Dibuixa una forma geomètrica composta
aplicant transformacions.
*/
function dibuixarMotiu(x, y, mida, factor) {
/*
push() guarda l'estat actual de
les transformacions.
pop() el recupera al final.
*/
push();
/*
Mou l'origen de coordenades
al centre de la cel·la.
*/
translate(x, y);
/*
Gira segons el factor i la posició.
L'angle és proporcional a x i y
per crear variacions suaus.
*/
let angle = radians(
(x + y) * factor
);
rotate(angle);
/*
Escala el motiu segons la mida
de la cel·la i un factor variable.
*/
let escala = mida * 0.3 * (0.5 + factor);
scale(escala);
/*
Dibuixem el motiu com si l'origen
fos al centre (0,0).
*/
// Color lligat a l'angle i al factor
fill(
(angle * 30 + 120) % 255,
150 + factor * 100,
180 + factor * 70,
220
);
// Creu formada per dos rectangles
rectMode(CENTER);
rect(0, 0, 1.2, 0.2);
rect(0, 0, 0.2, 1.2);
// Cercle central
fill(255, 220, 120, 200);
circle(0, 0, 0.4);
// Quatre cercles petits als extrems
fill(255, 120, 80, 200);
let distancia = 0.6;
circle(distancia, 0, 0.15);
circle(-distancia, 0, 0.15);
circle(0, distancia, 0.15);
circle(0, -distancia, 0.15);
/*
Recuperem l'estat anterior
de les transformacions.
*/
pop();
}
/*
====================================================
INTERACCIÓ
====================================================
Cada clic canvia el factor,
generant una nova composició.
*/
function mousePressed() {
// factor aleatori entre 0.2 i 1.8
factor = random(0.2, 1.8);
// Redibuixa la imatge
redraw();
}
/*
====================================================
QUÈ SÓN push() I pop()?
====================================================
push() guarda la configuració actual:
- posició de l'origen
- rotació
- escala
- estils
pop() la recupera.
Així evitem que les transformacions
s'acumulin entre motius.
*/
/*
====================================================
QUÈ FA translate()?
====================================================
Mou l'origen de coordenades.
Després d'un translate(100, 50),
dibuixar un cercle a (0,0)
apareix a (100,50).
*/
/*
====================================================
QUÈ FA rotate()?
====================================================
Gira el sistema de coordenades.
rotate(radians(45)) gira 45°.
Tot el que es dibuixi després
apareixerà girat.
*/
/*
====================================================
QUÈ FA scale()?
====================================================
Canvia la mida del sistema.
scale(2) duplica la mida.
scale(0.5) la redueix a la meitat.
*/
/*
====================================================
EXERCICI 1
====================================================
Canvia el nombre de columnes i files
a 10 o a 5. Com canvia la densitat?
*/
/*
====================================================
EXERCICI 2
====================================================
Modifica la fórmula de l'angle.
Prova:
let angle = radians(x * factor);
o
let angle = radians(y * factor);
Observa com canvien les orientacions.
*/
/*
====================================================
EXERCICI 3
====================================================
Substitueix la creu per un altre motiu:
- un triangle
- un rectangle sol
- una línia
Com afecta l'estil visual?
*/
/*
====================================================
EXERCICI 4
====================================================
Canvia els colors dins del motiu.
Prova tons monocromàtics
o colors complementaris.
*/
/*
====================================================
REPTE 1 · MINIMALISME GENERATIU
====================================================
Utilitza només blanc, negre i un
color accent. Crea una composició
elegant i senzilla.
*/
/*
====================================================
REPTE 2 · EXPLOSIÓ DE COLOR
====================================================
Colors vibrants, molts elements.
Inspiració: disseny tèxtil digital.
*/
/*
====================================================
REPTE 3 · METAMORFOSI
====================================================
Fes que el factor canviï gradualment
amb el moviment del ratolí en lloc
de fer clic. Pista: mouseX/mouseY.
*/
/*
====================================================
REPTE AVANÇAT
====================================================
Crea dos motius diferents i alterna'ls
segons la fila o columna (if/else).
*/
/*
====================================================
PREGUNTES DE REFLEXIÓ
====================================================
1. Quina diferència hi ha entre
moure un motiu i moure l'origen?
2. Per què fem servir push() i pop()?
3. Què passaria si no els utilitzéssim?
4. Quin efecte té combinar translate(),
rotate() i scale() en un sol motiu?
5. Amb quin estil artístic relacionaries
les obres creades amb transformacions?
*/
/*
====================================================
PROJECTE FINAL DE LA PRÀCTICA
====================================================
Crea un tapís generatiu amb
transformacions.
CONDICIONS:
✓ Graella de mínim 6x6 motius
✓ Ús de translate(), rotate(), scale()
✓ Ús correcte de push() i pop()
✓ Colors harmoniosos
✓ Interacció amb clic o ratolí
====================================================
IDEA CLAU
Amb les transformacions geomètriques
podem crear composicions riques
sense dibuixar formes complicades.
Una forma simple es converteix en
un patró complex quan es repeteix
amb rotació, escala i translació.
Aquesta és una de les tècniques
fonamentals de l'art generatiu
des dels anys seixanta.
====================================================
*/