KONTAKT
izuzetan[at]gmail.com

Bezijerove krivulje

Bezierova krivulja je parametrična krivulja važna u području matematičke numeričke analize, a naročito se primjenjuje u 3D vektorskoj grafici, Bézierove krivulje su važan alat, kojim se služi većina grafičkih programa pri oblikovanju glatkih krivulja, koje se mogu beskonačno skalirati. Svi programi za crtanje i uređivanje slika poput; Adobe Illustratora, Adobe Photoshopa, CorelDrawa služe se "Putanjama" ( engleski: "Paths"), a one su kombinacija Bézierovih krivulja. Bézierove krivulje su široko rasprostanjene i u programima za animaciju poput; Adobe Flasha, Adobe After itd.

Mi će mo ovde te krivulje koristiti da crtamo razne slike. Funkcije su sledeće:

quadraticCurveTo(cp1x, cp1y, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

X i Y parametri u obe metode su koordinate tačke na kraju. cp1x i cp1y su koordinate prve kontrolne tačke, a cp2x i cp2y su koordinate druge kontrolne tačke. Korišćenje kvadratične i kubične Bézierove krivulje može biti prilično zahtevno, jer za razliku od vektorskog crtačkog softvera (poput Adobe Illustrator-a) mi nemamo direktne vizualne povratne informacije o tome šta radimo. To čini prilično teško crtati složene oblike. U sledećem primeru, mi ćemo crtati neke jednostavne oblike, ali ako Vi imate vremena i, najviše od svega, strpljenja, mnogo složenije crteže bi ste mogu kreirati.

function crtaj() {
 canvas = document.getElementById("kocke");
   if (canvas.getContext) {
     ctx = canvas.getContext("2d");
     ctx.beginPath();
     ctx.moveTo(75,25);
     ctx.quadraticCurveTo(25,25,25,62.5);
     ctx.quadraticCurveTo(25,100,50,100);
     ctx.quadraticCurveTo(50,120,30,125);
     ctx.quadraticCurveTo(60,120,65,100);
     ctx.quadraticCurveTo(125,100,125,62.5);
     ctx.quadraticCurveTo(125,25,75,25);
     ctx.stroke();
   }
}

Ili na primer ovako nešto:

function crtaj() {
 canvas = document.getElementById("kocke");
   if (canvas.getContext) {
     ctx = canvas.getContext("2d");
     ctx.beginPath();
     ctx.moveTo(75,40);
     ctx.bezierCurveTo(75,37,70,25,50,25);
     ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
     ctx.bezierCurveTo(20,80,40,102,75,120);
     ctx.bezierCurveTo(110,102,130,80,130,62.5);
     ctx.bezierCurveTo(130,62.5,130,25,100,25);
     ctx.bezierCurveTo(85,25,75,37,75,40);
     ctx.fill();
   }
}