📝 Codi explicat línia a línia
/*
====================================================
PRÀCTICA 10
PINZELLS INTERACTIUS
====================================================
REFERENTS
- Golan Levin
- Zach Lieberman
OBJECTIU
Aprendre a utilitzar:
- mouseX
- mouseY
- mousePressed()
- interacció
- dibuix generatiu
Fins ara les obres funcionaven
de manera automàtica.
Ara l'usuari participa.
Cada moviment del ratolí
afecta l'obra.
El públic deixa de ser espectador.
Es converteix en col·laborador.
*/
function setup() {
createCanvas(900, 600);
// Vinculem el canvas al contenidor HTML
let cnv = createCanvas(900, 600);
cnv.parent("canvas-container");
background(255);
}
/*
====================================================
DRAW
====================================================
Mentre el ratolí estigui premut,
el pinzell crearà formes.
*/
function draw() {
if (mouseIsPressed) {
/*
COLOR ALEATORI
*/
let r = random(255);
let g = random(255);
let b = random(255);
fill(r, g, b, 150);
noStroke();
/*
PINZELL GENERATIU
No dibuixa exactament
on és el cursor.
Afegeix variacions.
*/
for (let i = 0; i < 8; i++) {
let offsetX = random(-30, 30);
let offsetY = random(-30, 30);
circle(
mouseX + offsetX,
mouseY + offsetY,
random(5, 40)
);
}
}
}
/*
====================================================
QUÈ ÉS MOUSEX?
====================================================
mouseX conté la posició horitzontal
del ratolí.
Exemple: 100, 300, 700...
Canvia constantment.
*/
/*
====================================================
QUÈ ÉS MOUSEY?
====================================================
mouseY conté la posició vertical
del ratolí.
*/
/*
====================================================
MOUSEISPRESSED
====================================================
Retorna true quan el botó està premut,
false quan no ho està.
*/
/*
====================================================
EXERCICI 1
====================================================
Canvia random(-30,30) per random(-80,80)
Resultat: pinzell més dispers.
*/
/*
====================================================
EXERCICI 2
====================================================
Canvia random(5,40) per random(20,80)
Obtindràs formes més grans.
*/
/*
====================================================
EXERCICI 3
====================================================
Substitueix circle() per rect()
Quin estil visual apareix?
*/
/*
====================================================
EXERCICI 4
====================================================
Canvia 8 per 20
Es generaran moltes més formes.
*/
/*
====================================================
EXERCICI 5
====================================================
Canvia el color.
Exemple: fill(0,150,255,100);
Obtindràs una obra monocromàtica.
*/
/*
====================================================
MOUSEPRESSED()
====================================================
S'executa una vegada quan fem clic.
*/
function mousePressed() {
/*
Clic dret visual.
Afegim una explosió de formes.
*/
for (let i = 0; i < 50; i++) {
fill(
random(255),
random(255),
random(255),
180
);
circle(
mouseX + random(-100, 100),
mouseY + random(-100, 100),
random(10, 50)
);
}
}
/*
====================================================
NETEJAR EL LLENÇ
====================================================
Prem la tecla C.
*/
function keyPressed() {
if (key === "c" || key === "C") {
background(255);
}
}
/*
====================================================
REPTE 1 · PINZELL DE CONFETI
====================================================
Utilitza:
- cercles petits
- molts colors
- molta dispersió
*/
/*
====================================================
REPTE 2 · PINZELL DE FUM
====================================================
Utilitza:
- grisos
- transparències
- formes grans
*/
/*
====================================================
REPTE 3 · PINZELL VEGETAL
====================================================
Utilitza:
- verds
- formes orgàniques
- agrupacions
Ha de recordar una planta.
*/
/*
====================================================
REPTE 4 · PINZELL CÒSMIC
====================================================
Inspiració: galàxies, estrelles, nebuloses.
*/
/*
====================================================
PERSONALITAT DEL PINZELL
====================================================
Un bon pinzell generatiu
no copia el moviment de l'usuari.
Interpreta el moviment.
L'artista dissenya regles.
El sistema genera resultats.
*/
/*
====================================================
REPTE AVANÇAT
====================================================
Canvia offsetX i offsetY per:
sin(frameCount*0.1)*40
cos(frameCount*0.1)*40
Obtindràs un pinzell viu.
*/
/*
====================================================
DOBLE PINZELL
====================================================
Afegeix:
fill(0);
circle(width - mouseX, mouseY, 15);
Ara apareix una forma simètrica.
*/
/*
====================================================
PREGUNTES DE REFLEXIÓ
====================================================
1. Qui crea l'obra? L'usuari? El programa? Tots dos?
2. Com canvia l'experiència quan és interactiva?
3. Quin pinzell has dissenyat?
4. És una eina o una obra?
5. Pot existir una obra diferent cada vegada?
*/
/*
====================================================
PROJECTE FINAL DE LA PRÀCTICA
====================================================
Dissenya tres pinzells.
VERSIÓ 1 - Controlada
VERSIÓ 2 - Orgànica
VERSIÓ 3 - Experimental
Condicions:
- ús de mouseX i mouseY
- interacció real
- comportament autònom
- resultat diferent per a cada usuari
Guarda:
practica10_v1.png
practica10_v2.png
practica10_v3.png
====================================================
IDEA CLAU
A les pràctiques anteriors
creàvem sistemes visuals.
Ara l'usuari entra dins del sistema.
L'obra ja no està completament
determinada abans de començar.
Cada persona produirà
un resultat diferent.
Això és una característica
fonamental de l'art interactiu.
====================================================
*/
🎨 Resultat renderitzat (clic per dibuixar, tecla C per netejar)