Generador de formes amb p5.js

Editor tàctil amb zoom, pan, exportació de codi p5.js i ara també amb projectes JSON per desar i carregar tot el treball.

Mòbil: toca un punt per moure’l · toc curt sobre buit = nou punt · arrossegar sobre buit = desplaça la vista · 2 dits = zoom + pan.
JSON: exporta/importa projectes complets amb formes, estat actual, vista i imatge de fons.
Punts actuals: 0 Formes desades: 0 Punt seleccionat: cap Mode: Nova forma Pipeta: desactivada Zoom: 100% Color triat:
Coordenades del punt seleccionat: cap
Vista: —
100%

Com s’utilitza?

  1. Toc curt sobre una zona buida → afegeix un punt.
  2. Toca un punt i arrossega’l → mou el punt.
  3. Arrossega sobre buit → desplaça la vista.
  4. Fes pinça amb dos dits → zoom i desplaçament.
  5. Activa la pipeta si vols captar el color d’una zona de la imatge.
  6. Prem Exporta projecte JSON per desar el projecte sencer.

Codi exportat

// Encara no hi ha cap forma desada.

Llegenda visual

Punt normal
Punt sota el punter
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, s, a)

Ordre del codi generat:

function alaEsquerra(x, y, s = 1, a = 0) {
  push();
  translate(x, y);
  rotate(radians(a));
  scale(s);
  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.