
Inkwash: tek bir HTML dosyasında sulu boya simülatörü
Johno Whitaker'ın Inkwash uygulaması, bir akışkan çözücü ve Beer–Lambert görüntüleme geçişiyle mürekkep ile suyun kâğıt üzerindeki davranışını taklit ediyor. Uygulamanın tamamı bağımlılıksız tek bir HTML dosyası.
Johno Whitaker, tarayıcıda çalışan sulu boya eskiz uygulaması Inkwash'i ve nasıl çalıştığını anlatan uzun bir teknik açıklamayı yayımladı. Uygulama, bin satırın altında tek bir HTML dosyası; bağımlılığı ve derleme adımı yok. WebGL2 ile işlenebilir half-float dokular gerektiriyor; yazar bunu kabaca 2021 ve sonrası donanıma tarihlendiriyor.
Su fırçasından akışkan çözücüye
Proje, Anthropic'in Claude Fable 5 modeliyle yapılan bir denemeyle başladı ve yazarın doğa günlüğü alışkanlığını tarayıcıda yeniden kurma girişimine dönüştü. Bu alışkanlık, Pilot G2 kalemi ile bir su fırçasını — sapında sıkılabilir su haznesi olan naylon fırça — birleştiriyor. Whitaker koda kendisinin dokunmadığını yazıyor: dosyayı okuyabiliyor, ancak uygulamayı model yazdı; açıklama metninin büyük bölümü de öyle ve bunu açıkça belirtiyor.
Tuvalin altında resim pikseller değil, kayan noktalı doku yığını: hareketli pigment, çökelmiş pigment, su, hız alanı ve basınç. Bunlar her karede yaklaşık bir düzine WebGL2 shader'ı arasında gidip geliyor. Akışkan hareketi, Jos Stam'ın 1999 tarihli Stable Fluids algoritmasını kullanıyor; yarı-Lagrange taşıma her hücreyi hız alanı boyunca geriye doğru izlediği için büyük bir zaman adımı simülasyonu patlatamıyor. Yaklaşık 22 Jacobi yinelemesiyle yapılan basınç izdüşümü suyu sıkıştırılamaz hâle getiriyor.
İzin sistemi olarak ıslaklık
Sonucun kâğıt gibi okunmasını sağlayan şey, tüm simülasyonu kapılayan ıslaklık alanı. Hız, ıslaklığın smoothstep'iyle çarpılıyor; böylece kuru zeminde akış olamıyor ve bir yıkama kendi sınırında duruyor. Pigment hareketliliği de aynı biçimde ölçekleniyor: nemli kâğıt mürekkebin sürünmesine, ıslanmış kâğıt ise akmasına izin veriyor. Suyun kendisi akış hızının 0.6 katıyla taşınıyor ve üstel olarak kuruyor; bir kaydırıcı zaman sabitini yaklaşık 2 ile 18 saniye arasında ayarlıyor. Taze kalem mürekkebi kendi hafif ıslaklığını bırakıyor; bu yüzden kalem darbesinin hemen ardından geçen fırça çizgiyi tüylendirirken eski bir darbe sağlam kalıyor.
Beer–Lambert ve mavi hale
Pigment renk olarak değil, kanal başına optik yoğunluk olarak saklanıyor ve görüntüleme shader'ı bunu Beer–Lambert yasasıyla dönüştürüyor: kâğıt rengi yoğunluğun üstelıyle çarpılıyor. Böylece üst üste binen darbeler griye yassılaşmak yerine derinleşiyor, tıpkı gerçek sır katmanları gibi. Aynı tercih uygulamanın imza etkisini de üretiyor: yayılma adımı her kanalda farklı hızda çalıştığı için ıslak kenar kendiliğinden koyu bir çekirdek ile serin mavi-mor bir hale olarak ayrışıyor — siyah mürekkebin ıslak kâğıtta kromatografi yapmasının taklidi.
Katmanlamayı ikinci, çökelmiş pigment katmanı sağlıyor: "fix" düğmesi, hareketli pigmenti sabit katmana aktaran ve kâğıdı anında kurutan 1.2 saniyelik bir geçiş çalıştırıyor; beyaz guaj ise katmana opak biçimde işleniyor. Yazarın aktardığına göre tüm hattı — Jacobi yinelemeleri dâhil on iki shader geçişi — telefonda saniyede 60 karede çalışıyor, çünkü pahalı çözüm kaba bir ızgarada yapılıyor.
SiTech — AI destekli web geliştirme
Hızlı ve modern web siteleri kuruyor, AI'yı gerçek iş akışlarına taşıyoruz. Projeniz veya sorunuz mu var? Yardımcı olmaktan mutluluk duyarız.