- Dự án này triển khai Atkinson Dithering, bộ lọc Macintosh 1-bit cổ điển, trên web
- Ảnh đầu vào được chuyển sang đen trắng bằng cách so sánh với mức xám 50%, rồi phân phối phần chênh lệch sang các pixel lân cận
- Tận dụng các công nghệ trình duyệt hiện đại như Canvas, Drag & Drop, WebWorkers, FileReader
- Ảnh đã chuyển đổi có thể lưu bằng nhấp chuột phải
- Tính năng kéo để lưu ảnh không được hỗ trợ do giới hạn của trình duyệt
Tầm quan trọng và điểm khác biệt của dự án mã nguồn mở
- Atkinson Dithering là hiệu ứng đồ họa Macintosh cổ điển được dùng trong Hyperdither và HyperScan
- Biến đổi thông tin màu sắc phức tạp của ảnh thành dạng đơn giản theo từng pixel, hữu ích để tạo ảnh đen trắng nhẹ
- Nhờ triển khai trên nền web, có thể sử dụng chỉ với trình duyệt hiện đại mà không cần phần mềm riêng
- Với WebWorkers, có thể thực thi bất đồng bộ và tối ưu hiệu năng khi xử lý ảnh dung lượng lớn
- Là mã nguồn mở nên dễ mở rộng tính năng và tùy biến
Tổng quan thuật toán Atkinson Dithering
- Mỗi pixel được so sánh với giá trị xám 50% để chuyển thành đen hoặc trắng
- Giá trị sai lệch phát sinh từ quá trình chuyển đổi được phân phối cho 6 pixel xung quanh như sau
(X: pixel hiện tại, mỗi vị trí nhận 1/8)
- X 1/8 1/8
- 1/8 1/8 1/8
- 1/8
- Theo cách này, hiệu ứng dithering được áp dụng cho toàn bộ ảnh
Cách triển khai và sử dụng
- Có thể đưa ảnh vào bằng cách kéo và thả tệp ảnh vào trình duyệt hoặc dùng tính năng chọn tệp
- Dùng API Canvas để chuyển đổi và dựng hình ảnh theo thời gian thực
- Dùng FileReader để đọc dữ liệu ảnh,
- Dùng WebWorkers để chạy xử lý dithering ở chế độ nền
- Ảnh đã chuyển đổi có thể được lưu bằng nhấp chuột phải
(do giới hạn của trình duyệt, không thể kéo ảnh trực tiếp ra màn hình để lưu)
Công nghệ sử dụng và môi trường hỗ trợ
- Tận dụng mạnh các API hiện đại của HTML5 và JavaScript
- Cần môi trường trình duyệt hiện đại, và một số tính năng có thể bị hạn chế trên trình duyệt cũ
Kết luận
- Cung cấp một triển khai web đơn giản và trực quan của bộ lọc Atkinson Dithering
- Có tiềm năng ứng dụng cao trong nhiều lĩnh vực như phát triển đồ họa, artwork, tối ưu dung lượng ảnh
1 bình luận
Ý kiến trên Hacker News
Đây vẫn là thuật toán dither đen trắng tôi thích nhất.
Hồi đại học, tôi từng có trải nghiệm kết nối máy quét phẳng B&W với Mac và quét ảnh bằng một chương trình kiểu HyperCard stack để tạo ảnh đen trắng.
Tôi còn quét nhanh một số hình từ cuốn sách clip art mua ở hiệu sách trường và dùng chúng làm 'logo' cho game shareware trên Mac mà tôi bắt đầu viết vào khoảng năm 1988.
Khi đó tôi không biết thuật toán của Atkinson tuyệt vời đến mức nào, nhưng về sau khi thử các thuật toán dither khác, tôi mới nhận ra cách khuếch tán của đoạn mã Bill viết thực sự xuất sắc.
Gần đây, trong một dự án lịch eInk, tôi muốn chuyển nhiều hình các pha của Mặt Trăng sang phong cách Atkinson, nên đã tìm ra trang này và chuyển đổi ảnh Mặt Trăng.
Tốt nhất đừng nhấp vào liên kết "as follows" trong info dialog.
Vì đã lâu không được cập nhật nên giờ nó đã thành liên kết NSFW (không phù hợp để xem ở nơi làm việc hoặc nơi công cộng).
Bản triển khai này thực sự rất tuyệt.
Khi tải xuống, nếu đặt giá trị cho thuộc tính "download" của anchor thì có thể gán sẵn tên mặc định và phần mở rộng .png cho tệp, giúp trải nghiệm tải xuống tốt hơn một chút.
Tham khảo: Tài liệu về HTMLAnchorElement.download
Trong khi đó, commit cuối cùng của kho công cụ dither có vẻ là vào tháng 3 năm 2016.
Tác giả vẫn còn hoạt động trên GitHub với các kho khác, nên tôi hy vọng có lẽ họ sẽ nhận pull request.
Liên kết: kho GitHub canvas-atkinson-dither
Tôi cũng có một dự án đang làm, cho phép chuyển nhiều ảnh sang MacPaint rồi tạo thành ảnh đĩa định dạng 400k MFS.
Liên kết: dự án mfsjs
Nó đã bị để hơi mặc kệ trong thư mục home của tôi suốt vài tháng, nhưng gần đây tôi đã dùng Gemini Deep Research để hoàn thiện thư viện.
Tôi cũng đính kèm phần markdown do LLM tạo ra cho những ai muốn tái hiện hoặc cải tiến nó bằng ngôn ngữ khác.
Nếu bạn muốn thử Atkinson dither bằng Python,
tôi đề xuất dự án hyperdither.
Phần triển khai rất hay và giao diện gợi cảm giác hoài niệm.
Gần đây tôi thấy lượt truy cập vào web component Atkinson dither[0] của mình tăng lên nên thấy lạ, rồi mới biết có tin buồn này.
Cá nhân tôi có cảm giác Atkinson dither vốn tạo ra những hình ảnh đẹp nhất trên các màn hình cực kỳ sắc nét như Mac đời đầu.
Nó có gì đó rất ngầu và đậm chất thập niên 80, nên tôi cũng dùng nó cho một game làm năm ngoái.
[0]: Web component Atkinson dither chính xác đến từng pixel
Một công cụ tương tự mà tôi đã làm vài năm trước
Công cụ dither Beyond Loom
Thú vị là một trong các tùy chọn kích thước là 512x384, trong khi độ phân giải Mac gốc là 512x342.
Đúng là những máy Mac đời đầu thực sự có độ phân giải màn hình 512x342.
Thông tin liên quan: Độ phân giải của Macintosh nguyên bản
Sửa lại: đọc kỹ lại thì đúng là bạn nói đúng.
Có cảm giác đó không phải là trùng hợp.
UI dễ thương, và liên kết GitHub của bản demo cũng đáng xem.
kho GitHub canvas-atkinson-dither
Có phải đây là cùng một Atkinson vừa qua đời hôm nay không? Và đây có phải là một dự án tưởng niệm ông ấy không?
Nói ở mức nào đó thì đúng.
Tuy nhiên commit đầu tiên của kho này là từ 15 năm trước, nên không phải là thứ được vội vàng làm ra sau khi nghe tin gần đây.
Đúng vậy, chính Atkinson là người 'phát minh' ra thuật toán này.
Tôi đã viết là 'phát hiện', nhưng 'phát minh' mới chính xác hơn.