javascript - semirrecta - ¿Cuál es la matemática detrás de esta animación similar a un rayo?

rectas segmentos y rayos para niños

Question

He desenfocado y simplificado esta animación en un jsfiddle disponible here . Sin embargo, todavía no entiendo las matemáticas detrás de esto.

¿Alguien tiene alguna idea para explicar la animación?

Answer 1

La respuesta sobre mí mira a todo el plano que se está transformando con las fórmulas dadas.

Intenté simplificarlo aquí. La fórmula anterior es una ecuación trigonométrica para la rotación; se resuelve más simplemente con una matriz.

x1 es la coordenada x antes de que actúe la transformación de rotación (u operador).

lo mismo para y1. diga x1 = 0 e y1 = 1. estas son las coordenadas x, y del final del vector en el plano xy - actualmente su pantalla. Si conecta cualquier ángulo, obtendrá nuevas coordenadas con la ''cola'' de los arreglos vectoriales en la misma posición.

Si lo hace muchas veces (la cantidad de veces depende del ángulo que elija), volverá a 0 x = 0 e y = 1.

en cuanto a la operación a nivel de bits: no tengo ninguna idea en cuanto a por qué se usó exactamente esto.

En cada iteración, la operación a nivel de bits actúa para decidir si el punto del plano se dibujará o no. note k cómo el poder de k cambia el resultado.

Otras lecturas -

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

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

Answer 2

Tenga en cuenta que cada línea, cuando se desplaza por el área rectangular, es en realidad una rotación de (4?) Líneas sobre un origen fijo.

El fondo parece "moverse" según la ilusión óptica. Lo que realmente sucede es que el área entre las líneas de barrido está alternando entre dos caracteres a medida que las líneas giran a través de ellas.

Aquí está la ecuación de rotación en 2 dimensiones:

Primero, visualice un par de coordenadas (x, y) en una de las líneas, antes y después de la rotación (movimiento):

Por lo tanto, podría hacer una colección de puntos para cada línea y rotarlos a través de ángulos de tamaño arbitrario, dependiendo de cuán "suave" quiera la animación.

Answer 3

Tu enlace de violín no funcionó para mí debido a la falta de velocidad del intervalo, también debería usar getElementById ( solo porque funciona en Internet Explorer no hace que sea de navegador cruzado ).

Aquí, lo bifurqué, use este en su lugar:

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

También he limpiado el código en su primer enlace:

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

El resultado del código en los dos enlaces que proporcionó es muy diferente entre sí. Sin embargo, la lógica en el código es bastante similar. Ambos utilizan un bucle for para recorrer todos los caracteres, una operación de modificación en un número no entero y una operación xor a nivel de bitwise .

¿Cómo funciona todo? Bueno, básicamente, todo lo I can tell you is to pay attention to the variables changing as the input and output change .

Toda la lógica parece ser una forma críptica a nivel de bitwise para decidir cuál de los 2 caracteres o un salto de línea para agregar a la página.

No lo sigo del todo desde una perspectiva de calculus or trigonometry .