2012-04-29 38 views
18

Tôi đã unobfuscated và đơn giản hóa this animation vào một jsfiddle có sẵn here. Tuy nhiên, tôi vẫn không hoàn toàn hiểu được toán học đằng sau nó.Toán học đằng sau hoạt hình giống như tia này là gì?

Có ai có bất kỳ thông tin chi tiết nào giải thích hoạt ảnh không?

+2

Do URL đề cập, cảnh là một checkboard raytraced với di chuyển quan điểm. Xem ví dụ http://www.cs.utah.edu/~shirley/classes/cs684_98/students/psutton/hw3/raytracer.html. – lhf

Trả lời

10

Liên kết fiddle của bạn không hoạt động đối với tôi do tốc độ khoảng thời gian bị thiếu, nên sử dụng getElementById quá (chỉ vì nó hoạt động trong Internet Explorer không làm cho trình duyệt chéo qua).

Ở đây, tôi chia hai nó, sử dụng một này thay vì:

http://jsfiddle.net/spechackers/hJhCz/

Tôi cũng đã dọn dẹp mã trong liên kết đầu tiên của bạn:

<pre id="p"> 
<script type="text/javascript"> 
var charMap=['p','.']; 
var n=0; 
function myInterval() 
{ 

    n+=7;//this is the amount of screen to "scroll" per interval 
    var outString=""; 


    //this loop will execute exactly 4096 times. Once for each character we will be working with. 
    //Our display screen will consist of 32 lines or rows and 128 characters on each line 
    for(var i=64; i>0; i-=1/64) 
    { 

     //Note mod operations can result in numbers like 1.984375 if working with non-integer numbers like we currently are 
     var mod2=i%2; 

     if(mod2==0) 
     { 
      outString+="\n"; 
     }else{ 
      var tmp=(mod2*(64/i))-(64/i);//a number between 0.9846153846153847 and -4032 
      tmp=tmp+(n/64);//still working with floating points. 
      tmp=tmp^(64/i);//this is a bitwise XOR operation. The result will always be an integer 
      tmp=tmp&1;//this is a bitwise AND operation. Basically we just want to know if the first bit is a 1 or 0. 
      outString+=charMap[tmp]; 

     } 
    }//for 
    document.getElementById("p").innerHTML=outString; 
} 

myInterval(); 
setInterval(myInterval,64); 
</script> 
</pre> 

Kết quả của các mã trong hai liên kết bạn cung cấp rất khác nhau. Tuy nhiên, logic trong mã khá giống nhau. Cả hai đều sử dụng vòng lặp for để lặp qua tất cả các ký tự, một phép toán mod trên một số không phải số nguyên, và một hoạt động x2 bitwise.

Làm thế nào để tất cả hoạt động, về cơ bản tất cả đều là I can tell you is to pay attention to the variables changing as the input and output change.

Tất cả logic dường như là một số loại bitwise cách khó hiểu để quyết định xem 2 ký tự hoặc ngắt dòng nào sẽ thêm vào trang.

Tôi không tự theo dõi chính mình từ góc nhìn của calculus or trigonometry.

+0

một câu hỏi. Trong câu lệnh if (mod2 == 0) tôi thấy rằng bạn đang làm điều này 'var tmp = (mod2 * (64/i)) - (64/i)' (trong mệnh đề else). Nhưng chúng ta cần phải nhân với mod2 (mà sẽ bằng 1)? –

+0

@ParthThakkar: Trong đoạn mã có nội dung 'Lưu ý, các hoạt động mod có thể dẫn đến các con số như 1.984375 nếu làm việc với các số không phải số nguyên như hiện tại của chúng tôi là'. –

+0

được rồi! bỏ lỡ điều đó ... thông thường, các vòng lặp luôn luôn là số nguyên cho tôi ... nó chỉ trượt ra khỏi đầu tôi. –

6

Hãy xem xét rằng mỗi dòng, khi nó quét qua khu vực hình chữ nhật, thực sự là một vòng quay (4?) Dòng về một nguồn gốc cố định.

Nền xuất hiện để "di chuyển" theo ảo ảnh quang học. Điều gì thực sự xảy ra là khu vực giữa các đường quét là chuyển đổi giữa hai char như các dòng xoay qua chúng.

Đây là eq quay trong 2 kích thước:

đầu tiên, hình dung một (x, y) phối hợp cặp tại một trong những đường nét, trước và sau khi luân chuyển (motion):

rotation description and rotation equation in 2-D

Vì vậy, bạn có thể tạo một tập hợp các điểm cho mỗi dòng và xoay chúng qua các góc có kích thước tùy ý, tùy thuộc vào cách "mượt mà" bạn muốn hoạt ảnh.

+1

này, bạn có thể giải thích toán học, các phương trình - làm thế nào bạn có được chúng? thực ra, tôi đang học trung học và biết một số trignometry cơ bản. Chỉ muốn biết nguồn gốc của những điều này, nếu bạn có thể giải thích. Chúc mừng! –

+0

@ ParthThakkar: Nhìn vào câu trả lời của tôi dưới đây ... bạn sẽ nhận được nó. – Thalaivar

2

Câu trả lời ở trên tôi nhìn toàn bộ mặt phẳng đang được chuyển đổi với các công thức đã cho.

Tôi đã cố đơn giản hóa nó ở đây - Công thức trên là phương trình lượng giác để xoay nó được giải quyết đơn giản hơn với ma trận.

x1 là tọa độ x trước hành vi chuyển đổi xoay vòng (hoặc toán tử).

tương tự cho y1. nói x1 = 0 và y1 = 1. đây là các tọa độ x, y của phần cuối của véc tơ trong mặt phẳng xy - hiện tại là màn hình của bạn.nếu bạn cắm bất kỳ góc nào, bạn sẽ nhận được các tọa độ mới với 'đuôi' của các bản sửa lỗi vectơ ở cùng một vị trí.

Nếu bạn làm điều đó nhiều lần (số lần phụ thuộc vào góc bạn chọn), bạn sẽ quay lại 0 x = 0 và y = 1.

đối với hoạt động bitwise - Tôi không có bất kỳ thông tin chi tiết nào về lý do chính xác điều này được sử dụng.

mỗi lần lặp lại ở đó hoạt động bitwise hoạt động để quyết định xem điểm đó có được vẽ hay không. lưu ý k làm thế nào sức mạnh của k thay đổi kết quả.

Tiếp tục đọc -

http://en.wikipedia.org/wiki/Linear_algebra#Linear_transformations

http://www.youtube.com/user/khanacademy/videos?query=linear+algebra

Các vấn đề liên quan