Was ist die Mathematik hinter dieser ray-like Animation?

Question

Ich habe this animation in einem frei verfügbaren here unverschleiert und vereinfacht. Trotzdem verstehe ich die Mathematik dahinter nicht ganz.

Hat jemand einen Einblick in die Animation?

Answer 1

Ihre Geige Link wurde nicht für mich arbeiten aufgrund einer fehlenden Intervallgeschwindigkeit sollte auch mit getElementById sein (, nur weil es in Internet Explorer funktioniert nicht machen es Cross-Browser).

Hier, ich gegabelt es, diese benutzen statt:

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

Ich habe auch den Code in Ihrem ersten Link gereinigt:

<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> 

Das Ergebnis des Codes in der Zwei Links, die Sie zur Verfügung stellen, unterscheiden sich sehr voneinander. Allerdings ist die Logik im Code sehr ähnlich. Beide verwenden eine For-Schleife, um alle Zeichen zu durchlaufen, eine Mod-Operation für eine nicht ganzzahlige Zahl und eine XOR-Operation bitwise.

Wie funktioniert das alles, im Grunde alle I can tell you is to pay attention to the variables changing as the input and output change.

Die ganze Logik scheint eine Art von bitwise kryptischen Weg zu entscheiden, welche von 2 Zeichen oder ein Zeilenumbruch der Seite hinzuzufügen.

Ich folge es nicht selbst aus einer calculus or trigonometry Art der Perspektive.

Answer 2

Beachten Sie, dass jede Linie, während sie über den rechteckigen Bereich fegt, tatsächlich eine Drehung von (4?) Linien um einen festen Ursprung ist.

Der Hintergrund scheint sich entsprechend der optischen Täuschung zu "bewegen". Was tatsächlich passiert ist, dass der Bereich zwischen den Sweep-Linien zwischen zwei Chars wechselt, während die Linien durch sie rotieren. Hier

ist die Rotations eq in 2 Dimensionen:

ersten, visualisieren ein (x, y) Koordinatenpaar in einer der Leitungen, vor und nach der Drehung (Bewegung):

So können Sie eine Sammlung von Punkten für jede Linie machen und sie durch beliebig große Winkel drehen, abhängig davon, wie "glatt" Sie die Animation haben möchten.

Answer 3

Die Antwort über mir betrachtet das ganze Flugzeug mit den gegebenen Formeln.

Ich habe versucht, es hier zu vereinfachen - Die obige Formel ist eine trigonometrische Gleichung für die Rotation ist es einfacher gelöst mit einer Matrix.

x1 ist die x-Koordinate, bevor die Rotationstransformation (oder der Operator) wirkt.

gleich für y1. sagen wir x1 = 0 und y1 = 1. das sind die x, y-Koordinaten des Endes des Vektors in der xy-Ebene - derzeit Ihr Bildschirm.Wenn Sie einen beliebigen Winkel anschließen, erhalten Sie neue Koordinaten mit dem "Schwanz" der Vektorfixierungen in der gleichen Position.

Wenn Sie es oft machen (die Anzahl hängt von dem Winkel ab, den Sie wählen), kehren Sie zu 0 x = 0 und y = 1 zurück.

wie für die bitweise Operation - ich habe keinen Einblick, warum genau das verwendet wurde.

In jeder Iteration bestimmt die bitweise Operation, ob der Punkt der Ebene gezeichnet wird oder nicht. beachte k wie die Kraft von k das Ergebnis verändert.

Literaturhinweise -

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

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