Vì vậy, tôi có một hình ảnh động mà tôi đang mã hóa trong javascript và HTML5 (không có thư viện, không có plugin, không có gì và tôi muốn nó ở lại theo cách đó). Các hình ảnh động sử dụng vật lý (về cơ bản là một loạt các lò xo bất thường gắn liền với khối lượng) để mô phỏng một chất lỏng đơn giản. Đầu ra từ phần này của chương trình là lưới (2d-mảng) của các đối tượng, mỗi đối tượng có giá trị z. Điều này hoạt động khá độc đáo. Vấn đề của tôi nảy sinh khi vẽ dữ liệu lên Canvas HTML5.HTML5 Canvas Creative Alpha-Blending
Đó là hình thức của nó. Tin tôi đi, sẽ tốt hơn khi hoạt hình.
Đối với mỗi điểm dữ liệu, chương trình sẽ vẽ một vòng tròn có màu được xác định bằng giá trị z. Tuy nhiên, chỉ cần vẽ các điểm này, mẫu lưới là rõ ràng và khó nhìn thấy chất lỏng mà nó đại diện. Để giải quyết điều này, tôi đã làm cho các vòng tròn lớn hơn và minh bạch hơn để chúng chồng lên nhau và các màu được pha trộn, tạo ra một hiệu ứng nhòe chuyển động đơn giản. Kết quả là cả hai nhanh chóng và đẹp, nhưng đối với một lỗ hổng nhỏ:
Khi các vòng tròn được vẽ theo thứ tự, các giá trị màu của chúng không chồng lên nhau, và các vòng tròn sau sẽ làm mờ các hình vẽ trước đó. Về mặt toán học, trình kết xuất đang lấy trung bình có trọng số lặp lại của các giá trị màu của các vòng tròn. Điều này làm việc tốt cho hai vòng tròn, cho mỗi giá trị là 0,5 * alpha_n, nhưng đối với ba vòng tròn, trình kết xuất lấy trung bình của vòng tròn mới nhất với trung bình của hai vòng kia, cho vòng tròn mới nhất có giá trị là 0,5 * alpha_n, nhưng các vòng tròn trước đó mỗi giá trị là 0,25 * alpha_n. Khi có nhiều vòng kết nối trùng lặp hơn, quá trình này tiếp tục, tạo ra sự thiên vị đối với các vòng kết nối mới hơn và chống lại các vòng kết nối cũ hơn. Những gì tôi muốn, thay vào đó, là cho mỗi ba hoặc nhiều vòng tròn để có được một giá trị 0.33 * alpha_n, do đó các vòng tròn trước đó không bị che khuất.
Đây là hình ảnh về hoạt động trộn alpha. Chú ý rằng các vòng tròn màu xanh sau đó che khuất trước đó rút ra những màu đỏ và màu xanh lá cây:
Dưới đây là những gì các vấn đề trông giống như trong hành động. Chú ý sự xuất hiện khác nhau của phía bên trái của cục u.
Để giải quyết vấn đề này, tôi đã thử phương pháp khác nhau:
- Sử dụng vải khác nhau "pha trộn-chế độ". "Nhân" (như đã thấy trong hình trên) đã thực hiện thủ thuật, nhưng tạo ra những biến dạng màu không may.
- Tập hợp lại với nhau để vẽ các cuộc gọi. Thay vì làm cho mỗi vòng tròn một đường dẫn vải riêng biệt, tôi đã cố gắng gộp chúng lại với nhau thành một. Thật không may, điều này là không tương thích với việc có màu sắc riêng biệt và, những gì nhiều hơn, con đường không pha trộn với chính nó cả, tạo ra một bóng mờ, đơn điệu.
- Thứ tự bản vẽ xen kẽ. Thay vì vẽ các vòng tròn theo thứ tự từ 0 đến n, tôi đã thử vẽ trước tiên và sau đó là tỷ lệ cược. Điều này chỉ giải quyết được một phần vấn đề, và tạo ra một mô hình phân tầng khó coi, trong đó tỷ lệ cược xuất hiện trôi nổi trên các evens.
- Xây dựng chế độ hòa trộn của riêng tôi bằng cách sử dụng putImageData. Tôi đã thử tạo một pixel shader thủ công cho phù hợp với nhu cầu của tôi bằng cách sử dụng javascript, nhưng, như mong đợi, nó đã quá chậm.
Tại thời điểm này, tôi hơi bị kẹt. Tôi đang tìm những cách sáng tạo để giải quyết hoặc vòng quanh vấn đề này, và tôi hoan nghênh ý tưởng của bạn. Tôi không thích thú khi được bảo rằng điều đó là không thể, bởi vì tôi có thể tự mình hiểu ra điều đó.Làm thế nào bạn sẽ vẽ một chất lỏng từ những điểm dữ liệu như vậy?
PS: Tôi khá giỏi về javascript và HTML5, vì vậy bạn không cần phải dạy tôi bất cứ điều gì. Ngoài ra, nếu điều này có vẻ giống như một vấn đề tầm thường với bạn, hãy nhớ rằng tôi không buộc bạn phải trả lời. Nó chỉ làm phiền tôi và tôi muốn giải quyết nó. – mindoftea
ảo ảnh quang học chết tiệt, hình ảnh của bạn trông hoạt hình ngay cả khi không. – Philipp
Ai đó có thể cho tôi biết lý do bỏ phiếu xuống? – mindoftea