VẼ QUỶ ĐẠO ELLIPSE PATH VÀ LÀM NGÔI SAO CHUYỂN ĐỘNG TRÊN ĐÓ.
Thực tập.
Chép nguyên văn bảng code trên vào Notepad rồi xử dụng browser Google Chrome sẽ thấy xuất hiện một hình ellipse không khép kín như thế nầy.
 |
Đây là hình ellipse có trục lớn rx=100, trục nhỏ ry=50,góc quay
zero độ.Chọn số 1 cho large-arc-flag.Chọn số 0 cho sweep-flag.
Chọn tọa đô(0,5)cho End point đối với Start point. |
Chúng ta sẽ tìm hiểu :
- Những con số trên tô màu khác nhau .
- Cách làm cho hình ellipse khép kín.
- Cách làm cho ellipse quay theo góc độ như ý muốn.
- Cuối cùng chúng ta tìm hiểu cách làm một hành tinh chuyển động trên quỷ đạo ellipse đã vẽ.
Những con số trên tô màu khác nhau.
Muốn vẽ ellipse theo phương pháp SVG cần phải dùng 9 thông số ( parameters ) xếp theo thứ tự từ trái sang phải.
x,y, rx,ry, góc muốn quay của trục, large-arc-flag, sweep-flag, x và y của điểm chấm dứt.
* x,y là toạ độ của điểm ngòi bút bắt đầu vẽ (Start point) phải có chữ M hay m đứng trước.M nghĩa là MoveTo
* rx ,ry là trục lớn và trục nhỏ của ellipse.Có chữ A hay a đứng trước.A nghĩa là Arc.
* góc muốn quay của trục.Gọi là x-axis rotation tính bằng độ degrees.Hình vẽ trên chọn góc quay 0 độ.
Khi chúng ta thay đổi góc quay thì 2 điểm Start point và End point vẫn đứng yên với tọa độ đã có trừ trường hợp chúng ta làm Transform = “translate(x,y)”
* large-arc-flag là tên dùng để diễn tả hình vẽ lớn hơn hay nhỏ hơn 180 độ.Chọn con số 1 nếu hình vẽ lớn hơn 180 độ và chọn con số 0 cho hình nhỏ hơn 180 độ.
* sweep-flag là tên dùng để diễn tả khi bắt đầu vẽ đi theo chiều kim đồng hồ gọi là dương hay theo chiều ngược kim đồng hồ gọi là âm. Chọn con số 0 nếu theo chiều âm. Chọn con số 1 nếu theo chiều dương.
* tọa độ x,y của điểm chấm dứt (end point).Tọa độ nầy tính theo trục qua tâm toạ độ x,y của điểm khởi hành (Start point) cho nên khi tọa độ nầy rất ít thì 2 điểm Start point và End point gần nhau như hình vẽ trên.
Muốn 2 điểm Start point và End point coi như gặp nhau thì viết 0, 0.00099 thay vì 0, 5 như đã chọn
Góc muốn quay của trục ellipse path đối với trục x.
Để có thể khảo sát dể dàng góc quay của trục ellipse path đối với trục x, chúng ta vẽ thêm vào ellipse path 2 đường thẳng góc có tâm là Start point như bảng code sau đây.
Thay đổi góc quay chúng ta có những hình nầy và thấy rõ Start point và End point đứng yên tại chỗ.
Muốn Start point và End point dính vào nhau nghĩa là ellipse path khép kín ,chúng ta viết 0, 0.00099 thay cho 0, 25
Chúng ta thực tập vẽ một ngôi sao di chuyển chung quanh một black hole (Xem hình vẽ) bằng cách xử dung phương pháp SVG và SMIL.
Vì nền trời là màu đen nên phải vẽ trước.Những gì có màu lợt hơn màu đen thì vẽ sau để tránh màu đen che phủ.
Quan sát hình vẽ nầy, chúng ta phải vẽ theo thứ tự như sau.
-Vẽ nền trời màu đen.
-Vẽ black hole hình ellipse.Chung quanh black hole cò một vòng màu đỏ tượng trưng cho X-rays emitted.
-Vẽ quỷ đạo ellipse path.
-Vẽ ngôi sao hình tròn tô màu đỏ và viết code để ngôi sao chạy trên quỷ đạo ellipse.
Đây là bảng code của hình vẽ trên. Chúng ta chọn góc quay của ellipse path 350 degrees. Góc quay của black hole -3 degrees.
Muốn biết hình chuyển động như thế nào thì mở xem đề tài kế tiếp :
