📝 Codi explicat línia a línia
/*
====================================================
PRÀCTICA 8
EL DIBUIX EN MOVIMENT
====================================================
REFERENTS
- Oskar Fischinger
- Norman McLaren
OBJECTIU
Aprendre a utilitzar:
- draw()
- frameCount
- animació
- temps
- moviment abstracte
Fins ara les nostres obres
eren estàtiques.
Ara les formes cobraran vida.
Començarem a treballar
amb el temps.
A partir d'aquest moment
l'obra pot transformar-se
constantment.
*/
function setup() {
createCanvas(900, 600);
// Vinculem el canvas al contenidor HTML
let cnv = createCanvas(900, 600);
cnv.parent("canvas-container");
}
/*
====================================================
DRAW()
====================================================
A diferència de setup(),
draw() s'executa contínuament.
Aproximadament 60 vegades
per segon.
És el motor de les animacions.
*/
function draw() {
/*
Netejar pantalla
*/
background(15);
/*
CÀLCUL DEL MOVIMENT
*/
let x = width / 2 +
sin(frameCount * 0.03) * 250;
let y = height / 2 +
cos(frameCount * 0.02) * 100;
/*
CERCLE ANIMAT
*/
noStroke();
fill(255, 100, 120);
circle(x, y, 120);
/*
SEGONA FORMA
*/
fill(80, 180, 255);
circle(
width / 2 +
sin(frameCount * 0.05) * 150,
height / 2,
80
);
/*
TERCERA FORMA
*/
fill(255, 220, 0);
rect(
width / 2 - 50,
height / 2 +
sin(frameCount * 0.04) * 150,
100,
100
);
}
/*
====================================================
FRAMECOUNT
====================================================
frameCount és una variable automàtica.
Compta els fotogrames:
1, 2, 3, 4, 5...
Mai s'atura.
Ens permet mesurar el temps.
*/
/*
====================================================
SIN()
====================================================
Genera moviment ondulatori.
Ideal per:
- oscil·lacions
- respiracions
- ritmes visuals
Retorna valors entre -1 i 1.
*/
/*
====================================================
COS()
====================================================
És semblant a sin()
però comença en una posició diferent.
Combinats produeixen
moviments interessants.
*/
/*
====================================================
EXERCICI 1
====================================================
Canvia 0.03 per 0.01
Resultat: moviment més lent.
*/
/*
====================================================
EXERCICI 2
====================================================
Canvia 0.03 per 0.08
Resultat: moviment més ràpid.
*/
/*
====================================================
EXERCICI 3
====================================================
Canvia 250 per 400
Resultat: recorregut més ampli.
*/
/*
====================================================
EXERCICI 4
====================================================
Canvia els colors.
Exemple: fill(0,255,200); fill(255,0,255);
Observa l'efecte visual.
*/
/*
====================================================
EXERCICI 5
====================================================
Canvia el fons.
background(255);
Després adapta els colors per mantenir el contrast.
*/
/*
====================================================
ANIMACIÓ I TEMPS
====================================================
La programació ens permet
dibuixar una imatge nova
a cada fotograma.
Moltes imatges consecutives = animació.
Exactament igual que al cinema.
*/
/*
====================================================
REPTE 1 · RESPIRACIÓ
====================================================
Fes que una forma creixi i disminueixi.
Pista:
let mida = 100 + sin(frameCount*0.05)*50;
*/
/*
====================================================
REPTE 2 · PLANETA
====================================================
Crea un cercle central.
Fes que altres cercles orbitin al seu voltant.
Utilitza sin() i cos().
*/
/*
====================================================
REPTE 3 · RITME VISUAL
====================================================
Representa visualment:
- música tranquil·la
- música energètica
Només amb moviment.
*/
/*
====================================================
ESTELA DE MOVIMENT
====================================================
Prova a substituir:
background(15);
per
background(15,15,15,20);
Què passa? Les formes deixen rastre.
*/
/*
====================================================
TRANSPARÈNCIES
====================================================
Exemple: fill(255,0,0,150);
L'últim valor és: opacitat.
0 = invisible
255 = totalment visible
*/
/*
====================================================
REPTE AVANÇAT
====================================================
Afegeix aquesta forma:
fill(0,255,100);
circle(mouseX, mouseY, 40);
El ratolí formarà part de la composició.
*/
/*
====================================================
INTERACCIÓ
====================================================
Canvi de colors amb clic.
*/
function mousePressed() {
background(
random(255),
random(255),
random(255)
);
}
/*
====================================================
PREGUNTES DE REFLEXIÓ
====================================================
1. Què diferencia una imatge estàtica d'una animació?
2. El moviment modifica el significat de l'obra?
3. Quin ritme has intentat crear?
4. Quina forma atrau més l'atenció?
5. Quin referent artístic t'ha inspirat?
*/
/*
====================================================
PROJECTE FINAL DE LA PRÀCTICA
====================================================
Crea tres animacions.
VERSIÓ 1 - Moviment lent.
VERSIÓ 2 - Moviment rítmic.
VERSIÓ 3 - Moviment caòtic.
Condicions:
- mínim 3 formes
- ús de draw()
- ús de frameCount
- moviment continu
- intencionalitat artística
Guarda:
practica8_v1.png
practica8_v2.png
practica8_v3.png
I grava un vídeo curt de cada animació.
====================================================
IDEA CLAU
A les pràctiques anteriors creàvem imatges.
Ara creem processos.
L'obra ja no és una imatge única.
L'obra és una transformació contínua en el temps.
Aquest és un dels principis fonamentals de l'art
cinètic, l'animació experimental i l'art digital
contemporani.
====================================================
*/
🎨 Resultat renderitzat (clic per canviar fons)