🎨 Canviar la cara de la Mona Lisa per la d'Homer Simpson (o qualsevol personatge)

🗑️ Pas 1: Eliminar tot el que té a veure amb la càmera

Al fitxer original, dins l'etiqueta <script>, hi havia:

let faceapi, detections = [], video;
let modelsReady = false;
let currentExpression = { dominant: 'neutral', intensity: 0 };
let smoothIntensity = 0;

A més, la funció setup() creava la captura de vídeo i cridava ml5.faceApi. Elimina totes aquestes línies i també la càrrega del fitxer ml5.min.js (la línia <script src="... ml5.min.js"></script>).

Al seu lloc, només necessitarem una variable per guardar l'emoció que volem mostrar:

let sentiment = "happy";   // emoció inicial
let intensitat = 0.9;      // intensitat fixa (ja no tenim càmera)

🎛️ Pas 2: Triar l'emoció amb botons (o variables fixes)

Com que no hi ha càmera, crearem botons dins setup() per canviar l’emoció manualment. També podries fer sis fitxers HTML diferents (un per emoció) i canviar només el valor de sentiment al principi.

function setup() {
  createCanvas(600, 500);
  const emocions = ["happy","sad","angry","surprised","disgusted","fearful","neutral"];
  const nomsCA   = ["Feliç","Trist","Enfadat","Sorprès","Fastiguejat","Espantat","Neutral"];
  for (let i = 0; i < emocions.length; i++) {
    let btn = createButton(nomsCA[i]);
    btn.position(10, 10 + i * 45);
    btn.mousePressed(() => { sentiment = emocions[i]; });
  }
}

Així, en prémer un botó, la variable sentiment canvia i la cara reacciona.

🧑‍🎨 Pas 3: Dibuixar la nova cara (Homer Simpson)

La part més important és canviar el dibuix base. En el codi original, la funció dibuixaCosBase() tenia molts beginShape()...curveVertex...endShape() que descrivien el cos i la cara de la Mona Lisa.

Per dibuixar Homer Simpson utilitzarem formes simples (ellipse, rect, arc…). Crearem una funció nova, dibuixaCaraHomer(), que només dibuixi el cap, els ulls, el nas i les parts que no canvien amb l'emoció.

function dibuixaCaraHomer() {
  // Cap (groc, gran)
  fill(255, 217, 15);
  stroke(0);
  strokeWeight(2);
  ellipse(300, 150, 160, 180);   // cap ovalat

  // Blanc dels ulls (dos cercles grossos)
  fill(255);
  circle(265, 120, 40);          // ull esquerre
  circle(335, 120, 40);          // ull dret

  // Pupil·les (petites, negres)
  fill(0);
  circle(270, 120, 8);
  circle(340, 120, 8);

  // Nas (taronja, allargat)
  fill(255, 170, 0);
  noStroke();
  ellipse(300, 165, 30, 45);    // nas
  stroke(0);
  strokeWeight(2);

  // Boca i celles NO les dibuixem aquí – les posarem a les funcions d'emoció
}

Observa que no dibuixem la boca ni les celles dins d'aquesta funció, perquè aquestes parts canvien segons l'emoció. Ho veurem al pas següent.

😊 Pas 4: Adaptar els trets facials a la nova cara

Al codi original hi havia funcions com tretsFelic(intensity), tretsTrist(intensity), etc. Cadascuna dibuixava ulls, boca i celles per a la Mona Lisa. Com que ara el cap està en unes coordenades diferents, hem de refer-les perquè encaixin sobre la cara d'Homer.

Aquí tens alguns exemples concrets:

Felicitat

function tretsFelic(intens) {
  // Boca: mig cercle cap avall (somriure)
  noFill();
  stroke(0);
  strokeWeight(3);
  arc(300, 195, 70, 35, 0, PI);   // arc de 0 a PI = mitja circumferència inferior

  // Celles aixecades
  strokeWeight(3);
  line(240, 85, 275, 75);          // cella esquerra
  line(325, 75, 360, 85);          // cella dreta
}

Tristesa

function tretsTrist(intens) {
  // Boca: arc cap amunt (trist)
  noFill();
  stroke(0);
  strokeWeight(3);
  arc(300, 210, 65, 30, PI, TWO_PI);  // arc cap amunt

  // Celles inclinades cap al centre
  strokeWeight(3);
  line(240, 80, 275, 95);
  line(325, 95, 360, 80);
}

🧩 Pas 5: Enganxar-ho tot a la funció draw()

Finalment, la funció draw() s'encarrega d'esborrar la pantalla, dibuixar la cara base i després dibuixar els trets de l'emoció escollida. A més, mostra un text amb el nom del sentiment.

function draw() {
  background(240);   // fons clar

  // Dibuixem la cara d'Homer (sense boca ni celles)
  dibuixaCaraHomer();

  // En funció de l'emoció, dibuixem els trets corresponents
  switch (sentiment) {
    case "happy":      tretsFelic(intensitat); break;
    case "sad":        tretsTrist(intensitat); break;
    case "angry":      tretsEnfadat(intensitat); break;
    case "surprised":  tretsSorprès(intensitat); break;
    case "disgusted":  tretsFastiguejat(intensitat); break;
    case "fearful":    tretsEspantat(intensitat); break;
    default:           tretsNeutral(intensitat); break;
  }

  // Text informatiu
  fill(50);
  noStroke();
  textSize(24);
  textAlign(CENTER);
  text(`${sentiment.toUpperCase()} – intensitat: ${intensitat}`, 300, 450);
}

Ja tenim tot el necessari! Aquest és l'esquelet complet del nou Homer.html. Pots copiar-lo i enganxar-lo en un fitxer nou, i funcionarà sense càmera.