Show HN: Impossible Machines: declaratively program the physical world

Built with Rust: Processing Foundation

Série Built with Rust của Rust Foundation giới thiệu cách các thành viên công ty sử dụng Rust để giải quyết vấn đề kỹ thuật thực tế. Trong bài này, Processing Foundation chia sẻ nghiên cứu phát triển Rust của họ nhằm mở rộng khả năng xử lý đồ họa và tương tác trong trình duyệt. Họ đã tích hợp Rust vào các công cụ xử lý ảnh và animation, biên dịch thành WebAssembly để đạt hiệu suất gần native. Kết quả là các ứng dụng web của Processing Foundation có thể chạy các hiệu ứng phức tạp với tốc độ cao hơn và tiêu thụ tài nguyên thấp hơn. Điều này cho thấy Rust không chỉ phù hợp với hệ thống backend mà còn mang lại lợi ích rõ rệt cho phát triển ứng dụng web hiện đại.

Bài viết này cung cấp cái nhìn sâu sắc về cách Rust đang thay đổi những gì có thể thực hiện được trên trình duyệt qua dự án R&D của Processing Foundation.

Why one sine wave makes a bad flame

Khi lập trình flame animation bằng JavaScript canvas, việc sử dụng một sóng sine duy nhất tạo hiệu ứng ánh lửa kém tự nhiên do thiếu độ phức tạp. Nguyên nhân kỹ thuật nằm ở việc sóng sine đơn tạo ra chuyển động đều đặn, không mô phỏng được sự ngẫu nhiên tự nhiên của lửa thực tế. Hệ quả là hiệu ứng flame trông giả tạo, thiếu chiều sâu và không chân thực như cách tác giả giải quyết bằng layered sine noise và spark particles. Bài viết cung cấp code ví dụ về quadratic curve shapes và strike-to-burn state machine - những kỹ thuật giúp tạo ra flame animation chân thực và đáng học hỏi cho lập trình viên game hoặc visual effects.

Bài hướng dẫn này giúp tạo hiệu ứng lửa chân thực bằng cách kết hợp sóng sin, đường cong bậc hai và hệ thống trạng thái trong JavaScript canvas.

Playgrnd – tiny tools for making weird, beautiful things

Playgrnd là bộ sưu tập các công cụ thiết kế sinh học (generative design) miễn phí, mỗi công cụ chỉ phục vụ một mục đích duy nhất. Không yêu cầu tài khoản hay tải lên file, mọi tính năng đều chạy trực tiếp trong trình duyệt của bạn. Các công cụ này sử dụng thuật toán phức tạp như Perlin noise và Cellular automata để tạo ra hình ảnh độc đáo. Bạn có thể thử nghiệm ngay lập tức mà không cần cài đặt phần mềm hay quan tâm đến hiệu suất. Đây là nguồn tài nguyên tuyệt vời để học hỏi các kỹ thuật creative coding trong thực tế.

Bài này mang đến bộ công cụ sáng tạo tạo hình đơn giản, hiệu quả ngay trên trình duyệt mà không cần đăng nhập.

Explore This Tactile UI Powered By Real-Time WebGL Shader

Bối cảnh là một giao diện người dùng (UI) mang trải nghiệm vật lý mô phỏng gelatin với hiệu ứng hình ảnh chân thực. Nguyên nhân kỹ thuật sử dụng WebGL shaders real-time để tính toán độ biến dạng, ánh sáng phản chiếu và độ đàn hồi của bề mặt khi tương tác. Hệ quả mang lại trải nghiệm UI gần như thật, với độ trễ chỉ 16ms và hỗ trợ tối đa 60 FPS trên thiết bị di động. Điều đáng học là cách kết hợp giữa tính toán đồ họa real-time và mô hình vật lý tạo ra hiệu ứng UI độc đáo mà không cần công cụ engine game phức tạp như Unity hay Unreal.

Bài viết này giúp lập trình viên khám phá cách tạo hiệu ứng UI glass mượt mà với WebGL shader thực thời.

My Son Loves Squishies, So I Built Him One for the Browser

Bối cảnh của bài viết là một lập trình viên tham gia thử thách Hacktoberfest Weekend Challenge để tạo món quà con trai yêu thích - Squishies. Nguyên nhân kỹ thuật là sử dụng JavaScript, HTML5 Canvas và các thư viện như Matter.js để xây dựng phiên bản Squishies trực tuyến. Hệ quả là một trò chơi tương tác nơi người chơi có thể nén, kéo và xoay các mô hình squishy trên trình duyệt. Điều đáng học là cách kết hợp vật lý game engine với đồ họa Canvas để tạo trải nghiệm tương tác chân thực, có thể triển khai hoàn toàn trong trình duyệt mà không cần cài đặt.

Bài viết chia sẻ cách xây dựng ứng dụng Squishies trong trình duyệt với mã nguồn mở, giúp các lập trình viên học hỏi kỹ năng phát triển web tương tác cho dự án Hacktoberfest.

The Kaleidoscope Is a Mirror Trick

Bài viết hướng dẫn xây dựng hiệu ứng kaleidoscope tương tác trên HTML canvas bằng cách tạo đối xứng dihedral từ nét v chuột. Nguyên nhân kỹ thuật sử dụng transformation matrix để nhân bản hình ảnh theo góc 360/n độ, với n là số lượng segment. Hệ quả tạo ra hiệu ứng kaleidoscope sống động với glow effect và fading trails mượt mà. Điều đáng học là cách tối ưu performance bằng cách tái sử dụng canvas thông kỹ thuật layering và requestAnimationFrame.

Bài viết hướng dẫn cách tạo hiệu ứng kaleidoscope tương tác bằng HTML canvas với đối xứng dihedral và hiệu ứng ánh sáng mờ dần.

Source material: Artist and educator Zach Lieberman likes to break things

The creative coder explains the throughline between drawing and computation, and why he’s jealous of pioneering artist Lillian Schwartz.

Seriously Impressive Real-Time Water Caustics That Run In Your Browser

Công nghệ water caustics real-time này có sẵn hai phiên bản Lite và Full trên nền tảng open-source. Hệ thống sử dụng WebGL và GPU compute shaders để tính toán ánh sáng phản chiếu dưới nước với hiệu suất cao. Trên GPU NVIDIA RTX 3080, bản Full đạt tốc độ 60 FPS trong khi bản Lite duy trì 120 FPS. Điều đáng học hỏi là cách tác giả tối ưu hóa việc kết hợp giữa vertex shader và fragment shader để tạo hiệu ứng ánh sáng chân thực mà vẫn giữ được độ mượt mà ngay trên trình duyệt web.

Bài viết cung cấp giải pháp thực hiện hiệu ứng quang học nước ấn tượng ngay trên trình duyệt với phiên bản mã nguồn mở dễ tiếp cận.