Chuyển ảnh sang dithering Atkinson

 (gazs.github.io)
1 điểm bởi GN⁺ 2025-06-08 | 1 bình luận | Chia sẻ qua WhatsApp
  • Biến ảnh sang phong cách bộ lọc 1-bit của Macintosh cổ điển, áp dụng hiệu ứng Atkinson dithering chỉ bằng các pixel đen trắng
  • Mỗi pixel được chuyển thành đen hoặc trắng dựa trên ngưỡng xám 50%, và sai số chuyển đổi được lan truyền sang các pixel lân cận
  • Sai số được phân bổ mỗi vị trí 1/8 cho 6 vị trí xung quanh pixel hiện tại, tạo nên ảnh đen trắng có kết cấu đặc trưng
  • Ảnh kết quả có thể lưu bằng nhấp chuột phải, nhưng do hạn chế của trình duyệt nên không thể kéo ra desktop để lưu
  • Phần triển khai sử dụng Canvas, Drag and Drop events, WebWorkers và FileReader API, đồng thời yêu cầu trình duyệt hiện đại

Cách xử lý Atkinson dithering

  • Phần triển khai này tái tạo bộ lọc 1-bit Macintosh cổ điển được dùng trong Hyperdither và HyperScan
  • Quy trình xử lý là so sánh từng pixel với xám 50% rồi chuyển thành đen hoặc trắng
  • Chênh lệch giữa giá trị đầu vào và đầu ra phát sinh trong quá trình chuyển đổi được phân tán sang các pixel lân cận
    • Mỗi vị trí nhận 1/8 ở 2 vị trí bên phải của pixel hiện tại X
    • Mỗi vị trí nhận 1/8 ở 3 vị trí từ bên trái trên dòng tiếp theo
    • 1/8 ở 1 vị trí bên trái trên dòng kế tiếp nữa

Cách dùng demo và yêu cầu trình duyệt

  • Ảnh đã render có thể lưu bằng nhấp chuột phải
  • Do hạn chế của trình duyệt, không thể kéo để lưu ảnh ra desktop
  • Mã sử dụng Canvas, API Drag and Drop events, WebWorkers, FileReader
  • Cần trình duyệt hiện đại để chạy

Bài viết liên quan

1 bình luận

 
GN⁺ 2025-06-08
Các ý kiến trên Hacker News

  • Vẫn là thuật toán dithering đen trắng tôi thích nhất
    Ở trường đại học có một máy quét phẳng đen trắng nối với máy Mac, và có lẽ có thể dùng một HyperCard stack để quét ảnh rồi biến chúng thành ảnh đen trắng
    Khoảng năm 1988, khi bắt đầu làm game shareware cho Mac, tôi đã nhanh chóng quét các sách clip art mua ở hiệu sách của trường và dùng chúng làm “logo”
    Khi đó tôi không biết thuật toán Atkinson tốt đến mức nào, nhưng sau này khi thử dithering bằng các thuật toán khác, tôi mới nhận ra mức khuếch tán trong mã của Bill hiệu quả ra sao
    Gần đây, khi làm một dự án lịch eInk, tôi muốn biến ảnh Mặt Trăng ở nhiều pha khác nhau thành một loạt ảnh “phong cách Atkinson”, nên đã tìm một trang tương tự trang được liên kết và áp dụng dithering Atkinson cho ảnh Mặt Trăng [1]
    [1] Xem Mặt Trăng trong ảnh chụp màn hình: https://github.com/EngineersNeedArt/SystemSix/blob/10f2332b5...

    • Đẹp thật! Nếu có nơi nào xem được mã của Bill thì tôi muốn tự mày mò để học thử

  • Tốt nhất đừng bấm vào “as follows” trong hộp thoại thông tin
    Có vẻ đã lâu không được cập nhật, và trong thời gian đó liên kết đã trở thành NSFW

  • Phần triển khai rất tốt, và sẽ còn tốt hơn một chút nếu truyền giá trị cho thuộc tính download của thẻ anchor để đặt tên mặc định và phần mở rộng .png cho tệp tải xuống
    Tham khảo: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorE...

  • Sao không phải là Sierra dithering?
    https://tannerhelland.com/2012/12/28/dithering-eleven-algori...

    • Ban đầu có lẽ là vì hoài niệm về những máy Mac đời đầu, và dường như nó được nhắc lại vì Bill Atkinson vừa qua đời

  • Tôi đang tranh thủ làm một thứ cho phép chuyển nhiều ảnh sang MacPaint để đưa vào disk image định dạng MFS 400k
    https://github.com/minorbug/mfsjs
    Dự án này đã nằm phủ bụi nhẹ trong thư mục home của tôi suốt mấy tháng
    Tôi đã nhờ Gemini Deep Research hỗ trợ tạo thư viện, và cũng kèm theo Markdown do LLM tạo ra cho những ai muốn tái hiện hoặc cải tiến bằng ngôn ngữ khác

    • Có ghi rằng “ảnh MacPaint là một định dạng cố định với độ phân giải 576 x 720 pixel”, nhưng nó có thật sự là định dạng cố định không?
      Wikipedia cũng viết như vậy nhưng không có nguồn

  • Bản triển khai này rất tuyệt và giao diện cũng gợi nhiều hoài niệm
    Hôm nay tôi đang thắc mắc vì sao web component dithering Atkinson[0] của mình tăng lượt xem, hóa ra là vì tin buồn
    Tôi luôn nghĩ rằng trên các màn hình rất sắc nét như Mac nguyên bản, dithering Atkinson tạo ra những hình ảnh trông đẹp nhất
    Nó có gì đó rất ngầu và mang cảm giác thập niên 80, nên tôi cũng đã dùng trong game năm ngoái
    [0] https://sheep.horse/2023/1/improved_web_component_for_pixel-...

    • Dithering theo từng pixel trên màn hình Retina khá độc đáo
      Với một số ảnh, phong cách này khá hợp; với một số khác thì không
      Nó mang cảm giác cổ điển một cách kỳ lạ nhưng hiện đại, và các chấm riêng lẻ không gây khó chịu như ảnh cũ thật sự

  • Nếu muốn thử bằng Python thì có hyperdither
    https://github.com/tgray/hyperdither

    • Khi cuộn trang, các ảnh trong README chuyển sang màu nâu

  • Có vẻ rất hợp với thiết bị eInk/ePaper

  • Có phải cùng là Atkinson vừa qua đời hôm nay không, và đây là một bài tưởng niệm à?

    • Ở một mức nào đó thì đúng, nhưng commit đầu tiên của kho đã từ 15 năm trước, nên đây không phải thứ được làm vội theo tin tức
    • Đúng, ông ấy đã phát minh ra thuật toán này
      Có lẽ là một bài tưởng niệm
      Xin sửa thành “phát minh”, không phải “phát hiện”. Xem bên dưới

  • Tôi đã tạo https://atkinson.franzai.com/ vì muốn tìm hiểu thêm một chút về thuật toán đó
    Tôi đã kiểm tra lại bằng vài AI, nên hy vọng các thông tin là đúng