Görbék rajzolása


Számítástechnikában a legismertebb módszer görbék rajzolására a Bézier által kifejlesztett eljárás. Ez körvonalakban arról szól, hogy a három vagy több pontos bézier görbék részarányosan görbülnek a plusz pontok irányába. Vegyünk egy két pont határolta szakaszt, ez szinte mindig egyenes mint ahogy a két pontos bézier görbe is, de ha ehhez a szakaszhoz adunk egy harmadik pontot is ami nem a szakaszon helyezkedik el akkor a szakasz egyenese a bézier számítások alapján bizonyos mértékbe elgörbül a harmadik pont irányába. Ugyan ez a helyzet a négy vagy több pontos bézier görbékkel is.


Ha több információ szükséges a görbékről: https://hu.wikipedia.org/wiki/B%C3%A9zier-g%C3%B6rbe

Ajánlom a lap második felén lévő animációkat, ezek érthetővé teszik a görbék kirajzolását. A processing szintén támogatja a görbék rajzolását, erre több utasítás is szolgál a nyelven belül, most ezeket dolgozzuk fel alapszinten.

Rögtön az első függvény:
bezier(x1, y1, x2, y2, x3, y3, x4, y4) – alapból négy pontos (negyedfokú) bézier görbékkel dolgozik a fejlesztőkörnyezet. A négy x,y a négy pont koordinátája.

noFill();
bezier(85, 20, 10, 10, 90, 90, 15, 80);


A noFill utasítás a kitöltés mellőzése miatt került be, különben az ívek belső szakaszát kitölti automatikusan a program.

A bézier görbék pontjai 3D-ben is megadhatók, de ott már minden ponthoz három érték tartozik:

bezier(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4) – 3D bézier görbe.


bezierPoint(a, b, c, d, t) – bézier görbe pontjainak kirajzolását segíti,
a a görbe kezdő pontja, b az első köztes pont, c a második köztes pont , d a görbe végpontja, t egy érték 0 és 1 között, a görbe szakaszán belüli elhelyezkedést határozza meg. Pl.: t = 1 akkor a görbe végpontja, t = 0.5 akkor a görbe felénél helyezkedik el. Kicsit érthetőbben:

noFill();
bezier(85,20,10,10,90,90,15,80);
fill(255);
float t = 0.6;
float x = bezierPoint(85, 10, 90, 15, t);
float y = bezierPoint(20, 10, 90, 80, t);
ellipse(x, y, 5, 5);


A két bezierPoint utasítás a görbe kirajzolásához szükséges koordinátákat tárolják el, külön az x értékeket és külön az y értékeket. A t 0.6-ra lett állítva, tehát a program kiszámolja a bézier görbe pontjait és a görbe szakaszának 0.6-es értékénél (60%-a) kirajzol egy kört. Ha át állítjuk más értékre a t-t akkor mindig a görbe más más helyén rajzolunk ki vele kört.

Nézzük egy példa progit erre:

fill(255);
int steps = 10;
for (int i = 0; i <= steps; i++) {
float t = i / float(steps);
float x = bezierPoint(85, 10, 90, 15, t);
float y = bezierPoint(20, 10, 90, 80, t);
ellipse(x, y, 5, 5);
}


bezierTangent(a, b, c, d, t) – érintő egyenes a görbe pontjaitól, a paraméterek a-d-ig a görbe meghatározó pontjai, t a görbe adott szakasza mint a bezierPoint()-nál.


noFill();
bezier(85, 20, 10, 10, 90, 90, 15, 80);
stroke(255, 102, 0);
int steps = 16;
for (int i = 0; i <= steps; i++) {
float t = i / float(steps);
float x = bezierPoint(85, 10, 90, 15, t);
float y = bezierPoint(20, 10, 90, 80, t);
float tx = bezierTangent(85, 10, 90, 15, t);
float ty = bezierTangent(20, 10, 90, 80, t);
float a = atan2(ty, tx);
a -= HALF_PI;
line(x, y, cos(a)*8 + x, sin(a)*8 + y);
}


Ez a szabványos példa progi a processing oldalán, nagyon nem akarok bele menni, trigonometria függvények segítségével vonalakat húznak a bézier pontokból adott irányokba.

bezierDetail(x) – beállítja a görbe felbontását a kijelzőn, alapértelmezett érték 20, csak 3D-és grafikánál használható.

Van más lehetőség görbék rajzolására, igaz egészen más eljárással.
E módszerek első utasítása a :

curve(x1, y1, x2, y2, x3, y3, x4, y4) – görbe rajzolása, x1-y1 kezdő kontroll pont meghatározása, x4-y4 a vég kontroll pont meghatározása, x2-y2 a kirajzolt görbe kezdő pontja, x3-y3 a görbe vég pontja.

Bővebben a görbéről: ha a kezdő kontroll pontból egyenest húzunk a görbe vég pontjába, és evvel párhuzamos érintőt állítunk a kezdő pontra, akkor a párhuzamos vonal irányának megfelelően tér ki a görbe. Ugyan ez igaz a másik oldalra.


noFill();
stroke(255, 102, 0);
curve(25, 66, 5, 26, 73, 24, 53, 66);


curvePoint(a, b, c, d, t) – pontok kirajzolása a görbe mentén, a-b-c-d értékek tárolják a curve() x illetve y koordinátáit, a t egy 0 és 1 közötti érték, a görbén a pont elhelyezkedését adja.


noFill();
curve(5, 26, 73, 24, 73, 61, 15, 65);
fill(255);
int steps = 6;
for (int i = 0; i <= steps; i++) {
float t = i / float(steps);
float x = curvePoint(5, 73, 73, 15, t);
float y = curvePoint(26, 24, 61, 65, t);
ellipse(x, y, 5, 5);
}


curveTangent(a, b, c, d, t) – érintőket rajzol a görbe mentén, a-b-c-d érték a curve() paraméterei, t az érintő helye a görbén (0-1).


noFill();
curve(5, 26, 73, 24, 73, 61, 15, 65);
int steps = 6;
for (int i = 0; i <= steps; i++) {
float t = i / float(steps);
float x = curvePoint(5, 73, 73, 15, t);
float y = curvePoint(26, 24, 61, 65, t);
float tx = curveTangent(5, 73, 73, 15, t);
float ty = curveTangent(26, 24, 61, 65, t);
float a = atan2(ty, tx);
a -= PI/2.0;
line(x, y, cos(a)*8 + x, sin(a)*8 + y);
}


Szabványos példa progi a processing.org-ról, trigonometriai függvények segítségével rajzolja ki az érintő egyeneseket.

curveDetail(x) – egy utasítás ami a görbe felbontását állítja be, ez alapértelmezetten 20, de csak P3D-ben üzemel.