Bezier eğrisi: kontrol noktalarının dansı

2026 · geometri · 10 dakika okuma

Photoshop'ta kalem aracı, CSS animasyonlarındaki cubic-bezier, fonttaki harflerin pürüzsüz köşeleri, arabaların gövde tasarımı — hepsinin arkasında aynı matematik var: Bezier eğrileri.

Pierre Bézier'nin 1960'larda Renault'da araba gövdesi tasarımı için geliştirdiği bu yöntem, bugün dijital tasarımın temel taşı. Önce oyna, sonra anlat.

Önce dene

Yeşil noktalar başlangıç/bitiş, mor noktalar kontrol noktaları. Sürükle, t kaydır, animasyonu izle.

t parametresi ne anlama geliyor?

Bezier eğrisinde t, 0'dan 1'e giden bir parametredir. t=0 başlangıç noktası, t=1 bitiş noktası, t=0.5 eğrinin tam ortası. Ama dikkat: t=0.5, eğrinin geometrik olarak tam ortası değildir — parametre uzayının ortasıdır.

De Casteljau algoritması

Demodan da görebileceğin gibi, renkli çizgiler eğri üzerindeki noktayı adım adım hesaplıyor. Algoritma şu: her adımda komşu noktalar arasında t oranında lineer interpolasyon yap. Tek nokta kalana kadar devam et.

def de_casteljau(points, t):
    """Bezier eğrisinde t parametresindeki noktayı bul."""
    pts = list(points)
    while len(pts) > 1:
        pts = [
            lerp(pts[i], pts[i+1], t)
            for i in range(len(pts)-1)
        ]
    return pts[0]

def lerp(a, b, t):
    """İki nokta arasında t oranında interpolasyon."""
    return (
        a[0] + (b[0]-a[0])*t,
        a[1] + (b[1]-a[1])*t
    )

# Kübik Bezier — 4 kontrol noktası
P = [(80,300), (160,80), (440,80), (520,300)]

# t=0.5'teki nokta
x, y = de_casteljau(P, 0.5)
print(f"t=0.5 → ({x:.1f}, {y:.1f})")

Kapalı form formülü

De Casteljau özyinelemeli ama kapalı form da var. Bernstein polinomları ile yazılır:

import numpy as np
from math import comb

def bezier(points, t):
    """Bernstein polinomu ile Bezier eğrisi."""
    n = len(points) - 1
    result = np.zeros(2)
    for i, p in enumerate(points):
        # Bernstein baz fonksiyonu
        B = comb(n, i) * (t**i) * ((1-t)**(n-i))
        result += B * np.array(p)
    return result

# Kübik Bezier formülü:
# B(t) = (1-t)³P₀ + 3(1-t)²t·P₁ + 3(1-t)t²·P₂ + t³P₃

# Tüm eğriyi çiz
ts = np.linspace(0, 1, 200)
curve = [bezier(P, t) for t in ts]

CSS'de Bezier

CSS animasyonlarında kullandığın ease, ease-in,ease-out hepsi birer kübik Bezier eğrisi:

/* CSS cubic-bezier(x1, y1, x2, y2) */
/* P0=(0,0) ve P3=(1,1) sabit, P1 ve P2 sen seçersin */

.element {
  /* ease: yavaş başla, hızlan, yavaşla */
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.0);
  
  /* ease-in: yavaş başla, hızla bitir */
  transition: all 0.3s cubic-bezier(0.42, 0, 1.0, 1.0);
  
  /* ease-out: hızlı başla, yavaşla */
  transition: all 0.3s cubic-bezier(0, 0, 0.58, 1.0);
  
  /* linear: sabit hız */
  transition: all 0.3s cubic-bezier(0, 0, 1, 1);
}

Bezier eğrileri bilgisayar grafiğinin ortak dili. Illustrator, Figma, After Effects, Three.js — hepsinde aynı matematik çalışıyor. Bir kez anlayan, her yerde tanır.

Nererde kullanılır?

• Font tasarımı: TrueType ve PostScript fontlarda her harf Bezier eğrilerinden oluşur.
• Vektör grafikler: SVG'deki C ve Q komutları kübik ve quadratik Bezier'dir.
• Animasyon: CSS cubic-bezier, CSS Motion Path, GSAP hepsi Bezier kullanır.
• Oyun geliştirme: Karakter hareketi, kamera yolları, mermi yörüngeleri.
• CAD/CAM: Araba, uçak, endüstriyel tasarım — NURBS eğrilerinin temeli Bezier.

Sıradaki geometri içeriği: Fourier Dönüşümü — dönen çemberlerle herhangi bir şekli çizmek mümkün mü?