Bezier Eğrisi

Bezier eğrileri, bilgisayar grafiklerinde şekiller çizmek için, CSS animasyonları için ve birçok diğer yerlerde kullanılır.

Çok basit bir konudur, bir kez çalıştıktan sonra vektör grafikleri ve gelişmiş animasyonlar dünyasında kendinizi rahat hissedebilirsiniz.

Kontrol Noktaları

Bir bezier eğrisi kontrol noktaları ile tanımlanır.

2, 3, 4 (adet) veya daha fazlası

Örneğin, iki noktalı eğri:

Üç noktalı eğri:

Dört noktalı eğri:

Eğrilere yakından bakarsınız, hemen farkedebilirsiniz:

1. Noktalar her zaman eğri üzerinde değil. Bu tamamen normal, daha sonra eğrinin nasıl oluşturulduğunu göreceğiz.

2. Eğri derecesi, nokta sayısından bir eksiğine eşittir. İki nokta için doğrusal bir eğriye sahibiz (düz bir çizgi), üç nokta için – kuadratik eğri (parabolik), dört nokta için – kübik eğri.

3. Bir eğri her zaman kontrol noktalarının dışbükey gövdesinin içindedir:

   

Bu son özellik sayesinde, bilgisayar grafiklerinde kesişim testlerini optimize etmek mümkündür. Dışbükey gövdeler (convex hulls) kesişmiyorsa, eğrilerde kesişmez. Dolayısıyla, dışbükey gövde kesişimini kontrol etmek “kesişim yok” sonucunu çok hızlı bir şekilde verebilir. Kesişimi veya dışbükey gövdeleri kontrol etmek çok daha kolaydır, çünkü bunlar dikdörtgenler, üçgenler ve benzerleridir (yukarıdaki görsele bakın), eğriden çok daha basit şekillerdir.

Bezier eğrilerinin ana önemi – kontrol noktaları hareket ettirildiğinde sezgisel olarak bariz bir şekilde eğri değişiyor.

Aşağıdaki örnekte kontrol noktalarını fareyi (mouse) kullanarak hareket ettirmeyi deneyin:

Fark edebileceğiniz gibi, eğri 1 → 2 ve 3 → 4 teğet çizgileri boyunca uzanmaktadır.

Biraz pratik yaptıktan sonra, istenen eğriyi elde etmek için noktaların nasıl konumlandırılacağı belli olur. Ve birkaç eğriyi birleştirerek, pratik olarak her şeyi elde edebiliriz.

İşte bazı örnekler:

De Casteljau’nun Algoritması

Bezier eğrileri için matematiksel bir formül vardır, fakat bunu daha sonra ele alalım, çünkü De Casteljau’nun algoritması, matematiksel tanımla aynıdır ve nasıl oluşturulduğunu görsel olarak gösterir.

İlk olarak 3 noktalı örneğe bakalım.

İşte demo ve açıklamaları aşağıda.

Kontrol noktaları (1,2 ve 3) fare ile hareket ettirilebilir. “play” butonuna basarak çalıştırın.

De Casteljau’nun 3-noktalı bezier eğrisi oluşturma algoritması:

1. Kontrol noktaları çizme. Yukarıdaki örnekte bunlar 1, 2, 3 olarak adlandırılmıştır.

2. 1 → 2 → 3 kontrol noktaları arasında parçalar oluşturun. Yukarıdaki demoda bunlar kahverengidir.

3. t parametresi, 0’dan 1 gider. Yukarıdaki örnekte 0.05 kademe kullanılmıştır: döngü 0, 0.05, 0.1, 0.15, ... 0.95, 1 şeklinde ilerler.

   Bu t değerlerinin her biri için:

   • Her kahverengi parça üzerinde, parçanın başlangıcından t ile orantılı uzaklıkta bulunan bir nokta alıyoruz. İki parça olduğundan dolayı iki noktamız var.

     Örneğin, t=0 için – her iki nokta da parçaların başlangıcında olacaktır, ve t=0.25 için – başlangıcından itibaren parça uzunluğunun 25%'inde, t=0.5 için – 50% (ortası), t=1 için – parçanın sonunda.

   • Noktaları birleştirin. Aşağıdaki görselde bağlantı parçası maviye boyanmıştır.

t=0.25 için	t=0.5 için

4. Şimdi mavi parçada, aynı t değeri ile orantılı uzaklıkta bir nokta alın. Yani, t=0.25 için (soldaki görsel) parçanın sol çeyreğinin sonunda bir nokta, ve t=0.5 için (sağdaki görsel) – parçanın orta noktasında. Yukarıdaki görsellerde bu nokta kırmızıdır.

5. t, 0’dan 1’e doğru ilerlerken, t’nin her değeri eğriye bir nokta ekler. Bu noktaların kümesi Bezier eğrisini oluşturur. Yukarıdaki görsellerde kırmızı ve paraboliktir.

Bu işlemler 3 nokta içindi. Fakat 4 nokta içinde geçerlidir.

4 nokta için demo (noktalar fare ile hareket ettirilebilir):

4 nokta için algoritma:

• Kontrol noktalarını parçalarla bağlayın: 1 → 2, 2 → 3, 3 → 4. 3 tane kahverengi parça olacak.
• 0 ile 1 aralığındaki her t için:
  • Bu parçalar üzerinde başlangıçtan t ile orantılı uzaklıkta noktalar alıyoruz. Bu noktalar birbirlerine bağlandığında iki (adet) yeşil parçamız olur.
  • Bu parçalar üzerinde t ile orantılı noktalar alıyoruz. Bir mavi parça elde ederiz.
  • Mavi parça üzerinde t ile orantılı bir nokta alıyoruz. Yukarıdaki örnekte kırmızı.
• Bu noktalar birlikte eğriyi oluşturur.

Algoritma tekrarlamalı olup herhangi bir sayıda kontrol noktası için genelleştirilebilir.

N tane kontrol noktası verildiğinde:

1. N-1 tane parça elde etmek için onları birleştiriyoruz.
2. Sonra 0 ile 1 aralığındaki her t için, her parça üzerinde t ile orantılı uzaklıkta bir nokta alıyoruz ve onları birleşiriyoruz. N-2 parça olacak.
3. Yalnızca bir nokta kalana kadar 2. adımı tekrarlayın.

Bu noktalar eğriyi oluşturur.

Parçaların ve eğrinin nasıl oluşturulduğunu açıkça görmek için örnekleri çalıştırın ve duraklatın.

y=1/t’ye benzeyen bir eğri:

Zig-zag kontrol noktaları da iyi/sorunsuz çalışır:

Bir ilmek/düğüm oluşturmak mümkündür:

Düzgün olmayan bir Bezier eğrisi (evet, bu da mümkün):

Algoritma açıklamasında net olamayan bir şey varsa, eğrinin nasıl oluşturulduğunu görmek için lütfen yukarıdaki canlı örneklere bakın.

Algoritma tekrarlamalı olduğundan, herhangi bir düzende Bezier eğrileri oluşturabiliriz, yani: 5, 6 veya daha fazla kontrol noktası kullanarak. Ama pratikte çok sayıda nokta daha az kullanışlıdır. Genellikle 2-3 nokta alırız ve karmaşık çizgiler için birkaç eğriyi birbirleriyle birleştiririz. Bunu geliştirmek ve hesaplamak daha basittir.

Matematik

Bir Bezier eğrisi matematiksel bir formül kullanılarak tanımlanabilir.

Gördüğümüz gibi – aslında bunu bilmeye gerek yok, çoğu insan sadece bir fare ile noktaları hareket ettirerek eğri çizer. Ama matematikle ilgiliyseniz – işte burada.

Pi kontrol noktalarının koordinatları göz önüne alındığında: birinci kontrol noktasının koordinatları P1 = (x1,y1), ikincisinin: P2 = (x2, y2), ve benzer şekilde, eğri koordinatları [0,1] aralığındaki t parametresine bağlı olan denklemle tanımlanır.

• 2 noktalı eğri için formül:

  P = (1-t)P1 + tP2

• 3 kontrol noktalı için:

  P = (1−t)2P1 + 2(1−t)tP2 + t2P3

• 4 kontrol noktalı için:

  P = (1−t)3P1 + 3(1−t)2tP2 +3(1−t)t2P3 + t3P4

Bunlar vektör denklemleridir. Başka bir deyişle, karşılık gelen koordinatları elde etmek için P yerine x ve y’yi koyabiliriz.

Örneğin, 3 noktalı eğri şu şekilde hesaplanan (x,y) noktaları tarafından oluşturulur:

• x = (1−t)2x1 + 2(1−t)tx2 + t2x3
• y = (1−t)2y1 + 2(1−t)ty2 + t2y3

x1, y1, x2, y2, x3, y3 yerine 3 kontol noktasının koordinatlarını koymalıyız, sonrasında t, 0’dan 1’e gittikçe, t’nin her bir değeri için (x,y) değerlerini elde ederiz.

Örneğin, kontrol noktaları (0,0), (0.5, 1) ve (1, 0) ise, denklemler şöyle olur:

• x = (1−t)2 * 0 + 2(1−t)t * 0.5 + t2 * 1 = (1-t)t + t2 = t
• y = (1−t)2 * 0 + 2(1−t)t * 1 + t2 * 0 = 2(1-t)t = –t2 + 2t

Şimdi t, 0’dan 1’e gittikçe, her t için (x,y) değerleri kümesi bu kontrol noktaları için eğriyi oluşturur.

Özet

Bezier eğrileri kontrol noktaları ile tanımlanır.

Bezier eğrilerinin iki tanımını gördük:

1. Bir çizim işlemi kullanmak: De Casteljau’s algoritması.
2. Matematiksel formüller kullanmak.

Bezier eğrilerinin iyi özellikleri:

• Kontrol noktalarını fare ile hareket ettirerek düzgün eğriler çizebiliriz.
• Karmaşık şekilleri birkaç Bezier eğrisi ile oluşturabiliriz.

Kullanım:

• Bilgisayar grafiklerinde, modelleme ve vektör grafik editörlerinde. Yazı tipleri Bezier eğrileri ile tanımlanır.
• Web geliştirmede – Canvas ve SVG formatında grafikler için. Bu arada, yukarıdaki “canlı” örnekler SVG’de yazılmıştır. Bunlar aslında parametre olarak farklı noktalar verilen tek bir SVG belgesidir. Bunu ayrı bir pencerede açabilir ve kaynağı görebilirsiniz: demo.svg.
• CSS animasyonunda animasyonun yolunu ve hızını tanımlamak için kullanılır.