Phương pháp xử lý ở đây là hệ thống sẽ áp dụng phép nội suy song tuyến để tạo ra một bề mặt nhẵn do yêu cầu cả về mặt chất lượng hình ảnh và hiệu năng khi chạy. Khi bề mặt đã được tạo, một hàm đặt ngẫu nhiên các "hạt" (điểm của 1 luồng gió tại 1 thời điểm nhất định) lên hình ảnh canvas tại các điểm x, y ngẫu nhiên. Mỗi hạt sau đó được "phát triển” tiếp, di chuyển theo một hướng và với vận tốc được quy định bởi bề mặt nội suy. Các bước thực hiện như sau:
- Đọc dữ liệu từ tệp json để lấy được toàn bộ thành phần [u,v]
- Dựng lưới tọa độ: mỗi vị trí hàng i, cột j sẽ tương ứng như 1 vector [uij,vij,mij] - Xác định extent của bản đồ và kích thước của ảnh tiff
- Thực hiện nội suy từng điểm trên ảnh tiff để xác định được hướng và tốc độ tương ứng tại 1 thời điểm. Trên ma trận ảnh tiff, chúng ta sẽ duyệt theo từng cột. Với mỗi cột j, chúng ta sẽ nội suy theo 1 điểm theo từng hàng i. Trong quá trình nội suy, ta cần loại bỏ các thành phần là NoData hoặc nằm ngoài phạm vi ảnh. Sau khi nội suy xong, chúng ta sẽ thu được 1 mảng chứa các vector gió bao gồm 3 thành phần [u, v, m] cho mỗi điểm [x, y] tương ứng trên ảnh số
Hình 3.18. Các thành phần u, v, m tại 1 vị trí trên điểm ảnh
- Sau khi đã có đầy đủ dữ liệu, chúng ta tiến hành hiển thị dữ liệu gió như sau:
o Biểu diễn các luồng gió với những tốc độ khác nhau qua những màu sắc khác nhau. Trong hệ thống này, chúng ta sẽ chia là 10 màu tương ứng từ
xanh đến trắng với 10 cấp độ gió được chia đều nhau, với mặc định vận tốc gió lớn nhất là 100 m/s
Hình 3.19 Dải màu hiển thị cấp độ gió trên bản đồ
o Giản lược đối tượng để vẽ: giản lược số lượng trên ma trận ảnh: có thể theo cách chọn ngẫu nhiên.
o Để vẽ được các luồng gió, chúng ta khởi tạo 1 đối tượng quen thuộc trên web là HTML Canvas – gọi là g. Canvas là một phần tử của HTML5, cho phép thực hiện lập trình kết xuất đồ họa các đối tượng hai chiều trên trang web. Sau đó sử dụng Javascript có thể truy cập vào khu vực này để vẽ thông qua một tập các hàm đồ họa tương tự như các API 2D khác. Xét tại thời điểm t và 1 điểm có vị trí (x, y), ta bắt đầu thực hiện vẽ:
▪ Xác định được vector [u, v, m] tại vị trí (x, y)
▪ Vị trí xt, yt được xác định như sau:
• xt = x + u
• yt = y + v * (-1), do trục y trên màn hình tỷ lệ nghịch với trục y trên bản đồ nên chúng ta cần nhân với hệ số -1. Ví dụ: u < 0, v < 0, tức là hướng gió nằm ở góc phần tư thứ III, chiều đi xuống, tức là yt < y, nhưng trên mà hình nếu giữ nguyên thì hướng gió sẽ đi lên, mà muốn đi xuống thì yt > y, tức là phải đảo chiều yt.
▪ Từ 2 vị trí (x ,y) và (xt, yt) chúng ta thực hiện vẽ
o Để có thể vẽ được liên tục, đối tượng vẽ ngoài vị trí (x ,y) và vector [u, v , m], chúng ta thêm 1 thuộc tính gọi là age, thuộc tính này sẽ nằm trong phạm vi [0, 100] và được tạo ngẫu nhiên, age = Floor(Random() * 100). Điều này có nghĩa rằng, mỗi thời điểm t, biến age này sẽ tăng lên 1, khi chạm đến giới hạn trên là 100 thì sẽ vẽ lại từ đầu luồng gió tại vị trí (x, y).