📝 Codi explicat línia a línia
/*
====================================================
PRÀCTICA 5
COLOR GENERATIU
====================================================
REFERENTS
- Josef Albers
- Carlos Cruz-Diez
OBJECTIU
Aprendre a utilitzar:
- colorMode()
- RGB
- HSB
- paletes cromàtiques
- sistemes visuals
Fins ara hem utilitzat colors
de manera intuïtiva.
Ara convertirem el color en
el protagonista de l'obra.
Crearem un generador que
produeixi noves composicions
cromàtiques amb cada clic.
*/
function setup() {
createCanvas(900, 600);
// Vinculem el canvas al contenidor HTML
let cnv = createCanvas(900, 600);
cnv.parent("canvas-container");
generarComposicio();
}
/*
====================================================
FUNCIÓ PRINCIPAL
====================================================
Cada vegada que s'executi
generarem una nova paleta.
*/
function generarComposicio() {
/*
HSB
Hue = tonalitat
Saturation = saturació
Brightness = lluminositat
Ens permet treballar millor
amb relacions cromàtiques.
*/
colorMode(HSB, 360, 100, 100, 100);
background(0, 0, 95);
noStroke();
/*
TRIEM UN COLOR BASE
Tot el sistema cromàtic
es construirà a partir d'aquest.
*/
let colorBase = random(360);
/*
DIBUIXEM MOLTS RECTANGLES
*/
for (let i = 0; i < 20; i++) {
let x = random(width);
let y = random(height);
let ample = random(100, 250);
let alt = random(100, 250);
/*
VARIACIONS DEL COLOR BASE
*/
let to = (colorBase + random(-40, 40) + 360) % 360;
let saturacio = random(50, 100);
let brillantor = random(60, 100);
fill(
to,
saturacio,
brillantor,
70
);
rect(x, y, ample, alt);
}
/*
MOSTRA DE LA PALETA
*/
let mida = width / 5;
for (let i = 0; i < 5; i++) {
let to = (colorBase + i * 20) % 360;
fill(to, 90, 90);
rect(i * mida, height - 80, mida, 80);
}
}
/*
====================================================
INTERACCIÓ
====================================================
Cada clic genera una nova obra.
*/
function mousePressed() {
generarComposicio();
}
/*
====================================================
QUÈ ÉS RGB?
====================================================
RGB significa:
Red
Green
Blue
Exemple:
fill(255,0,0); → vermell
fill(0,255,0); → verd
fill(0,0,255); → blau
*/
/*
====================================================
QUÈ ÉS HSB?
====================================================
HSB significa:
H = Hue (to)
S = Saturation (saturació)
B = Brightness (lluminositat)
Exemple:
fill(0,100,100); → vermell intens
fill(120,100,100); → verd intens
fill(240,100,100); → blau intens
*/
/*
====================================================
PER QUÈ HSB?
====================================================
Perquè és més proper a la manera
com pensem el color.
Podem mantenir un mateix color
i canviar només:
- la intensitat
- la lluminositat
És molt útil en art generatiu.
*/
/*
====================================================
EXERCICI 1
====================================================
Canvia:
random(-40,40)
per
random(-10,10)
Resultat: paleta més uniforme.
*/
/*
====================================================
EXERCICI 2
====================================================
Canvia:
random(-40,40)
per
random(-180,180)
Resultat: paleta molt més contrastada.
*/
/*
====================================================
EXERCICI 3
====================================================
Canvia la transparència.
Ara: fill(to,saturacio,brillantor,70);
Prova: 30, 50, 100
Com afecta les superposicions?
*/
/*
====================================================
EXERCICI 4
====================================================
Canvia la forma.
Substitueix: rect(x,y,ample,alt);
per: circle(x,y,ample);
Quin efecte visual apareix?
*/
/*
====================================================
EXERCICI 5
====================================================
Redueix el nombre de formes.
Ara: 20
Prova: 5, i després 100
Com canvia la complexitat?
*/
/*
====================================================
PALETES EMOCIONALS
====================================================
Colors càlids → 0 a 60
vermells, taronges, grocs
Transmeten: energia, acció, calor
Colors freds → 180 a 300
blaus, cian, violetes
Transmeten: calma, distància, silenci
*/
/*
====================================================
REPTE 1 · GENERADOR CÀLID
====================================================
Només colors càlids. Inspiració: posta de sol.
*/
/*
====================================================
REPTE 2 · GENERADOR FRED
====================================================
Només colors freds. Inspiració: oceà, nit, gel.
*/
/*
====================================================
REPTE 3 · GENERADOR EMOCIONAL
====================================================
Intenta representar: alegria, tristesa, energia,
nostàlgia... Només amb color.
*/
/*
====================================================
REPTE AVANÇAT
====================================================
Substitueix:
let colorBase = random(360);
per:
let colorBase = mouseX % 360;
Ara el color depèn de la posició del ratolí.
*/
/*
====================================================
PREGUNTES DE REFLEXIÓ
====================================================
1. Quin color apareix més sovint?
2. Quin tipus de paleta prefereixes?
3. Les emocions poden expressar-se només amb color?
4. Quin referent t'ha inspirat més?
5. El sistema genera resultats coherents?
*/
/*
====================================================
PROJECTE FINAL DE LA PRÀCTICA
====================================================
Crea tres generadors:
VERSIÓ 1 - Paleta càlida
VERSIÓ 2 - Paleta freda
VERSIÓ 3 - Paleta lliure
Condicions:
- mínim 5 colors
- ús d'HSB
- generació automàtica
- composició abstracta
Guarda: practica5_v1.png, practica5_v2.png,
practica5_v3.png
====================================================
IDEA CLAU
A la pràctica 4 hem introduït l'atzar.
A la pràctica 5 aprenem que l'atzar pot estar
controlat.
No generem qualsevol color.
Construïm regles perquè els colors mantinguin
una relació visual.
Així apareixen les paletes cromàtiques
generatives.
L'artista no crea una imatge.
Dissenya un sistema que crea moltes imatges
possibles.
====================================================
*/