📝 Codi explicat línia a línia
/*
====================================================
PRÀCTICA 11
ECOSISTEMES DIGITALS
====================================================
REFERENTS
- teamLab
- Rafael Lozano-Hemmer
OBJECTIU
Aprendre a utilitzar:
- interacció
- múltiples objectes
- comportaments emergents
- ecosistemes visuals
- sistemes autònoms
Fins ara hem creat:
formes
patrons
animacions
partícules
pinzells interactius
Ara crearem un ecosistema.
No dissenyarem una única imatge.
Dissenyarem unes regles.
Del comportament d'aquestes regles
apareixerà una experiència visual.
Això s'anomena:
COMPORTAMENT EMERGENT
*/
let flors = [];
function setup() {
createCanvas(1000, 700);
// Vinculem el canvas al contenidor HTML
let cnv = createCanvas(1000, 700);
cnv.parent("canvas-container");
background(240);
}
/*
====================================================
ANIMACIÓ PRINCIPAL
====================================================
*/
function draw() {
background(220, 240, 255);
/*
SOL
*/
fill(255, 220, 0);
noStroke();
circle(120, 120, 100);
/*
TERRA
*/
fill(120, 180, 90);
rect(0, height - 120, width, 120);
/*
ACTUALITZAR FLORS
*/
for (let flor of flors) {
flor.actualitzar();
flor.dibuixar();
}
}
/*
====================================================
CLASSE FLOR
====================================================
Cada flor és un organisme digital.
Té:
- posició
- mida
- color
- creixement
*/
class Flor {
constructor(x, y) {
this.x = x;
this.y = y;
this.mida = 5;
this.midaMaxima = random(40, 120);
this.colorPetals = color(
random(255),
random(255),
random(255)
);
}
actualitzar() {
/*
Creixement progressiu
*/
if (this.mida < this.midaMaxima) {
this.mida += 0.3;
}
}
dibuixar() {
push();
translate(this.x, this.y);
/*
TIJA
*/
stroke(40, 120, 40);
strokeWeight(4);
line(0, 0, 0, this.mida * -1.5);
/*
FLOR
*/
translate(0, this.mida * -1.5);
noStroke();
for (let angle = 0; angle < 360; angle += 45) {
push();
rotate(radians(angle));
fill(this.colorPetals);
ellipse(
this.mida * 0.4,
0,
this.mida * 0.6,
this.mida * 0.3
);
pop();
}
/*
CENTRE
*/
fill(255, 220, 0);
circle(0, 0, this.mida * 0.4);
pop();
}
}
/*
====================================================
INTERACCIÓ
====================================================
Cada clic planta una llavor.
Al cap d'uns segons
es converteix en una flor.
*/
function mousePressed() {
if (mouseY < height - 120) {
flors.push(
new Flor(mouseX, mouseY)
);
}
}
/*
====================================================
QUÈ ÉS UN ECOSISTEMA DIGITAL?
====================================================
És un conjunt d'elements
que comparteixen regles.
Cada element és simple.
El conjunt és complex.
Exemple:
1 flor → molt simple
100 flors → ecosistema
*/
/*
====================================================
COMPORTAMENT EMERGENT
====================================================
Cap flor sap:
- quantes flors hi ha
- on són les altres
Però totes juntes creen un jardí.
Això és una propietat emergent.
*/
/*
====================================================
EXERCICI 1
====================================================
Canvia this.mida += 0.3 per this.mida += 1
Resultat: creixement més ràpid.
*/
/*
====================================================
EXERCICI 2
====================================================
Canvia random(40,120) per random(20,200)
Resultat: flors molt diferents.
*/
/*
====================================================
EXERCICI 3
====================================================
Canvia angle+=45 per angle+=30
Obtindràs més pètals.
*/
/*
====================================================
EXERCICI 4
====================================================
Canvia els colors.
Per exemple: només blaus, només vermells
o tons naturals.
*/
/*
====================================================
EXERCICI 5
====================================================
Canvia el paisatge.
Afegeix: núvols, muntanyes, estrelles, lluna.
*/
/*
====================================================
REPTE 1 · JARDÍ GENERATIU
====================================================
Ha de semblar un jardí real.
Utilitza: colors naturals, diferents mides,
moltes flors.
*/
/*
====================================================
REPTE 2 · JARDÍ FANTÀSTIC
====================================================
Colors impossibles. Plantes surrealistes.
Inspiració: somnis.
*/
/*
====================================================
REPTE 3 · BOSC IMPOSSIBLE
====================================================
Substitueix les flors per arbres geomètrics.
*/
/*
====================================================
REPTE 4 · MEDUSES DIGITALS
====================================================
Transforma les flors en organismes marins.
*/
/*
====================================================
REPTE AVANÇAT
====================================================
Afegeix moviment.
Exemple:
let oscilacio = sin(frameCount*0.03 + this.x)*5;
Utilitza-la per moure els pètals.
El jardí semblarà viu.
*/
/*
====================================================
ESBORRAR EL JARDÍ
====================================================
Prem la tecla C.
*/
function keyPressed() {
if (key === "c" || key === "C") {
flors = [];
}
}
/*
====================================================
PREGUNTES DE REFLEXIÓ
====================================================
1. Què és més important: una flor o el conjunt?
2. Qui crea el jardí? Tu? L'ordinador? Tots dos?
3. Quines regles has dissenyat?
4. Quin ecosistema has creat?
5. Com canvia l'obra amb el temps?
*/
/*
====================================================
PROJECTE FINAL DE LA PRÀCTICA
====================================================
Escull una opció:
- Jardí generatiu
- Bosc impossible
- Meduses digitals
- Núvol interactiu
- Ciutat abstracta
CONDICIONS
✓ Creixement o transformació
✓ Interacció amb l'usuari
✓ Múltiples organismes
✓ Comportament emergent
✓ Intenció artística
Guarda:
practica11_v1.png
practica11_v2.png
practica11_v3.png
====================================================
IDEA CLAU
A la pràctica 9 treballàvem
amb moltes partícules.
A la pràctica 10 l'usuari
intervenia en l'obra.
Ara combinem les dues idees.
Creem organismes digitals
que creixen, conviuen i formen
un ecosistema visual.
Ja no dissenyem formes.
Dissenyem comportaments.
I dels comportaments emergeix
l'obra artística.
====================================================
*/
🎨 Resultat renderitzat (clic per plantar, tecla C per netejar)