Cara interactiva amb p5.js i micròfon

Introducció a p5.js

p5.js és una biblioteca de JavaScript que facilita la creació de gràfics i interaccions creatives. Amb p5.js podem dibuixar formes, treballar amb colors, sons i interactivitat amb el ratolí, teclat o micròfon.

Pas 1: Configuració bàsica

Primer creem el nostre llenç amb createCanvas i triem la mida que vulguem:

function setup() {
    createCanvas(400, 400);
}

Pas 2: Dibuixar una cara senzilla

Dibuixarem una cara elíptica amb dos ulls rodons i una boca en forma d'arc.

function draw() {
    background(220);
    
    // Cara
    fill(255, 220, 185);
    ellipse(width / 2, height / 2, 200, 250);
    
    // Ull esquerre
    fill(0);
    ellipse(width / 2 - 50, height / 2 - 50, 30, 30);
    
    // Ull dret
    ellipse(width / 2 + 50, height / 2 - 50, 30, 30);

    // Boca - per ara està fixa
    noFill();
    stroke(0);
    arc(width / 2, height / 2 + 50, 80, 40, 0, PI);
}

Pas 3: Fer que la boca es mogui amb el volum del micròfon

Necessitem p5.sound per captar el so. Activem el micròfon i usem getLevel() per obtenir el volum:

let mic;

function setup() {
    createCanvas(400, 400);
    mic = new p5.AudioIn();
    mic.start();
}

function draw() {
    background(220);
    let vol = mic.getLevel();

    // Cara
    fill(255, 220, 185);
    ellipse(width / 2, height / 2, 200, 250);

    // Ulls
    fill(0);
    ellipse(width / 2 - 50, height / 2 - 50, 30, 30);
    ellipse(width / 2 + 50, height / 2 - 50, 30, 30);

    // Boca amb volum
    noFill();
    stroke(0);
    arc(width / 2, height / 2 + 50, 80, 40 + vol * 300, 0, PI);
}

Propostes per experimentar

• Canviar colors segons el volum: Usa fill(map(vol, 0, 1, 0, 255), 100, 150).
• Moure els ulls amb sin() i cos(): Prova de fer que els ulls es moguin lleugerament amb el temps: ellipse(width / 2 - 50 + sin(frameCount * 0.1) * 5, height / 2 - 50, 30, 30);
• Fer que la cara tingui forma aleatòria: Usa random() per fer que el tamany canviï aleatòriament.
• Utilitzar soroll Perlin: Crea deformacions suaus a la cara amb noise(): ellipse(width / 2, height / 2, 200 + noise(frameCount * 0.01) * 50, 250);

Codi complet executant-se

Prova-ho directament aquí: