Corbes i formes orgàniques

Per què necessitem corbes?

El món natural no està fet de rectangles i cercles perfectes. Les fulles, les ones del mar, els cossos dels animals o les lletres escrites a mà estan formats per corbes suaus i orgàniques. p5.js ofereix diverses eines per dibuixar corbes que ens permeten expressar formes molt més naturals i expressives.

• curve() — corbes Catmull-Rom (passen pels punts de control de manera suau).
• bezier() — corbes de Bézier (àncora i punts de control per a màxima precisió).
• beginShape() / vertex() / endShape() — construir polígons i corbes complexes punt a punt.

curve(): corbes suaus amb punts de control

curve(x1, y1, x2, y2, x3, y3, x4, y4) dibuixa una corba entre els punts (x2,y2) i (x3,y3), utilitzant (x1,y1) i (x4,y4) com a punts de control que defineixen la curvatura.

stroke(0, 0, 200); strokeWeight(3); noFill();
curve(40, 150, 60, 20, 180, 40, 280, 160);
stroke(255, 0, 0, 100); strokeWeight(6);
point(40, 150); point(60, 20); point(180, 40); point(280, 160);

bezier(): control precís de la curvatura

bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2) dibuixa una corba des de (x1,y1) fins a (x2,y2), amb dos punts de control (cx1,cy1) i (cx2,cy2) que actuen com imants que estiren la corba.

stroke(0, 180, 0); strokeWeight(3); noFill();
bezier(30, 140, 80, 20, 200, 20, 290, 140);
stroke(255,0,0,100); strokeWeight(1);
line(30,140, 80,20); line(290,140, 200,20);
strokeWeight(6); point(30,140); point(80,20); point(200,20); point(290,140);

curve() vs bezier()

Formes lliures amb beginShape() i vertex()

Quan les formes predefinides no són suficients, podem construir polígons personalitzats punt a punt.

beginShape();
vertex(50, 30); vertex(150, 20); vertex(200, 80);
vertex(180, 150); vertex(80, 140); vertex(30, 90);
endShape(CLOSE);

Corbes dins de formes personalitzades

Podem combinar vèrtexs rectes i corbes amb curveVertex() i bezierVertex().

beginShape();
vertex(20, 140); curveVertex(20, 140);
curveVertex(60, 40); curveVertex(150, 30);
curveVertex(240, 60); curveVertex(280, 140);
curveVertex(280, 140);
endShape();

Exemples creatius pas a pas

beginShape(); vertex(50, 80);
bezierVertex(100, 20, 180, 20, 210, 80);
bezierVertex(180, 140, 100, 140, 50, 80);
endShape(CLOSE); line(50, 80, 210, 80);

let y1=120, y2=80, y3=80, y4=120, y5=120;
curve(20,y1, 50,y2, 100,y3, 150,y4);
curve(50,y2, 100,y3, 150,y4, 200,y5);
curve(100,y3, 150,y4, 200,y5, 250,y4);
curve(150,y4, 200,y5, 250,y4, 300,y5);

beginShape();
curveVertex(0, height/2);
for (let x=0; x<=width; x+=10) {
  let y = height/2 + map(noise(x*0.03), 0, 1, -60, 60);
  curveVertex(x, y);
}
curveVertex(width, height/2);
endShape();

Consells per dominar les corbes

• Comença amb paper: dibuixa la forma desitjada i marca els punts clau abans de programar.
• Utilitza visualitzacions auxiliars: dibuixa línies i punts per veure on són els punts de control.
• Empra curveTightness(): canvia la tensió de les corbes Catmull-Rom.
• Combina vèrtexs rectes i corbes: pots alternar vertex() i bezierVertex() dins d'un mateix beginShape().