ANIMATION OF A SAUCER BY JAVASCRIPT INCREMENT METHOD

LÀM DI ĐỘNG MỘT DĨA BAY THEO PHƯƠNG PHÁP JAVASCRIPT INCREMENT
        1-SIMPLE METHOD

With this method,we need only 2 functions. We use:
increment loc+=1 to make the object animated
and the timer called setTimeout().
loc means location.

2 - COMPLICATE METHOD.

With this method,we need 3 functions. We use :
increment i=i+ to make object animated
and the timer called setInterval()

3 - SIMPLEST METHOD.

  

With this method, we use only one function.

EXPLANATION.

Nguyên tắc chung làm cho hình chuyển động.

Cái xe muốn chạy phải có chú hay bác tài xế. Hình vẽ hay hình chụp muốn di chuyển cần phải có JavaScript function hay SVG-SMIL.

JavaScript rất phức tạp, cần phải học hơi lâu.Vậy nếu chúng ta chưa biết gì về JavaScript nhưng muốn làm hình vẽ chuyển động thì nên xử dụng SVG-SMIL rất đơn giản,rất dễ hiểu và dễ nhớ

Xử dụng Notepad.

Quan sát simplest method 3, đơn giản nhứt

Muốn hình chuyển động cần có hai phần.

* Phần đầu làm cho hình xuất hiện trên màn ảnh.Hình bắt buộc phải chứa trong My Documents.Nếu không có hình thì làm screenshot hình saucer nầy.

*Phần chót là mệnh lệnh làm cho hình chuyển động theo ý muốn.

 Sau khi hình xuất hiện, muốn hình chuyển động chúng ta phải xữ dụng một function thí dụ function doMove( ).

Hiểu function là nhiệm vụ hay là hàm số đều đúng cả vì đứng liền sau khi viết tên của function chúng ta phải viết nhiều codes để cho function theo đó mà thi hành mệnh lệnh.

Trước khi viết mệnh lệnh trong function doMove( ),chúng ta phải tự đặt ra một object để chứa trong memory và dùng phương pháp DOM để nối liên lạc object với ID của hình bằng cách viết

           var object=document.getElementById('saucer').

           và ấn định vị trí của object là 0 pixel: var loc=0;  loc nghĩa là location.

Mệnh lệnh viết trong function doMove( ), như thế nào?

* Chạy từ trái sang phải : object.style.left=loc

* Tự mình chọn increment.Khi nào hình tới vị trí lớn hơn 250 px thì quay trở lại vị trí 0 pixel.

 loc+=1; // gọi là increment.Nếu chọn số 2,3,4 ...hình di chuyển nhanh hơn

 if(loc>250){loc=0};

Phương pháp call function doMove( ) như thế nào?

Function chỉ khởi sự hoạt động làm cho hình di chuyển khi nó được " called " bằng một trong nhiều cách khác nhau.

Sự chuyển động doMove của hình luôn luôn bắt buộc phải có kèm theo thời gian tính bằng milliseconds(ms).

Để ấn định thời gian, chúng ta cần phải xử dụng một trong 2 javascript timers gọi là setInterval(doMove,delay time)và setTimeout(doMove,delay time)

*  Nếu chúng ta dùng setInterval() để call function doMove()  như method 3 và chọn delay time 30 milliseconds thì function doMove() phải chờ đợi 30 milliseconds mới làm hình di động, rồi phải chờ đợi 30 milliseconds nữa mới làm hình di động và tiếp tục giống như vậy cho đến khi nào chúng ta click chữ STOP.

(Waits 30 ms / runs,wait 30 ms / runs, waits 30 ms  /runs....and so on)

* Nếu chúng ta dùng setTimeout(doMove,30) để call function doMove() thì function chỉ được called một lần sau khi delay 30ms mà thôi cho nên hình chỉ di chuyển một đoạn rất ngắn rồi dừng lại.

(setTimeout() calls the function only once after a period time elapses and then is automatically deleted).

The minium delay time is 4ms.

Chứng minh.

Hãy viết vào Notepad bảng code dưới đây rồi trắc nghiệm sẽ thấy rất rõ.

Click vào START1, saucer chỉ xê dịch chút xíu rồi dừng lại.

Click vào START2, saucer di chuyển liên tục và chỉ dừng lại khi chúng ta click vào chữ STOP.
        

* Nếu viết t=setInterval('doMove()',30) bên ngoài function doMove()

như dưới đây, thì họat động rất tốt khi click START2 và STOP.Nhưng  hình  chuyển động ngay lập tức khi mở Browser.

    function doMove(){

    object.style.left=x+'px';

    x++;

    if(x>50){x=0}; 

    };

    t=setInterval('doMove()',30);// outside the function

* Nếu viết t=setInterval('doMove()',30) trong function doMove()

  như dưới đây thì không thể STOP sau khi click START1 và START2

    function doMove(){

    object.style.left=x+'px';

    x++;

    if(x>50){x=0}; 

    t=setInterval('doMove()',30)};// inside the function.

Do đó khi chúng ta chỉ có một  function doMove() mà thôi thì phải xử dụng setInterval('doMove()',30)" để call function như trên nghĩa là xử dụng cách call như sau.  
 a href="javascript:var t = setInterval('doMove()',30)"

Khi hình đang chạy muốn nó dừng lại thì phải có một function goị là function stop().Trong function nầy chúng ta viết clearIntervalt(t) hoặc clearTimeout(t)và ấn định vị trí mà chúng ta muốn hình dừng lại nếu muốn.
Nếu không muốn tạo thêm function stop() thì viết cách STOP giống như trên nghĩa là xử dụng .
      a href="javascript:clearInterval(t)"

Quan sát method 2 - complicate method-Passing data method

Với phương pháp nầy, chúng ta cần 3 functions.

Nếu hiểu rõ cách viết code theo phương pháp nầy, chúng ta có thể đem áp dụng làm hình chuyển động theo nhiều chiều khác nhau như từ trái sang phải, từ trên xuống dưới và ngược lại, chuyển động theo đường parabola, đường vòng tròn, đường ellipse, đường Sine v.v…

  

var object;

  function doMove(ID,x){

  object=document.getElementById(ID)

  object.style.left=x+'px';}

  var i=0;

  function increase(){  // passing data saucer,x to doMove()

   x=2*i;

   i=i+1;

   if(i>15){i=0};

   doMove('saucer',x);} ;  //calls function doMove() 

  function start(){

  t=setInterval(increase,30)}; // calls function increase().

           span onclick="start()" is used to call function start()

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

  Saucer di chuyển theo đường ellipse.
SAUCER MOVING ALONG AN ELLIPSE.

function doMove(ID,x) có 2 parameters :

ID là saucer.

x là khỏang đường di chuyển theo trục x của saucer.x thay đôi theo increment i=i+1 hoặc i++.

Nếu muốn saucer di chuyển theo đường ellipse thì viế toạ độ x, y vào function doMove() như sau. 

  var object;

  function doMove(ID,x,y){

  object=document.getElementById(ID)

  object.style.left=x+'px';

  object.style.top=y+'px';}

 

  var i=0;

  function increase(){

   x=300+(150*Math.cos(i));//changing the angle i will create animation

   y=150+(75*Math.sin(i));

   i=i+1;

   if(i>10){i=0};

   doMove('saucer',x,y);}  // calls function doMove()  

 

  function start(){

  t=setInterval(increase,500)}//calls function increase()

   span onclick="start()" is used to call function start()

Note.
The coordinates(X,Y) of an ellipse in javaScript are :

X=x+(a*Math.cos(i));

Y=y+(b*Math.sin(i));
x,y are the coordinates of any point on the ellipse.
a, b are the radius on the x and y axis.

If a=b, an ellipse becomes a circle
i : the angle ranges from 0 to  2 π radians;

SAUCER MOVING ALONG A TRIGOMETRIC SINE CURVE

   var object;

  function doMove(ID,x,y){

  object=document.getElementById(ID)

  object.style.left=x+'px';

  object.style.top=y+'px';}

 

   var i=0;

  function increase(){

   var veloc=15; // veloc is velocity(px per second)

   var amp=20;   // amp is amplitude(px )

   var freq=0.2;   // freq is frequency(oscillations per second)

   x= veloc*i;     // i is angle(radians)

   y=amp*i*Math.sin(freq*i*2*Math.PI);

   i=i+1;

   if(i>40){i=0};

   doMove('saucer',x,y);}  // calls function doMove()  

 

  function start(){

  t=setInterval(increase,500)}//calls function increase()

Note.

 y= amplitude*i*Math.sin(frequency*angle).

        Angle of 360* = 2 π radians

        Angle i* = i*2*Math.PI radians

A is amplitude.It is the ½ distance between the maximum and the minimum points of the sine function graph.

Function Y=Asin(Bx)

A represents amplitude of the graph and is always positive.It is the ½ distance between the maximum and the minimum points of the sine function graph.

B is the number of cycles from 0 to 2 π.There is 1 cycle from 0 to 2 π in the above graph.  

Frequency : is the number of complete cycles per second. One Hz is one cycle per second.

Period is the the time for one oscillation or one vibration along the x-axis. Period = 2 π / B.

Wavelength : is the distance of 2 peaks.

y=5sinx has amplitude A = 5, B=1, period = 2 π .

y=sinx has amplitude A= 1, B=1, period = 2 π.

In JavaScript, trigometric functions are belonging to the 'Math Object' and case sensitive.

We use only radians not degrees to measure the angle.

y= amplitude*i*Math.sin(frequency*angle)

còn tiếp