He desarmado y simplificado this animation en un archivo jsfiddle disponible here. Sin embargo, todavía no entiendo muy bien las matemáticas detrás de esto.¿Cuál es la matemática detrás de esta animación similar a un rayo?
¿Alguien tiene alguna idea que explique la animación?
Su enlace violín no estaba trabajando para mí debido a una velocidad de intervalo que falta, debe utilizar getElementById también (simplemente porque funciona en Internet Explorer no significa que sea multi-navegador).
Aquí, en horquilla, usarlo éste 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 el dos enlaces que proporcionó son muy diferentes el uno del otro. Sin embargo, la lógica en el código es bastante similar. Ambos usan un bucle for para recorrer todos los caracteres, una operación de modulación en un número no entero y una operación xor bitwise.
Cómo funciona todo, básicamente todo 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 especie de bitwise forma críptica de decidir cuál de los 2 caracteres o un salto de línea agregar a la página.
No lo sigo del todo desde un calculus or trigonometry tipo de perspectiva.
una pregunta. En la instrucción if (mod2 == 0) veo que estás haciendo esto 'var tmp = (mod2 * (64/i)) - (64/i)' (en la cláusula else). Pero, ¿necesitamos multiplicar por mod2 (que será igual a 1)? –
@ParthThakkar: en el código dice: 'Tenga en cuenta que las operaciones de mod pueden dar como resultado números como 1.984375 si se trabaja con números no enteros como los que tenemos actualmente'. –
¡bien! se perdió eso ... por lo general, los bucles siempre han sido enteros enteros para mí ... simplemente se me escapó de la mente. –
Considere que cada línea, a medida que recorre el área rectangular, es en realidad una rotación de (4?) Líneas alrededor de un origen fijo.
El fondo parece "moverse" según la ilusión óptica. Lo que sucede en realidad es que el área entre las líneas de barrido se alterna entre dos char cuando las líneas giran a través de ellas.
Aquí es el eq rotación en 2 dimensiones:
primera, visualizar un (x, y) par de coordenadas 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ños arbitrarios, dependiendo de qué tan "suave" desee la animación.
hey, ¿pueden explicar las matemáticas, las ecuaciones, cómo las obtuvieron? de hecho, estoy en la escuela secundaria y sé algo de trignometría básica. Solo quería saber la derivación de estos, si pudiera explicarlo. ¡Aclamaciones! –
@ParthThakkar: mira mi respuesta a continuación ... la obtendrás. – Thalaivar
La respuesta anterior miro todo el plano que se está transformando con las fórmulas dadas.
He intentado simplificarlo aquí - La fórmula anterior es una ecuación trigonométrica para la rotación, más sencillamente se ha resuelto con una matriz.
x1 es la coordenada x antes de que actúe la transformación de rotación (u operador).
igual para y1. digamos x1 = 0 y y1 = 1. estas son las coordenadas x, y del extremo del vector en el plano xy - actualmente su pantalla.si tapes cualquier ángulo obtendrás nuevas coordenadas con la 'cola' de las correcciones vectoriales en la misma posición.
Si lo hace muchas veces (el número de veces depende del ángulo que elija) volverá a 0 x = 0 y y = 1.
en cuanto a la operación a nivel de bit - No tengo ninguna idea de por qué exactamente se utilizó esto.
cada iteración allí la operación bit a bit actúa para decidir si el punto del plano se dibujará o no. nota k cómo la potencia 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
Como se menciona la URL, la escena es un checkboard de trazado de rayos con el punto de vista de movimiento. Ver por ejemplo http://www.cs.utah.edu/~shirley/classes/cs684_98/students/psutton/hw3/raytracer.html. – lhf