- Bu proje, klasik Macintosh 1-bit filtresi olan Atkinson Dithering’i web üzerinde uygular
- Girdi görüntüsünü %50 gri ile karşılaştırarak siyah-beyaza dönüştürür ve farkı komşu piksellere dağıtır
- Canvas, Drag & Drop, WebWorkers, FileReader gibi modern tarayıcı teknolojilerini kullanır
- Dönüştürülen görüntü sağ tıklayıp kaydetme ile kaydedilebilir
- Görüntüyü sürükleyerek kaydetme, tarayıcı kısıtlamaları nedeniyle desteklenmez
Açık kaynak projenin önemi ve fark yaratan yönleri
- Atkinson Dithering, Hyperdither ve HyperScan’de kullanılan klasik bir Macintosh grafik efektidir
- Karmaşık görüntü renk bilgisini piksel düzeyinde sadeleştirerek hafif siyah-beyaz görüntüler üretmek için kullanışlıdır
- Web tabanlı uygulama sayesinde ayrı bir yazılım olmadan yalnızca modern bir tarayıcıyla kullanılabilir
- WebWorkers sayesinde büyük görüntüleri işlerken asenkron çalışma ve performans optimizasyonu mümkündür
- Açık kaynak kod yapısı, özellik genişletme ve özelleştirme işlerini kolaylaştırır
Atkinson Dithering algoritmasına genel bakış
- Her piksel, %50 gri değerle karşılaştırılarak siyah-beyaza dönüştürülür
- Dönüşümden doğan fark değeri şu şekilde çevredeki 6 piksele dağıtılır
(X: mevcut piksel, her birine 1/8 dağıtılır)
- X 1/8 1/8
- 1/8 1/8 1/8
- 1/8
- Bu yöntemle tüm görüntüye dithering etkisi uygulanır
Uygulama ve kullanım biçimi
- Görüntü dosyası tarayıcıya sürükle-bırak ile ya da dosya seçme işlevi üzerinden yüklenir
- Canvas API kullanılarak görüntü gerçek zamanlı dönüştürülür ve render edilir
- FileReader ile görüntü verisi okunur
- WebWorkers kullanılarak dithering işlemi arka planda yürütülür
- Dönüştürülen görüntü sağ tıklama ile kaydedilebilir
(tarayıcı sınırlamaları nedeniyle görüntü doğrudan masaüstüne sürüklenerek kaydedilemez)
Teknoloji yığını ve desteklenen ortam
- HTML5 ve JavaScript’in modern API’leri aktif olarak kullanılır
- Modern tarayıcı ortamı gerektirir; eski tarayıcılarda bazı özellikler kısıtlı olabilir
Sonuç
- Atkinson Dithering filtresi için basit ve sezgisel bir web uygulaması sunar
- Grafik geliştiriciler, artwork ve görüntü hafifletme gibi çeşitli alanlarda yüksek kullanım potansiyeline sahiptir
1 yorum
Hacker News görüşleri
Hâlâ en sevdiğim siyah-beyaz dither algoritması
Üniversitede, Mac'e B&W flatbed tarayıcı bağlayıp HyperCard stack benzeri bir programla görüntü tarayarak siyah-beyaz görseller oluşturma deneyimim olmuştu
Üniversite kitabevinden aldığım bir clipart kitabındaki görselleri hızlıca tarayıp, 1988 civarında yazmaya başladığım bir Mac shareware oyununun "logosu" olarak kullanmıştım
O zamanlar Atkinson algoritmasının ne kadar harika olduğunu bilmiyordum, ama daha sonra başka dither algoritmalarını deneyince Bill'in kodundaki yayılım yönteminin gerçekten mükemmel olduğunu fark ettim
Yakın zamanda da eInk takvim projemde Ay'ın çeşitli evre görsellerini Atkinson stiline dönüştürmek istediğim için ilgili siteyi bulup Ay görsellerini dönüştürdüm
info dialog içindeki "as follows" bağlantısına tıklamamak daha iyi
Uzun süredir güncellenmediği için artık NSFW (işte ya da kamusal alanda görüntülemeye uygun değil) bir bağlantıya dönüşmüş
Bu uygulama gerçekten harika
İndirme sırasında anchor'ın
downloadözelliğine bir değer verirsen dosyaya varsayılan bir ad ve.pnguzantısı verebilir, böylece indirme deneyimini biraz iyileştirebilirsinNot: HTMLAnchorElement.download belgesi
downloadözelliği tarayıcılarda ancak Mart 2017'den itibaren desteklenmeye başladıÖte yandan dither aracının deposundaki son commit Mart 2016 gibi görünüyor
Yazar hâlâ GitHub'da başka depolarda aktif olduğuna göre, belki bir pull request'i kabul eder diye umuyorum
Bağlantı: canvas-atkinson-dither GitHub deposu
Benim de geliştirmekte olduğum bir proje var; birden fazla görseli MacPaint'e dönüştürüp 400k MFS biçimli disk imajları oluşturmayı sağlıyor
Bağlantı: mfsjs projesi
Birkaç aydır home directory'mde biraz kaderine terk edilmişti, ama yakın zamanda Gemini Deep Research kullanarak kütüphaneyi tamamladım
Başka dillerde yeniden üretmek ya da iyileştirmek isteyenler için LLM tarafından üretilmiş Markdown da ekledim
Python ile Atkinson dither denemek istiyorsanız
hyperdither projesini öneririm
Uygulama da hoş, arayüz de nostaljik bir his veriyor
Son zamanlarda benim Atkinson dither web component'im [0] daha fazla ziyaret almaya başlayınca garipsemiştim; meğer böyle üzücü bir haber varmış
Bence Atkinson dither özellikle orijinal Mac gibi gerçekten keskin monitörlerde en güzel görüntüleri üretiyor
Havalı ve 80'ler hissi veren bir tarafı var; o yüzden geçen yıl yaptığım oyunda da kullandım
[0]: Piksel düzeyinde hassas Atkinson dither web component'i
Benim birkaç yıl önce yaptığım benzer bir araç
Beyondloom dither aracı
Boyut seçeneklerinden birinin 512x384 olması ilginç; çünkü orijinal Mac çözünürlüğü 512x342'ydi
Gerçekten de ilk dönem Mac'lerin ekran çözünürlüğü 512x342 idi
İlgili bilgi: Orijinal Macintosh çözünürlüğü
Düzeltme: Metni tekrar okuyunca aslında haklı olduğunuzu fark ettim
Bunun tesadüf olmadığını düşünüyorum
UI sevimli, ayrıca demodaki GitHub bağlantısı da bakmaya değer
canvas-atkinson-dither GitHub deposu
Bu, bugün vefat eden Atkinson ile aynı kişi mi? Ve bu da onu anmak için yapılmış bir proje mi?
Bir bakıma evet
Ama deponun ilk commit'i 15 yıl öncesine ait, yani son haberleri duyup alelacele yapılmış bir şey değil
Evet, bu algoritmayı bizzat Atkinson "icat etti"
"Keşfetti" diye yazmıştım ama "icat etti" demek daha doğru