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.