У меня есть unobfuscated и упрощенная эта анимация в jsfiddle, доступный здесь. Тем не менее, я до сих пор не совсем понимаю математику за ней.
Есть ли у кого-нибудь понимание, объясняющее анимацию?
У меня есть unobfuscated и упрощенная эта анимация в jsfiddle, доступный здесь. Тем не менее, я до сих пор не совсем понимаю математику за ней.
Есть ли у кого-нибудь понимание, объясняющее анимацию?
Ваша ссылка на скрипт не работала для меня из-за отсутствия интервальной скорости, также следует использовать getElementById
(только потому, что она работает в Internet Explorer, не делает ее кросс-браузером).
Здесь я разветкил его, вместо этого:
http://jsfiddle.net/spechackers/hJhCz/
Я также очистил код в вашей первой ссылке:
<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>
Результат кода в двух приведенных вами ссылках сильно отличается друг от друга.
Однако логика в коде очень похожа. Оба используют цикл for для петли через все символы, операцию mod на нецелочисленном числе и операцию bitwise
xor.
Как все это работает, ну в основном все I can tell you is to pay attention to the variables changing as the input and output change
.
Вся эта логика выглядит как-то вроде bitwise
загадочного способа решить, какой из двух символов или разрыв строки добавить на страницу.
Я не совсем понимаю это с точки зрения calculus or trigonometry
.
Учтите, что каждая строка, проходящая через прямоугольную область, фактически является вращением (4?) строк относительно фиксированного начала.
Фон кажется "перемещенным" в соответствии с оптической иллюзией. Фактически происходит то, что область между линиями развертки переключается между двумя char, когда линии вращаются через них.
Вот вращение eq в двух измерениях:
сначала визуализируйте (x, y) координатную пару в одной из строк до и после вращения (движения):
Итак, вы можете создать набор точек для каждой строки и повернуть их с помощью произвольно заданных углов, в зависимости от того, насколько "гладкой" вы хотите анимацию.
Ответ выше меня смотрит на всю плоскость, трансформируемую данными формулами.
Я попытался упростить его здесь - Вышеприведенная формула является тригонометрическим уравнением для вращения, которое проще решать с матрицей.
x1 - координата x до того, как действие преобразования (или оператора) действует.
одинаково для y1. скажем, x1 = 0 и y1 = 1. Это координаты x, y конца вектор в плоскости xy - в настоящее время ваш экран. если вы подключите любой угол, вы получите новый координаты с "хвостом" векторных исправлений в том же положении.
Если вы делаете это много раз (количество раз зависит от выбранного вами угла), вы вернетесь к 0 x = 0 и y = 1.
как для побитовой операции - у меня нет понимания, почему именно это было использовано.
каждая итерация там побитовая операция действует, чтобы решить, будет ли точка, на которую будет нарисована плоскость. обратите внимание на то, как сила k изменяет результат.
Дальнейшее чтение -
http://en.wikipedia.org/wiki/Linear_algebra#Linear_transformations
http://www.youtube.com/user/khanacademy/videos?query=linear+algebra