Hoạt ảnh dot 16x16 tạo bằng các quy tắc toán học đơn giản

• Hoạt ảnh dot 16x16 được tạo ra thông qua các quy tắc toán học đơn giản
• Chuyển động của từng dot dựa trên công thức và phép toán toán học
• Chỉ với thuật toán tối thiểu và logic đơn giản vẫn có thể tạo ra các mẫu phức tạp nhưng cuốn hút
• Ngay cả không cần kỹ thuật dựng hình phức tạp, vẫn có thể tạo nên kết quả ấn tượng về mặt thị giác
• Cách làm này có tiềm năng lớn để ứng dụng vào trực quan hóa sáng tạo hoặc giảng dạy lập trình

---

Tổng quan

• Hoạt ảnh này được xây dựng dựa trên mảng dot kích thước 16x16
• Vị trí, màu sắc hoặc trạng thái của từng dot thay đổi liên tục theo các quy luật toán học đơn giản
• Cách triển khai này vừa hiệu quả về mặt lập trình vừa rất trực quan
• Không cần kỹ thuật phức tạp hay cao cấp mà vẫn có thể tạo ra hiệu ứng thị giác hấp dẫn và có quy luật
• Có tiềm năng ứng dụng cao trong nghệ thuật thị giác, sáng tạo thuật toán, đào tạo cho lập trình viên mới bắt đầu, v.v.

Nội dung chính

• Hoạt ảnh được thể hiện dưới dạng lưới hai chiều 16x16
• Sự thay đổi của từng dot dựa trên công thức toán học hoặc các quy tắc cụ thể
• Ví dụ, các phép toán cơ bản như sin, cos, xor hoặc mod được dùng để quyết định chuyển động và màu sắc của dot
• Không cần mã nguồn phức tạp hay thư viện bên ngoài để tạo ra hiệu ứng thị giác tinh xảo
• Chỉ cần lặp lại các công thức đơn giản cũng có thể tạo ra những mẫu độc đáo

Ý nghĩa và khả năng ứng dụng

• Cách làm này có thế mạnh ở chỗ tạo ra kết quả ấn tượng chỉ với mã nguồn tối giản
• Hữu ích để rèn luyện tư duy thuật toán, trực giác toán học và khả năng sáng tạo thị giác
• Đây là một ví dụ tốt để học cách hoạt ảnh và trực quan hóa vận hành theo cách lập trình
• Có thể dễ dàng áp dụng cho mục đích giáo dục, thử nghiệm nghệ thuật hoặc các dự án sáng tạo
• Có tính tiếp cận và khả năng ứng dụng cao với người mới học lập trình và nhà sáng tạo ở mọi độ tuổi

[xcutz]

Thật kỳ diệu

[ng0301]

Wow...

[GN⁺]

Ý kiến Hacker News

• Tixy thật sự đáng kinh ngạc, tôi cũng từng tự làm một thứ tương tự: muốn tạo hoạt ảnh cho màn hình ma trận LED bằng trang https://muffinman.io/pulsar/ , lúc đó tôi không tìm thấy tixy nên đã làm pulsar, rồi mãi sau mới lại tìm ra tixy, cũng có một dự án tương tự là https://sliderland.blinry.org/ dùng thanh trượt HTML, mấy thứ này thật sự rất vui
• Khi lần đầu phát hiện ra tixy vài năm trước, tôi thích nó đến mức đã xin phép tác giả gốc để làm trang https://www.mathsuniverse.com/tixy , thêm các câu đố vào lưới tixy và dùng trong giờ khoa học máy tính cho học sinh, các em cực kỳ mê những câu đố này
  • Cái này làm tôi nhớ đến Replicube, game giải đố 3D mới phát hành gần đây, triển khai cùng một nguyên lý theo không gian 3D
  • Cách này thực sự là một phương pháp tuyệt vời cho giáo dục, lúc đầu tôi cũng rất ấn tượng với những hàm nhỏ đó nên đã làm một bản clone bằng calculang để thử nghiệm, thêm tính năng đánh giá bằng F9 để có thể chọn biểu thức con và xem kết quả, điều này giúp ích rất nhiều trong việc hiểu các mẫu, cũng có thể xem video tại đây: https://www.youtube.com/watch?v=uXUd_-xrycs
  • Nó cũng hoạt động tốt trên điện thoại, chỉ là bàn phím điện thoại hơi bất tiện một chút nhưng vẫn dùng ổn, đó là giới hạn của điện thoại
  • Trong đồ họa máy tính, tọa độ (0,0) bắt đầu từ góc trên bên trái chứ không phải phía dưới
• Tôi đã thử làm nhiều hoạt ảnh khác nhau bằng tixy, ở đây rất vui: https://tixy.land/?code=sin%28x%29cos%28y%29%2Bcos%28x%29sin%28y%29%2Bsin%28t2%29 , còn dựng cả mẫu bạch cầu tấn công nữa: https://tixy.land/?code=sin%28x%2Bt%29%2Fcos%28y%2Bi%29%2Bcos%28yt%29%2Bt%2F0.7
• Tôi cũng làm thử hiệu ứng lửa: https://tixy.land/?code=Math.sin%28%28y%2F3%5Ex%7Ci%29%2Bt%29
• tixy giống như một phiên bản cực dễ của các trang như Shadertoy, và kiểu dễ tiếp cận đó đúng gu của tôi
• Tác giả của tixy là Martin Kleppe (@aemkei), người nổi tiếng với quine và các mẹo JS, cũng có thể xem thêm những dự án thú vị khác: https://aem1k.com/world/ , https://aem1k.com/qlock/
• Lấy cảm hứng từ tixy, tôi đã làm một ứng dụng vẽ có cọ lập trình được: https://fig.sonnet.io điểm thú vị là chuyển động của cọ thay đổi theo thời gian chứ không theo áp lực hay góc, nên phải vẽ theo nhịp, cách nó hoạt động và cách triển khai có thể xem ở đây: https://untested.sonnet.io/notes/fig-tree-brushes/
• Cũng chia sẻ một ví dụ hàm khá lạ: https://tixy.land/?code=%281%2Ft%258%29+%2F+tan%28t+%2F+%28y*x%2Ft%29%…
• Tôi cũng làm thử mẫu ngôi sao năm cánh: https://tixy.land/?code=sin%285*atan2%28y-7.5%2Cx-7.5%29-t%29
  • Còn mô phỏng chuyển động của hai con rắn nữa: https://tixy.land/?code=exp%28-%28%28x-7%29**2%29%2F12%29sin%28%28y-7%29%2F2-t%29%09-sin%28%28h%3Dhypot%28x-%3D7%2Cy-%3D7%29-5%29%29exp%28-hh%2F9%29cos%28atan2%28y%2Cx%29%2Bt%29
• Cũng có thể tạo những vòng tròn liên tục di chuyển và dần to ra bằng tixy: https://tixy.land/?code=%28x-10t%2521%29**2%2B%28y-10t%2521%29**2-t