📝 Codi explicat línia a línia
/*
====================================================
PRÀCTICA 9
SISTEMES DE PARTÍCULES
====================================================
REFERENTS
- Jared Tarbell
- Refik Anadol
OBJECTIU
Aprendre a utilitzar:
- variables de moviment
- velocitat
- acceleració
- arrays
- sistemes de partícules
Fins ara hem animat formes.
Ara crearem centenars d'elements
independents que es mouran
simultàniament.
Aquest és un dels fonaments de:
- la pluja
- la neu
- el fum
- les espurnes
- els eixams
- les simulacions naturals
*/
let particules = [];
function setup() {
createCanvas(900, 600);
// Vinculem el canvas al contenidor HTML
let cnv = createCanvas(900, 600);
cnv.parent("canvas-container");
/*
CREEM MOLTES PARTÍCULES
*/
for (let i = 0; i < 300; i++) {
particules.push(
new Particula()
);
}
}
/*
====================================================
ANIMACIÓ PRINCIPAL
====================================================
*/
function draw() {
background(10, 20, 40);
for (let p of particules) {
p.actualitzar();
p.dibuixar();
}
}
/*
====================================================
CLASSE PARTÍCULA
====================================================
Cada objecte guarda:
- posició
- velocitat
- mida
*/
class Particula {
constructor() {
this.x = random(width);
this.y = random(-height, height);
this.velocitatY = random(2, 8);
this.mida = random(2, 8);
}
actualitzar() {
/*
La partícula cau
*/
this.y += this.velocitatY;
/*
Quan surt de la pantalla
torna a començar.
*/
if (this.y > height) {
this.y = random(-100, 0);
this.x = random(width);
}
}
dibuixar() {
noStroke();
fill(180, 220, 255);
circle(
this.x,
this.y,
this.mida
);
}
}
/*
====================================================
QUÈ ÉS UNA PARTÍCULA?
====================================================
Una partícula és un objecte petit
amb propietats pròpies.
Exemple:
Posició: x = 100, y = 200
Velocitat: 4
Mida: 6
Cada partícula és diferent.
*/
/*
====================================================
QUÈ ÉS UNA VELOCITAT?
====================================================
La velocitat indica quant es mou
un objecte a cada fotograma.
Exemple:
this.y += 5;
Cada fotograma baixa 5 píxels.
*/
/*
====================================================
EXERCICI 1
====================================================
Canvia 300 per 50 o 1000
Com afecta l'escena?
*/
/*
====================================================
EXERCICI 2
====================================================
Canvia random(2,8) de la mida
per random(10,20)
Les gotes seran més grans.
*/
/*
====================================================
EXERCICI 3
====================================================
Canvia random(2,8) de velocitat
per random(1,20)
Apareixen gotes molt ràpides.
*/
/*
====================================================
EXERCICI 4
====================================================
Canvia el color.
Exemple:
fill(255,200,50); → espurnes
fill(255); → neu
fill(255,100,100); → pols màgica
*/
/*
====================================================
EXERCICI 5
====================================================
Canvia el fons.
Experimenta amb diferents atmosferes visuals.
*/
/*
====================================================
ACCELERACIÓ
====================================================
Actualment: velocitat constant.
També podem simular gravetat.
Afegiu:
this.velocitatY += 0.05;
dins actualitzar()
Resultat: les partícules acceleren.
*/
/*
====================================================
REPTE 1 · NEVADA
====================================================
Utilitza:
- color blanc
- moviment lent
- mides variades
Inspiració: paisatge hivernal.
*/
/*
====================================================
REPTE 2 · PLUJA INTENSA
====================================================
Utilitza:
- moltes partícules
- velocitats elevades
- colors freds
*/
/*
====================================================
REPTE 3 · ESPURNES
====================================================
Utilitza:
- colors càlids
- moviment ràpid
- fons negre
Inspiració: foc artificial.
*/
/*
====================================================
INTERACCIÓ
====================================================
Afegirem noves partícules
quan fem clic.
*/
function mousePressed() {
for (let i = 0; i < 50; i++) {
particules.push(
new Particula()
);
}
}
/*
====================================================
ARRAYS
====================================================
particules = [];
És una col·lecció d'elements.
Podem guardar:
partícula 1
partícula 2
partícula 3
...
sense crear centenars
de variables diferents.
*/
/*
====================================================
BUCLE FOR OF
====================================================
for(let p of particules) { }
Recorre totes les partícules
una per una.
*/
/*
====================================================
REPTE AVANÇAT
====================================================
Canvia circle() per line() o rect()
i crea altres estils visuals.
*/
/*
====================================================
PARTÍCULES SEGUINT EL RATOLÍ
====================================================
Canvia el constructor:
this.x = mouseX;
this.y = mouseY;
i genera noves partícules
en cada clic.
Apareixeran explosions visuals.
*/
/*
====================================================
PREGUNTES DE REFLEXIÓ
====================================================
1. Quina diferència hi ha entre
animar una forma i animar 300?
2. Què aporta la velocitat?
3. Què aporta l'acceleració?
4. Quin fenomen natural has intentat simular?
5. Com canvia l'obra quan augmenta
el nombre de partícules?
*/
/*
====================================================
PROJECTE FINAL DE LA PRÀCTICA
====================================================
Crea tres simulacions.
VERSIÓ 1 - Pluja
VERSIÓ 2 - Neu
VERSIÓ 3 - Sistema lliure
Condicions:
- mínim 200 partícules
- moviment automàtic
- ús de velocitat
- estil visual coherent
Guarda:
practica9_pluja.png
practica9_neu.png
practica9_lliure.png
====================================================
IDEA CLAU
A la pràctica 8 animàvem formes individuals.
Ara treballem amb col·lectius.
L'obra emergeix del comportament
de centenars de petits elements.
La complexitat ja no ve d'una forma.
Ve de la interacció entre moltes.
Aquesta és una idea fonamental
de l'art generatiu contemporani,
la simulació i els sistemes complexos.
====================================================
*/
🎨 Resultat renderitzat (clic per afegir partícules)