📝 Codi explicat línia a línia
/*
=========================================
PRÀCTICA 1 - EL LLENÇ DIGITAL
=========================================
OBJECTIU
Aprendre a:
1. Crear un llenç digital.
2. Posicionar formes.
3. Utilitzar colors.
4. Crear una composició abstracta.
Referents:
- Wassily Kandinsky
- Sonia Delaunay
La programació actuarà com un pinzell digital.
*/
/*
=========================================
SETUP()
=========================================
La funció setup() s'executa UNA SOLA VEGADA
quan s'obre la pàgina.
Tot el que posem aquí es dibuixarà una vegada.
*/
function setup() {
/*
-------------------------------------
PAS 1. CREAR EL LLENÇ
-------------------------------------
createCanvas(amplada, alçada)
Amplada = 800 píxels
Alçada = 600 píxels
Guardem la referència per vincular-la
al contenidor HTML #canvas-container.
*/
let cnv = createCanvas(800, 600);
cnv.parent("canvas-container"); // ← així el canvas apareix al panell dret
/*
-------------------------------------
PAS 2. COLOR DE FONS
-------------------------------------
background()
Valor 255 = blanc
Valor 0 = negre
*/
background(240);
/*
-------------------------------------
PAS 3. DEFINIR EL CONTORN
-------------------------------------
*/
stroke(0); // color del contorn (negre)
strokeWeight(2); // gruix del contorn (2 píxels)
/*
-------------------------------------
PAS 4. DIBUIXAR FORMES
-------------------------------------
circle(x, y, mida)
x = posició horitzontal
y = posició vertical
mida = diàmetre
*/
/*
Cercle vermell
*/
fill(255, 0, 0); // vermell pur (R=255, G=0, B=0)
circle(150, 150, 120); // centre a (150,150), diàmetre 120
/*
Cercle blau
*/
fill(0, 100, 255); // blau elèctric
circle(300, 250, 180); // centre a (300,250), diàmetre 180
/*
Cercle groc
*/
fill(255, 220, 0); // groc intens
circle(600, 180, 140); // centre a (600,180), diàmetre 140
/*
-------------------------------------
PAS 5. RECTANGLES
-------------------------------------
rect(x, y, amplada, alçada)
*/
fill(0, 200, 120); // verd maragda
rect(120, 400, 250, 90); // cantonada sup. esq. a (120,400)
fill(180, 80, 255); // lila
rect(450, 320, 180, 180); // quadrat lila de 180×180
/*
-------------------------------------
PAS 6. FORMES SUPERPOSADES
-------------------------------------
Quan una forma es dibuixa després
d'una altra, queda a sobre.
*/
fill(255, 120, 0); // taronja
circle(500, 420, 100); // cercle taronja que es superposa
/*
-------------------------------------
PAS 7. ACABAR
-------------------------------------
noLoop() evita que el programa
es repeteixi contínuament.
*/
noLoop();
}
/*
====================================================
EXPLICACIÓ DEL SISTEMA DE COORDENADES
====================================================
Punt superior esquerre:
(0 , 0)
X →
+----------------------------
|
|
|
v Y
Si augmenta X → la forma va cap a la dreta
Si disminueix X ← la forma va cap a l'esquerra
Si augmenta Y ↓ la forma baixa
Si disminueix Y ↑ la forma puja
Exemple:
circle(100, 100, 50);
X = 100
Y = 100
Apareixerà a la part superior esquerra.
*/
/*
====================================================
EXERCICI 1
====================================================
Canvia:
background(240);
per:
background(0);
Què passa? → El fons es torna negre.
*/
/*
====================================================
EXERCICI 2
====================================================
Canvia el color d'un cercle.
Exemple:
fill(255, 0, 0); → vermell
Prova:
fill(0, 255, 0); → verd
fill(255, 0, 255); → magenta
fill(0, 255, 255); → cian
*/
/*
====================================================
EXERCICI 3
====================================================
Canvia les coordenades.
Exemple:
circle(150, 150, 120);
Prova:
circle(400, 300, 120);
Què ha canviat? → El cercle s'ha desplaçat al centre.
*/
/*
====================================================
EXERCICI 4
====================================================
Canvia la mida.
Exemple:
circle(150, 150, 120);
Prova:
circle(150, 150, 250);
Quina diferència hi ha? → El cercle és molt més gran.
*/
/*
====================================================
REPTE FINAL
====================================================
Crea una composició pròpia.
Condicions:
- 5 o més cercles
- 3 o més rectangles
- mínim 5 colors
- formes superposades
No facis:
- cases
- arbres
- cotxes
- persones
Ha de ser una obra abstracta.
Pensa en:
- l'equilibri visual
- el color
- les grandàries
- la distribució de l'espai
*/
/*
====================================================
VERSIÓ 1
====================================================
Composició equilibrada
Les formes queden repartides
de manera uniforme.
*/
/*
====================================================
VERSIÓ 2
====================================================
Composició asimètrica
Les formes es concentren
en una zona concreta.
*/
/*
====================================================
VERSIÓ 3
====================================================
Explosió de color
Colors molt intensos.
Moltes superposicions.
*/
/*
====================================================
REFLEXIÓ FINAL
====================================================
1. Quin és el color dominant?
2. Quina composició t'agrada més?
3. Has buscat ordre o caos?
4. Quin artista et recorda?
5. Quina emoció transmet la teva obra?
====================================================
*/