Generador de formes amb p5.js — Versió responsive estable

Dibuixa múltiples àrees sobre una imatge, arrossega punts i agafa el color real de cada zona amb una pipeta.

Encara no hi ha cap imatge carregada.
Flux recomanat: 1) activa la pipeta, 2) clica una zona de la imatge, 3) dibuixa l’àrea, 4) desa la forma.
Punts actuals: 0 Formes desades: 0 Punt seleccionat: cap Mode: Nova forma Pipeta: desactivada Color triat:
Coordenades del punt seleccionat: cap

Com s’utilitza?

  1. Fes clic al llenç per afegir un punt.
  2. Fes clic sobre un punt existent i arrossega’l per moure’l.
  3. Si vols el color real d’una zona, activa la pipeta i clica sobre la imatge.
  4. Després dibuixa l’àrea i prem Desar / actualitzar forma.
  5. La imatge manté sempre la seva proporció original.

Codi exportat

// Encara no hi ha cap forma desada.

Llegenda visual

Punt normal
Punt sota el ratolí
Punt seleccionat
Punt arrossegat

Formes desades

Cada forma es desa com una funció independent amb nom en camelCase.

Encara no hi ha cap forma desada.

Ajuda didàctica

Exemple:

ala esquerra → alaEsquerra(x, y, escala, angle)

Ordre del codi generat:

function alaEsquerra(x, y, escala = 1, angle = 0) {
  push();
  translate(x, y);
  rotate(angle);
  scale(escala);
  fill(255, 120, 80);
  beginShape();
  vertex(0, 0);
  vertex(...);
  endShape(CLOSE);
  pop();
}

Nota sobre bezierVertex

El primer punt és el punt inicial. Després, els punts es llegeixen en grups de 3: control 1, control 2 i punt final.