📝 Codi explicat línia a línia
/*
====================================================
PRÀCTICA 7
PAISATGES IMPOSSIBLES
====================================================
REFERENTS
- Art generatiu contemporani
- Videojocs procedurals
- Paisatges sintètics
OBJECTIU
Aprendre a utilitzar:
- noise()
- generació procedural
- capes
- profunditat visual
- paisatges generatius
Fins ara hem treballat amb:
formes
colors
patrons
Ara començarem a crear mons.
L'ordinador construirà muntanyes
de manera automàtica.
Cada paisatge serà diferent.
*/
function setup() {
createCanvas(900, 600);
// Vinculem el canvas al contenidor HTML
let cnv = createCanvas(900, 600);
cnv.parent("canvas-container");
generarPaisatge();
}
/*
====================================================
FUNCIÓ PRINCIPAL
====================================================
*/
function generarPaisatge() {
/*
Cel
*/
background(135, 206, 235);
/*
Sol
*/
noStroke();
fill(255, 220, 0);
circle(120, 120, 100);
/*
MUNTANYA DEL FONS
*/
fill(120, 140, 180);
dibuixarMuntanya(
0.003,
height * 0.55,
height * 0.25
);
/*
MUNTANYA MITJANA
*/
fill(90, 110, 140);
dibuixarMuntanya(
0.006,
height * 0.65,
height * 0.30
);
/*
MUNTANYA DAVANTERA
*/
fill(50, 80, 100);
dibuixarMuntanya(
0.01,
height * 0.75,
height * 0.35
);
}
/*
====================================================
FUNCIÓ MUNTANYA
====================================================
noise() genera valors suaus.
A diferència de random(),
els valors estan relacionats.
Això produeix formes naturals.
*/
function dibuixarMuntanya(escala, base, alcada) {
beginShape();
vertex(0, height);
for (let x = 0; x <= width; x++) {
let y = base -
noise(x * escala) * alcada;
vertex(x, y);
}
vertex(width, height);
endShape(CLOSE);
}
/*
====================================================
QUÈ ÉS RANDOM()?
====================================================
random() → 12, 87, 2, 99, 45...
Canvis bruscos. Ideal per a atzar.
*/
/*
====================================================
QUÈ ÉS NOISE()?
====================================================
noise() → 12, 14, 15, 16, 18...
Canvis suaus. Ideal per crear:
- muntanyes
- núvols
- terreny
- fum
- aigua
*/
/*
====================================================
EXERCICI 1
====================================================
Canvia 0.01 per 0.02
Resultat: muntanyes més abruptes.
*/
/*
====================================================
EXERCICI 2
====================================================
Canvia 0.01 per 0.002
Resultat: muntanyes més suaus.
*/
/*
====================================================
EXERCICI 3
====================================================
Canvia l'alçada.
Ara: height * 0.35
Prova: height * 0.50
Obtindràs pics més alts.
*/
/*
====================================================
EXERCICI 4
====================================================
Canvia els colors.
Exemple:
fill(0,120,80); → paisatge verd
fill(180,140,80); → paisatge desèrtic
fill(220,220,240); → paisatge nevat
*/
/*
====================================================
EXERCICI 5
====================================================
Afegeix una lluna.
Exemple:
fill(255);
circle(700, 120, 80);
*/
/*
====================================================
INTERACCIÓ
====================================================
Cada clic genera una nova versió.
*/
function mousePressed() {
noiseSeed(floor(random(10000)));
generarPaisatge();
}
/*
====================================================
NOISESEED()
====================================================
Permet canviar la llavor.
És com començar un univers nou.
Mateixes regles. Nou paisatge.
*/
/*
====================================================
REPTE 1 · POSTA DE SOL
====================================================
Utilitza: taronges, vermells, grocs.
Inspiració: capvespre.
*/
/*
====================================================
REPTE 2 · PAISATGE NOCTURN
====================================================
Utilitza: blaus foscos, violetes.
Afegeix: lluna, estrelles.
*/
/*
====================================================
REPTE 3 · MÓN FANTÀSTIC
====================================================
Colors irreals.
Possibilitats: muntanyes roses, cel verd, sol blau.
*/
/*
====================================================
ESTRELLES OPCIONALS
====================================================
Prova:
for(let i=0; i<200; i++){
fill(255);
circle(
random(width),
random(height/2),
random(1,4)
);
}
*/
/*
====================================================
REPTE AVANÇAT
====================================================
Afegeix una quarta muntanya.
Exemple:
fill(30, 50, 70);
dibuixarMuntanya(0.015, height*0.85, height*0.25);
Observa la profunditat.
*/
/*
====================================================
PREGUNTES DE REFLEXIÓ
====================================================
1. Quina diferència hi ha entre random() i noise()?
2. Per què noise() genera formes més naturals?
3. Quin paisatge t'agrada més?
4. Quin moment del dia has intentat representar?
5. Es podria utilitzar aquesta tècnica en un videojoc?
*/
/*
====================================================
PROJECTE FINAL DE LA PRÀCTICA
====================================================
Crea tres paisatges.
VERSIÓ 1 - Matí
VERSIÓ 2 - Capvespre
VERSIÓ 3 - Nit
Condicions:
- mínim 3 capes
- ús de noise()
- composició cromàtica coherent
- intencionalitat artística
Guarda:
practica7_mati.png
practica7_capvespre.png
practica7_nit.png
====================================================
IDEA CLAU
A les pràctiques anteriors creàvem formes.
Ara generem territori.
Ja no pensem en objectes individuals.
Pensem en sistemes que creen paisatges sencers.
Aquesta és la base de la generació procedural
utilitzada en art contemporani, simulació
i desenvolupament de videojocs.
====================================================
*/