İzometrik VO logosunu SVG ile çizmek

Ana sayfanın üstündeki "VO" figürü bir resim dosyası değil; tarayıcıda matematikle çizilen bir SVG. Bu yazıda nasıl yapıldığını anlatıyorum.

İzometrik izdüşüm

Üç boyutlu bir noktayı ekrana taşımak için tek bir fonksiyon yetiyor:

const COS = Math.cos(Math.PI / 6);
const SIN = Math.sin(Math.PI / 6);

export function iso(x: number, y: number, z: number): [number, number] {
  return [(x - y) * COS, (x + y) * SIN - z];
}

x ekseni sağ-aşağı, y (derinlik) sol-aşağı, z ise yukarı gidiyor. Her köşe bu fonksiyondan geçince 30 derecelik klasik izometrik görünüm ortaya çıkıyor.

Harfleri çokgen olarak tanımlamak

İlk denemede harfleri küçük küplerden (piksel gibi) oluşturdum; ama bu açıdan bakınca V harfi merdivene dönüyordu. Sonunda her harfi düz bir çokgen olarak tanımladım ve geriye doğru "ektrüde" ettim. O harfinin ortasındaki boşluk ayrı bir iç kontur.

Hangi yüzeyler görünür?

Bakış yönü (1, 1, 1). Bir kenardan çıkan duvarın dışa bakan normali bu yöne dönükse duvar görünüyor, değilse hiç çizilmiyor. Görünen duvarlar derinliğe göre sıralanıp arkadan öne boyanıyor (ressam algoritması). Harfin ön yüzü izleyiciye en yakın düzlemde durduğu için hiçbir şey onu örtemiyor; o yüzden en son, tek parça olarak çiziliyor ve çapraz tarama deseniyle dolduruluyor.

İmleci takip eden ışık

Kenar çizgilerinin üstünde ikinci bir katman var; çizgi rengi bir radialGradient. Fare hareket ettikçe ekran koordinatını SVG koordinatına çeviriyorum ve gradyanın merkezini oraya taşıyorum:

const p = new DOMPoint(clientX, clientY).matrixTransform(svg.getScreenCTM()!.inverse());
glow.setAttribute("cx", String(p.x));
glow.setAttribute("cy", String(p.y));

Bu işlem requestAnimationFrame ile sınırlandığı için React'i hiç yeniden render etmiyor.

Tıklama sesi

Ses dosyası yok; Web Audio API ile 120 milisaniyelik bir ton üretiliyor. Frekans 220 Hz'den 110 Hz'e iniyor, ses seviyesi hızla açılıp kapanıyor ve kısa, tok bir "tık" çıkıyor. Hareket azaltma tercihi açık olanlarda basılma animasyonu çalışmıyor.