Processing leckék

Ez a fejezet három görbe-típust tartalmaz: ív, görbe és Bézier görbe.

Ívek

Ez a legegyszerűbben rajzolható görbe. A Processing ezt egy ellipszis részeként defíniálja. Ezt a függvényt a következő paraméterekkel tudod meghívni:

arc(x, y, width, height, start, stop);

Az első négy ugyanaz mint az ellipse() függvénynél: először meghatározzuk a pozicióját és méretét annak a doboznak amibe kirajzoljuk és az utolsó két paraméter az ív kezdő és végpontját határozzák meg. Aszögeket fokban határozzuk meg és óra járásal megegyező irányba adjuk meg. PI egyenlő 180 fokkal.

void setup()
{
  size(300, 200);
  background(255);
  smooth();
  
  rectMode(CENTER); // behatároló négyzetek
  stroke(128);
  rect(35, 35, 50, 50);
  rect(105, 35, 50, 50);
  rect(175, 35, 50, 50);
  rect(105, 105, 100, 50);
  
  stroke(0);
  arc(35, 35, 50, 50, 0, PI / 2.0); // kör alsó negyede 
  arc(105, 35, 50, 50, -PI, 0);  // kör felső fele
  arc(175, 35, 50, 50, -PI / 6, PI / 6); // 60°-os szelet
  arc(105, 105, 100, 50, PI / 2, 3 * PI / 2); // 180°-os szelet
}

Görbék

A curve() függvénnyel olyan görbét is létrehozhatunk ami nem egy ellipszis része, ehhez meghatározzuk a kezdő és végpont x,y koordinátáját és két kontroll pontot ami meghatározza a görbe irányát és ívét. Szintaxisa:

curve(cpx1, cpy1, x1, y1, x2, y2, cpx2, cpy2);

cpx1, cpy1 - első kontroll pont helyzete

x1, y1 - görbe kezdő pontja

x2, y2 - görbe végpontja

cpx2, cpy2 - második kontroll pont helyzete

A következő példában a kontroll pontokat pirossal és a görbe végpontjaik kékkel jelenítjük meg:

void setup()
{
  size(200, 200);
  background(255);
  smooth();
  stroke(0);
  curve(40, 40, 80, 60, 100, 100, 60, 120);
  
  noStroke();
  fill(255, 0, 0);
  ellipse(40, 40, 3, 3);
  fill(0, 0, 255, 192);
  ellipse(100, 100, 3, 3);
  ellipse(80, 60, 3, 3);
  fill(255, 0, 0);
  ellipse(60, 120, 3, 3);  
}

Hogyan befolyásolják a kontroll pontok a görbe ívét? 
A görbe kezdő pontjának érintője/tangense párhuzamos a görbe végpontja és az első kontrollpont által határolt egyenessel. A görbe végpontjának érintője pedig a görbe kezdőpontja és a második kontroll pont által határolt egyenessel párhuzamos:

Folytonos kontrollpontos görbék

Ezt több pont meghatározásával tehetjük meg a curveVertex() fügvény segítségével. Ha ezt használod egy forma rajzolására akkor az elején a beginShape() a végén az endShape() függvényt meg kell hívnod.

A következő példában a görbe kezdő és végpontja egyúttal a kontrollpont is. 

void setup()
{
  int[ ] coords = {
    40, 40, 80, 60, 100, 100, 60, 120, 50, 150
  };
  int i;
  
  size(200, 200);
  background(255);
  smooth();

  noFill();
  stroke(0);
  beginShape();
  curveVertex(40, 40); // az első kontroll pont
  curveVertex(40, 40); // a görbe kezdő pontja
  curveVertex(80, 60);
  curveVertex(100, 100);
  curveVertex(60, 120);
  curveVertex(50, 150); // a görbe végpontja
  curveVertex(50, 150); // az utolsó kontroll pont
  endShape();
  
  // tömbök segítségével rövidítjük a kódok sokaságát;
  // és kirajzoljuk az ellipszist
  fill(255, 0, 0);
  noStroke();
  for (i = 0; i < coords.length; i += 2)
  {
    ellipse(coords[i], coords[i + 1], 3, 3);
  }
  
}

A köztes pontok érintői így néznek ki .

Bézier görbék

Ezek sokkal szebb ívűek, de ugyanazok a paraméterei és a bezier() függvény meghívásával hozhatod őket létre.

bezier(x1, y1, cpx1, cpy1, cpx2, cpy2, x2, y2);

x1, y1 - görbe kezdő pontjának koordinátái

cpx1, cpy1 - első kontroll pont koordinátái

cpx2, cpy2 - második kontroll pont koordinátái

x2, y2 - görbe végpontjának koordinátái

A következő kódban pirossal jelöltük a kontroll pontokat és kékkel a görbe végpontjait.

void setup( )
{
  size(150, 150);
  background(255);
  smooth();

  ellipse(50, 75, 5, 5); // görbe végpontjai
  ellipse(100, 75, 5, 5);
  fill(255, 0, 0);
  ellipse(25, 25, 5, 5);  // kontroll pontok
  ellipse(125, 25, 5, 5); 
  noFill();
  stroke(0);
  bezier(50, 75, 25, 25, 125, 25, 100, 75);
}

A most rajzolt görbénk érintőit így néznek ki:

bővebben.: http://hu.wikipedia.org/wiki/B%C3%A9zier_g%C3%B6rbe

Folytonos Bézier görbe

Ennek létrehozásához bezierVertex() függvényt kell használnunk, a beginShape() és az endShape() parancsok meghívásával. A kezdő pontot vertex(startX, startY) paranccsal hozzuk létre, ezután a bezierVertex()-szel megadjuk a kontroll pontokat és a végpontot.

bezierVertex(cpx1, cpy1, cpx2, cpy2, x, y);

cpx1, cpy1 - első kontroll pont koordinátái

cpx2, cpy2 - második kintroll pont koordinátái

x, y - a következő pont rajta a görbén

Nézzünk rá példákat:

void setup( )
{
  size(150, 150);
  background(255);
  smooth();
  // nem mutatja a kontroll pontokat
  noFill();
  stroke(0);
  beginShape();
  vertex(50, 75); // első pont
  bezierVertex(25, 25, 125, 25, 100, 75);
  endShape();
}

Írjuk át a kódot hogy folytonos görbénk legyen:

beginShape();
vertex(30, 70); // az első pont
bezierVertex(25, 25, 100, 50, 50, 100);
bezierVertex(50, 140, 75, 140, 120, 120);
endShape();

Ez még nem annyira sima:

Ezért a második ívrész első kontroll pontját alrébb kell tennünk:

beginShape();
vertex(30, 70); // az első pont
bezierVertex(25, 25, 100, 50, 50, 100);
bezierVertex(20, 130, 75, 140, 120, 120);
endShape();

forrás: http://processing.org/learning/curves/