SVG ile Yapışkan Şekiller

Aşağıdaki daireleri birbirine yaklaştırın. Yeterince yaklaşınca birbirlerine uzanır ve yapışırlar. Ayırmaya çalışınca esnerler, sonunda da koparlar. Buna genelde gooey (yapışkan) efekt denir. Bir fizik motoru gerektiriyor gibi görünür, ama burada düz SVG var: birkaç daire ve her ikisinin arasında bir ek yol.

İşin sırrı şu: Ortada gerçek bir yapışkan yok. Dairelerin şekli hiç değişmez. Yeterince yakın olan her iki dairenin arasına aynı renkte bir şekil daha çizeriz: bir köprü. Renkler aynı olduğu için gözünüz daireleri ve köprüyü tek parça olarak görür. Görmek için köprüyü başka bir renge boyayın.

Yani bütün iş o köprüyü çizmek. İki direk arasına gerilen bir ip gibi, onun da bağlanacağı yerlere ihtiyacı var. Dört nokta seçeriz: a ve d birinci dairede, b ve c ikinci dairede. Onları bulmak için bir merkezden diğerine uzanan çizgiye bakarız ve dairelerin birbirine baktığı tarafta, bu çizginin iki yanına biraz açılırız.

Noktaları düz çizgilerle birleştirirsek iki daireye de değen bir şekil çıkar, ama sert görünür; araya yapıştırılmış bir kutu gibi. Yapışkan ise içe doğru kıvrılır. Bunun için SVG path'lerinin eğri çizen C komutunu kullanırız. C, iki tutamaç ve bir bitiş noktası alır. Eğri tutamaçların üzerinden geçmez; birincisine doğru yola çıkar ve ikincisinin yönünden gelerek varır, sanki onu çekiyorlarmış gibi. İki sürüm arasında geçiş yapın ve daireleri sürükleyin.

M 158,97 C 174,128 233,143 256,116 L 250,166 C 234,135 173,137 151,164 Z

Resmin altındaki yol, köprünün tamamıdır. M a'ya gider, C eğri çizerek b'ye ulaşır, L c'ye düz bir çizgi çeker, ikinci C eğriyle d'ye döner ve Z şekli a'ya düz bir çizgiyle kapatır. Bu iki düz çizgi dairelerin içinden geçer, bu yüzden hiç görünmez. M, L ve Z sizin için yeniyse SVG Path Komutları yazısı bunları anlatıyor.

Her tutamaç kendi dairesinin kenarı boyunca, diğer daireye doğru bakar. Eğrilerin dairelerden köşe oluşturmadan, yumuşakça çıkmasının nedeni budur.

Şimdi yapışkan hissini veren kısım. Daireler birbirinden uzaklaşınca köprü esnemeli: en ince yeri, yani boyun, incelmeli. Bunu tutamaçlarla yaparız. Daha uzun tutamaçlar iki eğriyi de ortaya doğru daha çok çeker, böylece boyun incelir. Noktalar da birbirine biraz yaklaşır, yani köprü uçlarında da daralır. Daireler arasındaki boşluk seçtiğimiz bir sınırı, yani kopma mesafesini aşınca, köprüyü çizmeyi bırakırız.

Küçük ve büyük bir kopma mesafesi deneyin. Küçük olan, birbirine zar zor değen iki su damlası gibi hissettirir. Büyük olan ise daha çok çiklete benzer. Daireler üst üste bindiğinde de aynı köprü işe yarar: İki kenarın kesiştiği keskin girintiyi doldurur, böylece daireler tek ve pürüzsüz bir damlaya dönüşür.

Bu görünümü elde etmenin neredeyse hiç matematik gerektirmeyen başka bir popüler yolu da var: bir SVG filtresi. Önce tarayıcı şekilleri bulanıklaştırır, böylece yakın şekiller tek bir yumuşak buluta karışır. Sonra bir renk matrisi yumuşak kenarları yeniden keskinleştirir: Çoğu saydam olan pikseller kaybolur, geri kalanlar tamamen dolu olur. İki yolu karşılaştırın.

Filtre her şekille çalışır ve yalnızca birkaç satır tutar. Karşılığında kenarlar biraz yumuşar, keskin köşeler yuvarlanır ve bir şey her hareket ettiğinde tarayıcı resmi yeniden bulanıklaştırmak zorunda kalır; bu da genelde bir yol daha çizmekten daha pahalıdır. Köprü yolu ise kenarları keskin tutar ve size tam kontrol verir, ama yalnızca matematiğini yazdığınız şekiller için. Burada bu, daireler demek.

Yani yapışkan bir şekil aslında tek bir şekil değildir. Birkaç sıradan şekil ve aynı renkte bir köprüdür. Dört nokta köprüye nereye bağlanacağını söyler, tutamaçlar onu büker, kopma mesafesi de ne zaman bırakacağına karar verir. Bu şekilde baktığınızda aynı efekti başka şekiller için de kurabilirsiniz: Birbirine baktıkları yerleri bulun ve onları eğrilerle birleştirin.

@aykutkardas

—

0/50 alkış