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
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.
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.
Muốn biết hình chuyển động như thế nào thì mở xem đề tài kế tiếp :