📝 Codi explicat línia a línia
/*
====================================================
PRÀCTICA 4
L'ART DEL CAOS
====================================================
REFERENTS
- John Cage
- Casey Reas
OBJECTIU
Aprendre a utilitzar:
- random()
- aleatorietat
- sistemes generatius
- variació automàtica
Fins ara hem decidit exactament on
anava cada forma.
Ara permetrem que l'ordinador
prengui algunes decisions.
Cada obra serà diferent.
Això és una de les bases de
l'art generatiu contemporani.
*/
function setup() {
createCanvas(800, 800);
// Vinculem el canvas al contenidor HTML
let cnv = createCanvas(800, 800);
cnv.parent("canvas-container");
generarPoster();
}
/*
====================================================
FUNCIÓ GENERAR POSTER
====================================================
Una funció és un bloc de codi
que podem reutilitzar.
*/
function generarPoster() {
background(250);
stroke(0);
strokeWeight(2);
/*
Crearem 50 formes aleatòries
*/
for (let i = 0; i < 50; i++) {
/*
POSICIÓ ALEATÒRIA
*/
let x = random(width);
let y = random(height);
/*
MIDA ALEATÒRIA
*/
let mida = random(20, 150);
/*
COLOR ALEATORI
*/
let r = random(255);
let g = random(255);
let b = random(255);
fill(r, g, b, 180); // 180 és la transparència (alfa)
/*
TRIAR UNA FORMA
*/
let tipus = random(3);
if (tipus < 1) {
circle(x, y, mida);
} else if (tipus < 2) {
rect(x, y, mida, mida);
} else {
triangle(
x, y - mida / 2,
x - mida / 2, y + mida / 2,
x + mida / 2, y + mida / 2
);
}
}
}
/*
====================================================
QUÈ ÉS RANDOM()?
====================================================
random() genera un nombre aleatori.
Exemple:
random(100) pot generar 12, 54, 87, 3, 99...
Cada execució és diferent.
*/
/*
====================================================
EXEMPLES
====================================================
random(width) → Posició horitzontal aleatòria.
random(height) → Posició vertical aleatòria.
random(20,100) → Valor entre 20 i 100.
*/
/*
====================================================
EXERCICI 1
====================================================
Canvia:
for(let i=0; i<50; i++)
per
for(let i=0; i<200; i++)
Què passa? La imatge és més simple o més complexa?
*/
/*
====================================================
EXERCICI 2
====================================================
Canvia les mides.
Ara: random(20,150)
Prova: random(10,50) o random(100,250)
*/
/*
====================================================
EXERCICI 3
====================================================
Utilitza només cercles.
Substitueix tot l'IF per:
circle(x,y,mida);
Com canvia l'estètica?
*/
/*
====================================================
EXERCICI 4
====================================================
Utilitza només rectangles.
rect(x,y,mida,mida);
Recorda Mondrian? O sembla una altra cosa?
*/
/*
====================================================
EXERCICI 5
====================================================
Canvia el fons.
background(0);
background(50);
background(255,220,180);
Observa com es transformen les relacions entre colors.
*/
/*
====================================================
INTERACCIÓ
====================================================
Quan fem clic amb el ratolí,
es genera un nou pòster.
Cada clic és una obra nova.
*/
function mousePressed() {
generarPoster();
}
/*
====================================================
COM FUNCIONA MOUSEPRESSED()?
====================================================
Aquesta funció s'executa
automàticament quan fem clic.
És una primera introducció
a l'art interactiu.
L'usuari participa en el procés.
*/
/*
====================================================
REPTE 1
====================================================
Crear una sèrie de pòsters.
CONDICIONS
- Cada clic genera una obra nova.
- Mínim 50 formes.
- Mínim 3 colors.
- Mínim 2 tipus de formes.
Guarda 3 captures de pantalla.
*/
/*
====================================================
REPTE 2
====================================================
PÒSTER MINIMALISTA
Utilitza:
- blanc
- negre
- un únic color accent
Màxim 20 formes.
*/
/*
====================================================
REPTE 3
====================================================
PÒSTER EXPLOSIU
Utilitza:
- 200 formes
- colors intensos
- formes grans
- superposicions
Inspiració: caos visual.
*/
/*
====================================================
REPTE AVANÇAT
====================================================
Canvia el color segons la mida.
Exemple:
let mida = random(20,150);
fill(mida, 0, 255 - mida);
circle(x, y, mida);
Observa la relació entre color i escala.
*/
/*
====================================================
PREGUNTES DE REFLEXIÓ
====================================================
1. Has controlat tota l'obra?
2. Quines decisions pren l'ordinador?
3. Quines decisions prens tu?
4. El resultat és realment aleatori?
5. L'atzar pot ser una eina artística?
*/
/*
====================================================
DESAFIAMENT FINAL
====================================================
Crea tres generadors diferents.
VERSIÓ 1 - Ordre
- poques formes
- colors suaus
VERSIÓ 2 - Equilibri
- colors contrastats
- formes variades
VERSIÓ 3 - Caos
- moltes formes
- superposicions
- colors intensos
Guarda: practica4_v1.png, practica4_v2.png, practica4_v3.png
====================================================
IDEA CLAU
A la pràctica 3 creàvem patrons mitjançant regles.
A la pràctica 4 introduïm l'atzar dins del sistema.
Ja no sabem exactament quina imatge apareixerà.
Dissenyem les regles, però el resultat final emergeix
de la col·laboració entre l'artista i l'ordinador.
Aquesta és una de les idees centrals de l'art generatiu.
====================================================
*/
🎨 Resultat renderitzat (clic per regenerar)