Interacció amb el teclat

Per què utilitzar el teclat en art interactiu?

Mentre el ratolí controla la posició i els clics, el teclat permet ordres discretes: activar modes, disparar accions, introduir dades. En art generatiu i interactiu, el teclat serveix per:

• Canviar entre eines de dibuix (llapis, pinzell, goma).
• Modificar paràmetres en temps real (velocitat, nombre d'elements, opacitat).
• Activar o desactivar efectes visuals (mostrar/amagar capes, iniciar/aturar animacions).
• Crear jocs i narratives interactives (moviment de personatges, selecció d'opcions).

key i keyCode

p5.js proporciona dues variables globals per saber quina tecla s'ha premut:

• key — conté el caràcter de la tecla premuda (ex: 'a', 'B', '3', ' '). És un string.
• keyCode — conté el codi numèric de la tecla, útil per a tecles especials com fletxes, ENTER, SHIFT, etc.
• keyIsPressed — booleà que és true si qualsevol tecla està premuda en aquest moment.

Exemple bàsic: mostrar la tecla premuda al llenç.

let ultimaTecla = '';

function draw() {
  background(245);
  text('Prem una tecla: ' + ultimaTecla, width/2, 70);
}

function keyPressed() {
  ultimaTecla = key; // key conté el caràcter premut
}

keyPressed() vs keyIsPressed

Tenim dues maneres de respondre al teclat:

• function keyPressed() { ... } — s'executa un sol cop quan es prem una tecla. Ideal per a accions discretes.
• keyIsPressed dins de draw() — és true mentre es manté premuda una tecla. Ideal per a moviment continu.

function draw() {
  background(245);
  if (keyIsPressed) {
    if (keyCode === LEFT_ARROW) x -= 2;
    if (keyCode === RIGHT_ARROW) x += 2;
    if (keyCode === UP_ARROW) y -= 2;
    if (keyCode === DOWN_ARROW) y += 2;
  }
  ellipse(x, y, 30, 30);
}

Detectar tecles concretes

Podem preguntar per una tecla concreta comparant key amb un caràcter, o keyCode amb una constant.

function keyPressed() {
  if (key === 'r' || key === 'R') colorFons = color(255, 200, 200);
  if (key === 'g' || key === 'G') colorFons = color(200, 255, 200);
  if (key === 'b' || key === 'B') colorFons = color(200, 200, 255);
  if (key === ' ') colorFons = 0;
}

Combinacions de tecles: SHIFT, CONTROL, ALT

Podem detectar si una tecla modificadora està premuda alhora que una altra amb keyIsDown(keyCode).

function draw() {
  background(245);
  if (keyIsDown(SHIFT)) {
    mida = 60; // Shift premut: cercle gran
  } else {
    mida = 30; // sense Shift: cercle petit
  }
  ellipse(width/2, height/2, mida, mida);
}

Exemples creatius pas a pas

let colors = [color(255,0,0), color(0,255,0), color(0,0,255), color(255,255,0), color(0)];

function keyPressed() {
  if (key >= '1' && key <= '5') {
    let index = int(key) - 1;
    colorActual = colors[index];
  }
}

let lletres = [];

function keyPressed() {
  if (key.length === 1 && key.match(/[a-zA-Z0-9]/)) {
    lletres.push({
      car: key,
      x: random(width),
      y: random(height),
      col: color(random(255), random(255), random(255))
    });
  }
}

Consells per a la interacció amb teclat

• Diferencia majúscules i minúscules: key === 'a' no detecta 'A'. Utilitza key.toLowerCase() === 'a' per a ambdues.
• Evita conflictes amb el navegador: tecles com F5 (refrescar) o Ctrl+S (desar) tenen funcions pròpies.
• Utilitza keyCode per a fletxes i tecles especials: LEFT_ARROW, RIGHT_ARROW, UP_ARROW, DOWN_ARROW, ENTER, ESCAPE, TAB, BACKSPACE, DELETE.
• Combina ratolí i teclat: per exemple, mantenir SHIFT mentre es dibuixa per fer traços rectes.