NGÔI SAO CHỚP SÁNG CHẠY TRÊN QUỶ ĐẠO QUANH CO

NGÔI SAO CHƠP SÁNG CHẠY TRÊN QUỶ ĐẠO QUANH CO.

Vẽ hình ngôi sao và vẽ quỷ đạo quanh co theo phương pháp SVG (Scalable Vector Gaphics).

SVG phát minh năm 1998 bởi nhóm chuyên viên tiêu chuẩn quốc tế “W3C SVG Working Group”

Áp dụng hương dần của SMIL làm ngôi sao chơp sáng thay đổi màu và di chuyển trên quỷ đạo quanh co theo ý muốn .

SMIL (Synchronized Multimedia Integration Language) là phần nối tiêp của SVG (extension of SVG ).

         *****************************

<svg  xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">    

<g id ="B">

<text x="180" y="150" font-size ="25" fill="blue" >START</g>

<g id = "S">

<text x="280" y="150" font-size ="25" fill="red" >STOP</g>

<g>

<polygon points="90,5  30,120 165,50 15,50 150,120" fill="red"

stroke="purple" stroke-width="10" transform="scale(0.2)"

transform ="translate(-250,-150)"</polygon>

<animate attributeName="stroke" begin="B.click" from="yellow"  repeatCount="indefinite" to="blue" dur="3s" end="S.click"/>

</animate>     

<animateMotion

path ="M 20 40,C 450 90,180 90,20 160 L120 160z//không có d                     

stroke="blue" stroke-width="3" fill="none" rotate="auto"    begin="B.click"dur="10s" repeatCount="indefinite"end="S.click"/>

</animateMotion>   

</polygon>                       

</g>

<g>  

<path id="curve"

 d="M 20 40,C 450 90,180 90,20 160 L120 160z"                 

 stroke="blue" stroke-width="3" fill="none"/             

</g</svg>         

                    GHI CHÚ              

Muốn vòng tròn chạy trên quỷ đạo quanh co thì thay thế polygon bằng codes của vòng tròn như sau.

 <g>

<circle  cx="50" cy="50" r="20" fill="red"

stroke="blue" stroke-width="18"

transform="translate(-45,-50)"> </circle>

TẠO VÒNG TRÒN VÀ SAO CHỚP SÁNG CHẠY TRÊN QUỶ ĐẠO

 VÒNG TRÒN VÀ SAO CHỚP SÃNG DI CHUYÊN TRÊN QUỶ ĐẠO

Bài viết gôm có hai programs dễ so sánh và dễ hiểu.

Dùng kiến thức vẽ hình theo phương pháp SVG (Scalable Vector Gaphics).

SVG phát minh năm 1998 bởi nhóm chuyên viên tiêu chuẩn quốc tế “W3C SVG Working Group”

Dùng kiến thức làm hình SVG chớp sáng và di chuyển theo phương phãp SMIL(Synchronized Multimedia Integration Language).

SMIL là phần nối tiêp của SVG (extension of SVG ).

                   ************************

1-Vẽ dễ dàng vòng tròn chớp sang bằng cách thay đổi màu rồi cho chạy trên quỷ đạo ellipse.

2- Vẽ ngôi sao hơi phức tạp vi quá lớn cần phải thu nhò bằng cách dùng transform="scale(...)"đế ngôi sao có thể chạy trên quỷ đạo ellipse.

Theo SVG, ngôi sao được xếp vào nhóm goị là polygon.

3-Vẽ quỷ đạo ellipse theo phương pháp của SVG

                    --------------------------------------

Program 1-Vòng tròn chớp sáng chạy trên ellipse

<svg  xmlns="http://www.w3.org/2000/svg" width="100%"

   height="100%">

    <g>

   <circle  cx="50" cy="50" r="20" fill="red"

   stroke="blue" stroke-width="18" transform="translate(-45,-50)"> //phải có dấu nầy > //Nếu viết dấu nẩy  /> thì phần sau không hoạt động

     

   <animateMotion

    path ="M 275,275 a150, 75, 0,1,1, 0,009 z"//không có chữ d                       

    stroke="blue" stroke-width="3" fill="none"

    rotate="auto" dur="10s" repeatCount="indefinite"/> //phải có  rotate="auto" để di chuyển theo quỷ đạo path.

   </animateMotion> //quỷ đạo viết trong animateMotion  

   <animate attributeName="stroke" begin="1s" from="yellow"

     to="purple" dur="3s" repeatCount="indefinite"/>

   </animate>

</circle>                  

</g>

<g>

<path id="ellipse"

 d="M 275,275 a150, 75, 0,1,1, 0,009 z"// phải có chữ d thì hình mới xuất hiện                       

stroke="blue" stroke-width="3" fill="none"/            

</g></svg> 

GHI CHÚ.

1-Quỷ đạo theo SVG goị là path. Phải viết path sau cùng thi hình vòng trỏn mới xuất hiện.

Lý do quỷ đạo sẽ che lẫp hình vòng tròn nếu viết path trước khi viết hình vòng tròn.

2-Phái dung transform =”translate(x,y)" để điều chỉnh vị trí của vong tròn phải nằm trên quỷ đạo.

Điều chỉnh x, y bằng cách trừ bớt hay cộng thêm khi nhìn hình xuất hiện

3-Muốn di chuyển trên path phải dùng animateMotion và phải kèm theo rotate="auto" để cho object di chuyển trên quỷ đạo gọi là path.

Program 2-Ngôi sao chớp sáng chạy trên ellipse.

 <svg  xmlns="http://www.w3.org/2000/svg" width="100%"

   height="100%">

 <g>

 <polygon points="90,5  30,120 165,50 15,50 150,120" fill="red"

   stroke="purple" stroke-width="10" transform="scale(0.2)"  

   </polygon> // phải có polygon  chận tại đây thì mau thay đổi

   

 <animateMotion //quỷ đạo viết trong animateMotion

 path ="M 275,275 a150, 75, 0,1,1, 0,009 z"//không có chữ d                       

 stroke="blue" stroke-width="3" fill="none"    

 rotate="auto" dur="10s" repeatCount="indefinite"/>//phải có  rotate="auto" để di chuyển theo quỷ đạo. path

 </animateMotion>     

<animate attributeName="stroke" begin="1s" from="yellow"

 to="purple" dur="3s" repeatCount="indefinite"/>

</animate>

</polygon> // có hay không có polygon tại đây cũng OK.                       

</g>

<g>

<path id="ellipse"

d="M 275,275 a150, 75, 0,1,1, 0,009 z"// phải có chữ d thì hình mới  hiện                       

 stroke="blue" stroke-width="3" fill="none"/            

</g>

</svg>

                               ***************************

TẠO NÚT START VÀ STOP

Muốn tạo nút Start và Stop thì viết program như sau.

Click nút START ngôi sao chạy chớp liên tục. Click nút STOP ngôi sao trở về vị trí gốc lúc khởi hành.

<svg  xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">

<g id ="B">

<text x="250" y="150" font-size ="25" fill="blue" >START</g>

<g id = "S">

<text x="350" y="150" font-size ="25" fill="red" >STOP</g>  

<g>

<polygon points="90,5  30,120 165,50 15,50 150,120" fill="red"

 stroke="purple" stroke-width="10" transform="scale(0.2)" </polygon>

<animate attributeName="stroke" begin="B.click" from="yellow"

 repeatCount="indefinite" to="blue" dur="3s" end="S.click"/>

</animate>    

<animateMotion

path ="M 275,275 a150, 75, 0,1,1, 0,009 z" stroke="blue"

stroke-width="3" fill="none"   

rotate="auto" begin="B.click" dur="10s" repeatCount="indefinite"  end="S.click"/>

</animateMotion>   

</polygon>                       

</g>

<g>

<path id="ellipse"

  d="M 275,275 a150, 75, 0,1,1, 0,009 z"                 

  stroke="blue" stroke-width="3" fill="none"/           

</g></svg>

LÀM HÌNH SVG CHỚP SÁNG LIÊN TỤC.

PHƯƠNG PHÁP LÀM HÌNH VẼ SVG CHỚP SÁNG.

 Trắc nghiệm nhiều lần đây là program chạy tốt.

Chỉ cần post program nầ̀y lên Notepad rồi mở bắng Browser Google thì thấy chạy tốt ngay.

                   -----------------------------

<svg  xmlns="http://www.w3.org/2000/svg" width="5000"

  height="3000">

<g> 

 <circle fill="red" stroke="blue" stroke-width ="20" cx="200"

 cy="250" r="50">  

 <animate attributeName="fill"

 begin="B.click" from="yellow" repeatCount="indefinite" to="red" dur="2s" end="S.click"/>

 </animate> 

 <animate attributeName="stroke"

 begin="B.click" from="purple" repeatCount="indefinite" to="blue" dur="3s" end="S.click"/>

 </animate>

 </circle>

    <g id ="B">

    <text x="100" y="150" font-size ="25" fill="blue" >START</g>

    <g id = "S">

    <text x="200" y="150" font-size ="25" fill="red" >STOP</g>

</g></svg>

--------------------------------- 

Ghi chú.

Trước tiên vẻ một vòng tròn theo phương pháp SVG. Đường bán kính của vòng tròn là r=40 px. Tô  vòng tròn màu đo.

Bìa của vòng tròn tô màu xanh và đày 20 px.

Xử dụng animate attributeName của SMIL để lam cho hình thay đổi màu mà chúng ta muốn chọn bất cứ màu nào.

Thí dụ trên vì chúng ta chọn repeatCount= “indefinite" nên hinh sẽ thay đổi màu liên tục không dừng lại.

Muốn có sự dừng lại và sự khởi hành theo ý muốn thi phải tạo thêm nút START và nút STOP.

Sau bài nầy sé có bài ngôi sao chớp sáng chạy trên quỷ đạo.

 

KẾT HỢP FORM VỚI FUNCTION VÀ IF... ELSE TRONG MỘT PROGRAM

 

PROGRAM KẾT HỢP FORM VỚI FUNCTION VÀ IF... ELSE

 Thí dụ dúng nhiều chữ if... else và html form để viết một program ra lịnh cho bốn thành phần nhân dân phải thi hành trong thời chiến tranh.

1-Lớp tuổi từ  25 tới 30. Phải nhập ngủ.

2-Lớp tuỗi từ  31 tới 40. Phải học vỏ tự vệ.

3-Lởp tuối nhỏ hơn 25. Phải đi học.

4-Lớp tuỗi còn lại lo xây dựng sản xuất để xuất khầu.

  ----------------

<html><body>

     <script>

   function display(x){

      if(x>=25 && x<=30){alert("TRÌNH DIỆN NHẬP NGỦ")}                   

      else if(x>=31 && x<=40){alert("HỌC VỎ TỰ VỆ")}

      if(x<25){alert("Must go to school")}

      else {alert(" LO XÂY DỰNG  SÃN XUẤT ĐỂ XUẤT KHẨU")}

      }

    </script>

    <form>

   <input type="text" name="baxao" value= " "

    style="height:60px; width:200px;"/><br><br>                    

  <button onclick="display(form.baxao.value)">CLICK</button>

    </form>

   </body></html>

---------------------

Ghi chú.

Tại sao phải dùng form của html ?

-Vì cần phải đưa vao function nhiều con số khác nhau thí dụ x=20, x=50 v.v...thì phài dùng form.

-Vì alert viết trong phạm vi của function chỉ hiển thị các con số do function chuyên tới mà thôi .

-Muốn alert hiển thị chư viết thì phải kèm thêm phương pháp phức tạp .

Tên của form có thể tự minh đặt ra tuỳ ý.

Thí dụ name ="baxao"

Muốn cho function display(x) vận hành thì phải viết như sau.

<button onclick="display(form.baxao.value)">CLICK</button> 

Ba chữ form, baxao, value phải dính nhau bằng dấu chấm theo phương pháp của DOM gọi la Document Object Model.

XỪ DỤNG LIÊN TỤC if else, else if, else, if else.

THÍ DỤ XỪ DỤNG LIÊN TỤC if else, else if, else, if else.

THÍ DỤ 1.

 CHỈ ĐƯA RA MỘT ĐIỀU KIÊN YÊU CẦU FUNCTION CHO BIẾT ĐÚNG HAY KHÔNG KHI NHÌN CÁC CON SỐ.

   <html><body>

   <script>

  function display(){

    var x1=15

    var x2=10

    var x3=20

    if(x1==x2){alert("ĐÚNG nếu thấy có")}

    else{alert("XAO KE nếu không thấy cọ")}

    }

  </script>

 <span onclick="display()">CLICK</span>

  </body> </html>

GHI CHÚ’

1-Sau chữ if và else nếu cọ hai hàng codes thỉ phải dùng dấu curly braces { }.

Nếu chỉ có một hàng thì không cần dấu curly braces.

2-Phải viêt như sau  x1==x2 thì cho kết quả đúng nếu function thấy có trong các con số trên.

Không viết  x1=x2 vì function cho kết quả sai .

Dấu == có nghía là equal symbol và cũng có nghĩa là “It has a value”

Dấu && có nghĩa là “and” 

THÍ DỤ 2.

Đưa ra hai điều kiện yêu cầu function display() cho biết đúng hay không đúng.

    <html><body>

    <script>

  function display(){

    var x1=15

    var x2=10

    var x3=20   

    if(x1==x2){alert("ĐÚNG")}

    else if(x1<x2){alert("XẠO KE")}

    else{alert("KHÔNG CÓ GÌ ĐÚNG")}

    }

  </script>

 <span onclick="display()">CLICK</span>

  </body> </html>

GHI CHÚ.

Điều kiện đầ̀u tiên ví x1 và x2 không bằng nhau nên function trả lời không đúng.

Điều kiện thứ hai không có x1 nhỏ hơn x2 nên function trả lời theo ý kiến của chúng ta muốn viết cho vui là xạo ke.

Rồi cuối cùng function cho biết không có gi đúng theo như chúng ta đã thấy trên bản mà chúng ta đã viết

THÍ DỤ  3.

Đưa ra ba điều kiên như sau.

   <html><body>

    <script>

  function display(){

    var x1=15

    var x2=10

    var x3=20

    if(x1==x2){alert("VIẾT XÁC NHÂN ĐÚNG NẾU THẤY CÓ")}

    else if(x1<x2){alert(" VIỄT KHÔNG ĐÚNG NẾU THẤY CÓ")}

    else{alert("VIẾT KHÔNG CÓ GÌ ĐÚNG VỚI HAI ĐIỀU KIÊN TRÊN")}

    if(x3>x2){alert("OK XÁC NHÂN ĐÚNG NẾU NHÌN THẤY CÓ")}

    else {alert(" MONG HỌC GIỎI CÓ NGHÊ BẢO VỆ TỔ QÙỐC")}

     }

  </script>

 <span onclick="display()"><center>CLICK</span>

  </body> </html>

Ghi chú.

Nếu muốn xuất hiện câu : "MONG HỌC GIỎI CÓ NGHÊ B̉ÀO VỆ T̉Ổ QUÔC"

Thi viết x1>x3 thay cho x3>x2

SMIL LÀM DI ĐỘNG HÌNH VẼ SVG

SMIL LÀM HÌNH SVG CHUYỂN ĐỘNG

SMIL nghĩa là Synchronized Multimedia Integration xuất hiện version đầu tiên vào năm 1998. Với version 2.1 năm 2005 có nhiều động tác làm di chuyển hinh SVG.

1-  animate attributeName làm di chuyển hình svg theo trục x, hoặc trục y .

2- animateMotion làm di chuyển hình svg theo tọa độ x,y .

Rất đơn giản không cần Javascript. Viết động tác làm di chuyển trong phạm vi của hình. Viết thời gian di chuyển , ấn định chỗ khởi hành và chỗ ngừng lại rồi cho lặp lại số lần di chuyển.

Muốn khởi hành và ngừng lại theo y muốn thì viết codes cho nút start và stop.

  -----------------------------------------------------------

A-XỬ DÚNG ĐỘNG TÁC animate attributeName.

Đây là thí dụ làm hình svg chuyển động trên trục x từ vị trí 60 pxels tới vị trí 160 pixels.

Hình di chuyển liên tục không ngừng lại. Muốn ngừng phải tạo nút STOP.

Thị dụ 1.

<svg  xmlns="http://www.w3.org/2000/svg" width="5000" height="3000">           

<circle cx="50" cy="150" r="20" stroke="red" fill="blue">

<animate attributeName="cx" dur="4" from="60" to="160"

repeatCount="indefinite"/>

</circle>

</svg>

Thí du 2.

<svg  xmlns="http://www.w3.org/2000/svg" width="5000" height="3000">           

  <circle cx="50" cy="150" r="20" stroke="red" fill="blue">

  <animate

   attributeName="cx"// viết riêng chữ animate

   begin="0s" dur="4" // viểt thêm chữ begin

   from="60"

   to="160"

   repeatCount="indefinite"/>

  </circle>

  </svg>

B-XỬ DỤNG ĐỘNG TÁC animateMotion

 Động tác goị là animateMotion của SMIL làm hinh svg chuỷển đông theo tọa độ từ điểm nầy sang điểm khác như sau.

Thí dụ.

 <svg  xmlns="http://www.w3.org/2000/svg" width="5000" height="3000">                 

<circle cx="50" cy="150" r="20" stroke="red" fill="blue">

<animateMotion dur="4" from="60,100" to="150,200"

repeatCount="indefinite"/>

</animateMotion>

</circle>

</svg>

Hình di chuyển liên tục không ngừng lại. Muốn ngừng phải tạo nút STOP

TẠO NÚT START VÀ STOP.

<svg  xmlns="http://www.w3.org/2000/svg" width="5000" height="3000">                     

<g id="1">

<circle cx="50" cy="150" r="20" stroke="red" fill="blue">

<animateMotion begin="B.click" end="S.click"  dur="4" from="60,100" to="150,200"

repeatCount="indefinite"/>

</circle>

        <g id="B">

        <text x="20" y="120" fill="blue">START</text></g>

        <g id="S">   

        <text x="100" y="120" fill="red">STOP</text></g>

 </g>

</svg>

 

HOC VẼ HÌNH THEO SVG RẤT HAY.

HỌC VẼ HÌNH BẰNG SVG RẤT HAY.

svg nghĩa là Scalable Vector Graphic

Phương pháp nầy dạy vẽ những hình rất nhẹ hơn hỉnh gif, png.

Khi kéo hình lớn ra hoặc thu nhỏ lại theo ý muốn, hình không bị hư lệch.

Loaị hình vè nâỳ rất hay, được xử dụng rất phổ thông khi muốn tạo hình di chuyển.

Bài kế tiếp “Cách Làm Hình SVG Chuyển Động Trên Quỷ Đạo”

                         ----------------------

Phương pháp SVG nầy xuất hiện vào năm1998 và thành tiêu chuẩn quốc tế năm 2000 cho nên câu đầu tiên và cuối bảng vé phải viết như sau thì hình mới xuất hiện.

 <svg  xmlns="http://www.w3.org/2000/svg" width="5000" height="3000">

</svg>

Trong câu đầu tiên phải có kích thước tự do chọn cho chiều rộng và chiều cao của view port tính theo pixels. Hình vẽ sẽ phải nằm trong view port.

Cuối bảng vẽ phải có dấu chấm dứt lã </SVG>. 

Thí dụ thực hành.
Trước tiên vẽ hinh chử nhật rồi vẽ một đường thẳng và một vòng tròn. Tất cả đều được tô màu        

Mở notepad rồi viết như sau.

(Copy rồi paste vào Notepad) 

<svg  xmlns="http://www.w3.org/2000/svg" width="5000" height="3000">       

    <rect x="150" y="100" width="200" height="150" stroke="blue" fill="aqua"/>//phải có dấu chận

    </rect>

    <line  x1="250" y1="150" x2="300" y2="200" stroke-width="4" stroke="red"/> // phải có dấu chận

    <circle cx="300" cy="150" r="20" stroke="red" fill="blue"

    </circle>

</svg>

------------------------

Ghi chú .

Không cần dùng html. Cần ấn định kich thước của khung vẽ gọi là view port đo bằng pixels theo default .

Ấn định tọa độ x,y của hình và ấn định kích thước của hình tuỳ ý.

Tung độ phải đo theo chiều âm.

Đường thẳng có toạ độ của điểm khởi hành x1,y1 và điểm cuối x2,y2

Vong tròn có tọa độ của tâm là cx, cy và bán kinh r

Save tức là tồn trử bảng vẽ bằng cách viết như sau   SVG RECT.html. Hình sẽ được tồn trử trong document của computer.

Chuyền hình tử document ra desktop thì tạo desktop shortcut rôi dung Browser Google mở xem.

MUỐN VIẾT CHỮ TRONG SVG THÌ VIẾT NHƯ SAU.

<svg xmlns="http://www.w3.org/2000/svg" width="5000" height="3000">            

    <rect x="150" y="100" width="200" height="150" stroke="blue" fill="aqua"/>//phải có dấu chận

    </rect>

    <line  x1="250" y1="150" x2="300" y2="200" stroke-width="4" stroke="red"/> // phải có dấu chận

    <circle cx="300" cy="150" r="20" stroke="red" fill="blue"/>phaỉ có dậu chận để phân dưới hiện ra

    </circle>

    <text x="80" y="300" font-size="30" font-family="arial" fill="red">THÂN CHAO QUÝ BẠN</text>

</svg>