📝 Codi explicat línia a línia
/*
====================================================
PRÀCTICA 2
GEOMETRIA I COMPOSICIÓ
====================================================
OBJECTIU
Aprendre a utilitzar:
- rect()
- line()
- circle()
- Colors RGB
Crearem una composició inspirada en:
- Piet Mondrian
- Theo van Doesburg
L'objectiu NO és copiar una obra.
L'objectiu és entendre com es construeix
una composició geomètrica mitjançant codi.
*/
function setup() {
/*
------------------------------------------------
PAS 1. CREAR EL LLENÇ
------------------------------------------------
*/
let cnv = createCanvas(800, 600);
cnv.parent("canvas-container");
/*
------------------------------------------------
PAS 2. COLOR DE FONS
------------------------------------------------
*/
background(255);
/*
------------------------------------------------
PAS 3. CONFIGURAR LES LÍNIES
------------------------------------------------
Mondrian utilitzava línies negres
gruixudes per separar els espais.
*/
stroke(0); // color negre per al contorn i línies
strokeWeight(8); // gruix de 8 píxels
/*
------------------------------------------------
PAS 4. DIBUIXAR RECTANGLES DE COLOR
------------------------------------------------
RGB
Vermell = (255,0,0)
Blau = (0,0,255)
Groc = (255,255,0)
*/
/*
Rectangle vermell
*/
fill(220, 40, 40);
rect(0, 0, 250, 220);
/*
Rectangle groc
*/
fill(255, 220, 0);
rect(250, 0, 220, 120);
/*
Rectangle blau
*/
fill(40, 80, 255);
rect(600, 350, 200, 250);
/*
Rectangles blancs (per netejar zones)
*/
fill(255);
rect(0, 220, 250, 380);
fill(255);
rect(250, 120, 550, 230);
/*
------------------------------------------------
PAS 5. DIBUIXAR LES LÍNIES ESTRUCTURALS
------------------------------------------------
Aquestes línies negres divideixen l'espai
i recorden l'estil de Mondrian.
*/
line(250, 0, 250, 600); // vertical esquerra
line(470, 0, 470, 350); // vertical mitjana (fins a 350)
line(600, 350, 600, 600); // vertical dreta (a partir de 350)
line(0, 220, 250, 220); // horitzontal superior (tall curt)
line(250, 120, 800, 120); // horitzontal sota el groc
line(250, 350, 800, 350); // horitzontal que separa el blau
/*
------------------------------------------------
PAS 6. FINALITZAR
------------------------------------------------
*/
noLoop();
}
/*
====================================================
QUÈ ÉS RGB?
====================================================
RGB significa:
R = Red (vermell)
G = Green (verd)
B = Blue (blau)
Cada color pot tenir un valor
entre 0 i 255.
Exemples:
fill(255,0,0); → vermell
fill(0,255,0); → verd
fill(0,0,255); → blau
fill(255,255,0); → groc
fill(255); → blanc
fill(0); → negre
*/
/*
====================================================
COM FUNCIONA RECT() ?
====================================================
rect(x, y, amplada, alçada);
Exemple:
rect(100, 100, 200, 80);
100 = posició X
100 = posició Y
200 = amplada
80 = alçada
*/
/*
====================================================
COM FUNCIONA LINE() ?
====================================================
line(x1, y1, x2, y2);
Exemple:
line(0, 0, 800, 600);
Dibuixa una línia diagonal.
*/
/*
====================================================
EXERCICI 1
====================================================
Canvia els colors.
Exemple:
fill(220,40,40);
per:
fill(0,200,120);
Observa com canvia
l'equilibri visual.
*/
/*
====================================================
EXERCICI 2
====================================================
Canvia la posició
dels rectangles.
Exemple:
rect(0,0,250,220);
prova:
rect(50,50,250,220);
Què passa?
*/
/*
====================================================
EXERCICI 3
====================================================
Canvia el gruix
de les línies.
Exemple:
strokeWeight(8);
prova:
strokeWeight(2);
o
strokeWeight(15);
*/
/*
====================================================
EXERCICI 4
====================================================
Afegeix un rectangle nou.
Exemple:
fill(255,100,0);
rect(500,450,120,120);
*/
/*
====================================================
REPTE CREATIU
====================================================
Crea una obra inspirada en
Mondrian o Van Doesburg.
Condicions:
- mínim 8 rectangles
- mínim 3 colors
- línies negres
- espais blancs
No copiïs directament una obra.
Crea una composició original.
*/
/*
====================================================
VERSIÓ 1
====================================================
Composició molt ordenada.
Predomini d'horitzontals i verticals.
*/
/*
====================================================
VERSIÓ 2
====================================================
Composició més asimètrica.
Pocs colors però molt contrast.
*/
/*
====================================================
VERSIÓ 3
====================================================
Interpretació lliure.
Utilitza colors diferents dels
de Mondrian.
*/
/*
====================================================
REFLEXIÓ FINAL
====================================================
1. Quins colors has utilitzat?
2. Quin rectangle és el més important?
3. Has creat equilibri o tensió visual?
4. Quina diferència hi ha entre
una pintura feta a mà i una feta
amb codi?
5. Quina és la teva versió preferida?
====================================================
*/