📝 Codi explicat línia a línia
/*
====================================================
PRÀCTICA 12
CAMPS DE FLUX
====================================================
REFERENTS
- Tyler Hobbs
- Robert Hodgin
OBJECTIU
Aprendre a utilitzar:
- vectors
- soroll Perlin
- camps de flux
- moviment autònom
- pintura generativa
Aquesta és una de les tècniques més
utilitzades en l'art generatiu actual.
Crearem centenars de partícules que
seguiran un camp invisible de forces.
No dibuixarem directament.
Dissenyarem les regles del moviment.
Del moviment apareixerà l'obra.
*/
let particules = [];
function setup() {
createCanvas(1000, 700);
// Vinculem el canvas al contenidor HTML
let cnv = createCanvas(1000, 700);
cnv.parent("canvas-container");
background(250);
/*
Creem moltes partícules.
*/
for (let i = 0; i < 1000; i++) {
particules.push(
new Particula(
random(width),
random(height)
)
);
}
}
/*
====================================================
ANIMACIÓ PRINCIPAL
====================================================
*/
function draw() {
/*
No utilitzem background()
perquè volem deixar rastre.
Les partícules pinten
sobre el llenç.
*/
for (let p of particules) {
p.actualitzar();
p.dibuixar();
}
}
/*
====================================================
CLASSE PARTÍCULA
====================================================
*/
class Particula {
constructor(x, y) {
this.x = x;
this.y = y;
this.xAnterior = x;
this.yAnterior = y;
}
actualitzar() {
/*
Guardem la posició anterior.
*/
this.xAnterior = this.x;
this.yAnterior = this.y;
/*
CAMP DE FLUX
noise() genera un angle.
Cada zona de l'espai té
una direcció pròpia.
*/
let angle = noise(
this.x * 0.005,
this.y * 0.005
) * TWO_PI * 4;
/*
VECTOR DE MOVIMENT
*/
this.x += cos(angle) * 2;
this.y += sin(angle) * 2;
/*
Si surt de la pantalla,
reapareix en un lloc nou.
*/
if (
this.x < 0 ||
this.x > width ||
this.y < 0 ||
this.y > height
) {
this.x = random(width);
this.y = random(height);
this.xAnterior = this.x;
this.yAnterior = this.y;
}
}
dibuixar() {
strokeWeight(1);
/*
Color segons la posició.
*/
stroke(
map(this.x, 0, width, 0, 255),
map(this.y, 0, height, 100, 255),
200,
40
);
line(
this.xAnterior,
this.yAnterior,
this.x,
this.y
);
}
}
/*
====================================================
QUÈ ÉS UN VECTOR?
====================================================
Un vector és una direcció.
Exemples: → ↑ ↗ ↙
En aquesta pràctica
cada partícula segueix
un vector diferent.
*/
/*
====================================================
QUÈ ÉS UN CAMP DE FLUX?
====================================================
És un conjunt de vectors.
Imagineu:
↗ ↗ ↑ ↑
→ ↗ ↑ ↖
→ → ↑ ↖
↘ → ↗ ↑
Cada partícula segueix
la direcció local.
Apareixen camins orgànics.
*/
/*
====================================================
PER QUÈ NOISE()?
====================================================
random() canvia bruscament.
noise() canvia suaument.
Per això genera fluxos
semblants a:
- fum
- vent
- aigua
- turbulències
*/
/*
====================================================
EXERCICI 1
====================================================
Canvia 0.005 per 0.001
Resultat: flux molt suau.
*/
/*
====================================================
EXERCICI 2
====================================================
Canvia 0.005 per 0.02
Resultat: flux molt turbulent.
*/
/*
====================================================
EXERCICI 3
====================================================
Canvia 1000 per 3000
Resultat: obra més densa.
*/
/*
====================================================
EXERCICI 4
====================================================
Canvia * 2 per * 5
Les partícules es mouran
molt més ràpid.
*/
/*
====================================================
EXERCICI 5
====================================================
Canvia els colors.
Prova:
stroke(0,0,0,20);
stroke(255,100,0,30);
stroke(0,150,255,40);
*/
/*
====================================================
INTERACCIÓ
====================================================
El ratolí modifica el flux.
*/
function mousePressed() {
noiseSeed(
floor(random(10000))
);
background(250);
}
/*
====================================================
CONTROL EN DIRECTE
====================================================
Mou el ratolí.
La seva posició afectarà
la forma del camp.
Substitueix 0.005 per
map(mouseX,0,width,0.001,0.03)
i observa què passa.
*/
/*
====================================================
REPTE 1 · FUM DIGITAL
====================================================
Utilitza: grisos, transparències, moviment lent.
*/
/*
====================================================
REPTE 2 · RIU ABSTRACTE
====================================================
Colors blaus. Flux paral·lel. Inspiració: aigua.
*/
/*
====================================================
REPTE 3 · GALÀXIA GENERATIVA
====================================================
Colors: violetes, blaus, blancs.
Gran densitat de partícules.
*/
/*
====================================================
REPTE 4 · PINTURA AUTOMÀTICA
====================================================
No ha de semblar una simulació.
Ha de semblar una obra abstracta.
*/
/*
====================================================
REPTE AVANÇAT
====================================================
Canvia line() per circle(), point()
o petits rectangles.
Observa les diferències estètiques.
*/
/*
====================================================
NETEJAR EL LLENÇ
====================================================
Prem la tecla C.
*/
function keyPressed() {
if (key === 'c' || key === 'C') {
background(250);
}
}
/*
====================================================
PREGUNTES DE REFLEXIÓ
====================================================
1. Què és un camp de flux?
2. Qui dibuixa l'obra? Tu? L'algorisme? Les partícules?
3. Quina relació hi ha entre noise() i moviment natural?
4. Quin referent artístic t'ha inspirat més?
5. Quan deixa de ser codi i es converteix en pintura?
*/
/*
====================================================
PROJECTE FINAL DE LA PRÀCTICA
====================================================
Crea tres camps de flux.
VERSIÓ 1 - Flux tranquil.
VERSIÓ 2 - Flux turbulent.
VERSIÓ 3 - Interpretació lliure.
CONDICIONS
✓ Ús de noise()
✓ Ús de vectors
✓ Mínim 500 partícules
✓ Interacció amb l'usuari
✓ Intencionalitat artística
Guarda:
practica12_v1.png
practica12_v2.png
practica12_v3.png
====================================================
IDEA CLAU
Pràctica 1: Dibuixem formes.
Pràctica 3: Creem patrons.
Pràctica 4: Introduïm l'atzar.
Pràctica 8: Afegim moviment.
Pràctica 10: Afegim interacció.
Pràctica 12: Creem sistemes complexos
que produeixen obres de manera
gairebé autònoma.
Aquesta és una de les tècniques
més representatives del
Creative Coding contemporani.
Ja no programem dibuixos.
Programem comportaments.
====================================================
*/
🎨 Resultat renderitzat (clic per reiniciar, tecla C per netejar)