минималистский джаваскрипт
Jan. 7th, 2008 03:26 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
avva(эта запись будет интересна в основном веб-программистам)
Вот это очень круто по-моему - эффект достигнут при помощи менее чем 256 байтов джаваскрипта. Вот этот код:
Давайте разберемся.
1. Расставим немного пробелов и переносов строк.
Что из этого можно понять? У нас есть элемент <i>, которому дано имя 'd'. Вызов setInterval приводит к тому, что первый аргумент, который заканчивается "d.innerHTML=x", т.е. меняет тело элемента на x, будет вызываться каждые 9 миллисекунд (одновременно переменная O инициализируется в 9). Кроме этого присвоения, все, что происходит, это некий цикл, который исполняется 99 раз (начиная с o=99, условие прекращения o-- выполнится, когда o==0), и от цикла к циклу переменная O уменьшается на 1, но кроме того внутри цикла она 99 раз увеличивается на 22: p = E.cos(O+=22).
2. Переименуем некоторые переменные. Вместо E=Math можно везде писать просто Math. Переменная _ всегда имеет значение строки "in solid #". Раскроем некоторые инициализации отдельно. Сделаем структуру цикла более очевидной, накопление внутри переменной x перенесем в тело цикла. Переименуем o в line, т.к. логично предположить, что 99 раз - это 99 строк, а O в angle, т.к. к нему применяют синус и косинус. Наконец, вместо того, чтобы передавать setInterval одну длинную строку, вынесем этот код в функцию и передадим ее.
Читаем дальше. Начальные значения x и angle не играют роли: они нужны были только для того, чтобы определить эти переменные как можно более компактно. Становится понятен смысл "in solid #": in - это дюймы, сразу перед ними идет число - абсолютное значение либо косинуса, либо синуса угла angle - p или P. # предваряет номер цвета, который равен либо 9*36, либо 8*36, т.к. q равен либо 0, либо 1. Когда q равно 1? Когда косинус и синус угла angle одного знака, т.е. угол находится либо в первом квадранте (от 0 до 90 градусов), либо в третьем (от 180 до 270 градусов). (9-q)*36 и (8+q)*36 выбирают всегда разные цвета из набора двух цветов, в зависимости от q.
3. Переименуем переменные и упростим логику кода. Он стал длиннее, но понятнее:
Как рисуется каждая отдельная линия, понятно: с помощью тага hr, который на самом деле ничего не рисует (width:0), но слева и справа у него есть границы разных цветов и протяжений. У каждой отдельной линии длина левой и правой границы равна соответственно синусу и косинусу угла angle, или наоборот косинусу и синусу, в зависимости от того, в какой квадрант попадает angle (is_quadrant24). Цвета левой и правой границ тоже меняются в зависимости от этого, так что цвет color1 всегда соответствует косинусу угла по длине, а цвет color2 - синусу угла по длине.
Осталось разобраться, как каждая линия соотносится с следующей, и почему происходит эффект кручения.
Почему angle+=22, откуда это число? Тут используется тот факт, что 22/7 - очень хорошее приближение числа пи. Соответственно добавить к углу 22 - все равно, что добавить 7*pi, и еще чуть-чуть (примерно 0.009). Добавление 7*pi не меняет абсолютного значения косинуса и синуса угла, а только их знак на обратный - но меняет на обратный знак и того, и другого, поэтому значение is_quadrant24 от этого остается неизменным. По значениям косинуса и синуса angle при каждом прохождении сквозь цикл отличается от предыдущего очень незначительно: угол увеличивается на 0.008, и либо косинус чуть-чуть увеличивается, а синус чуть-чуть уменьшается, либо наоборот. Так и выходит, что граница между двумя цветами ползет из одной стороны в другую. Общая ширина каждой линии равна сумме синуса и косинуса (точнее, их абсолютных значений); минимум этого значения достигается в углах, кратных pi/2, и равен 1 (одному дюйму, благодаря "in"), максимум - в углах, кратных 45 градусов, и равен квадратному корню из 2 - примерно 1.41. Из-за этого возникает впечатление крутящейся ленты, видимая ширина которой колеблется из-за того, что разные ее части выходят на передний план.
За полный проход цикла сдвиг угол увеличивается на 22*99, но если учитывать только сдвиги по отношению к pi, то их накапливается всего лишь около 0.9 (сто раз по 0.009). В начале следующего цикла команда angle-=1 "отменяет" накопившийся сдвиг, еще и добавляя 0.1 по сравнению с тем, с чего начали предыдущий цикл. В итоге выходит, что по значению угла (опять-таки по модулю pi) следующий цикл немного сдвинут, на 0.1 примерно, относительно предыдущего. И это тоже помогает создать впечатление кручения: граница между цветами ползет не только внутри одного пробега из 99 линий, но и между пробегами все время двигается с определенной скоростью.
Угол angle изменяется примерно на 0.1 (по модулю pi) за один вызов функции one_event(). В какой-то момент он пересекает границу pi/2 - границу в 90, 180, 270 или 360 градусов - т.е. переходит в следующий квадрант. В этот момент значение is_quadrant24 меняется с 0 на 1 или наоборот, и соответственно длины границ и их цвета мгновенно меняются местами. Визуально это воспринимается как закручивание, переход от одного цвета на "переднем" плане к другому. Как часто это происходит? Функция вызывается каждые 9 миллисекунд, и нужно примерно 16 вызовов, чтобы накопить, по 0.1 за вызов, разницу в примерно 1.6 (pi/2). Значит, закручивание должно происходить примерно каждые 144 миллисекунды, т.е. около 7 раз в секунду.
Кажется, все; если что-то непонятно, можно спросить.
Вот это очень круто по-моему - эффект достигнут при помощи менее чем 256 байтов джаваскрипта. Вот этот код:
p01<i id=d><script>setInterval('for(x=_="in solid #",E=Math,o=99,--O;o--;x+=
"<hr style=\'width:0;margin:auto;border-right:"+E.abs(q?p:P)+_+(9-q)*36+
";border-left:"+E.abs(q?P:p)+_+(8+q)*36+"\'>")q=0>(p=E.cos(O+=22))*(P=E.sin(O));
d.innerHTML=x',O=9)</script>
Давайте разберемся.
1. Расставим немного пробелов и переносов строк.
p01 <i id=d> <script> setInterval(' \ for(x = _ = "in solid #", E=Math, o=99, --O; \ o--; \ x += "<hr style=\'width:0;margin:auto;border-right:" \ + E.abs(q ? p : P) + _ + (9-q)*36 \ + ";border-left:" \ + E.abs(q ? P : p) + _ + (8+q)*36 + "\'>" \ ) \ q = 0 > (p = E.cos(O+=22))*(P = E.sin(O)); \ d.innerHTML=x',O=9) </script>
Что из этого можно понять? У нас есть элемент <i>, которому дано имя 'd'. Вызов setInterval приводит к тому, что первый аргумент, который заканчивается "d.innerHTML=x", т.е. меняет тело элемента на x, будет вызываться каждые 9 миллисекунд (одновременно переменная O инициализируется в 9). Кроме этого присвоения, все, что происходит, это некий цикл, который исполняется 99 раз (начиная с o=99, условие прекращения o-- выполнится, когда o==0), и от цикла к циклу переменная O уменьшается на 1, но кроме того внутри цикла она 99 раз увеличивается на 22: p = E.cos(O+=22).
2. Переименуем некоторые переменные. Вместо E=Math можно везде писать просто Math. Переменная _ всегда имеет значение строки "in solid #". Раскроем некоторые инициализации отдельно. Сделаем структуру цикла более очевидной, накопление внутри переменной x перенесем в тело цикла. Переименуем o в line, т.к. логично предположить, что 99 раз - это 99 строк, а O в angle, т.к. к нему применяют синус и косинус. Наконец, вместо того, чтобы передавать setInterval одну длинную строку, вынесем этот код в функцию и передадим ее.
p01 <i id=d> <script> angle = 9; function one_event() { x = "in solid #"; --angle; for(line = 99; line != 0; line--) { q = 0 > (p = Math.cos(angle += 22))*(P = Math.sin(angle)); line_html = "<hr style=\'width:0;margin:auto;border-right:" + Math.abs(q ? p : P) + "in solid #" + (9-q)*36 + ";border-left:" + Math.abs(q ? P : p) + "in solid #" + (8+q)*36 + "\'>"; x += line_html; } d.innerHTML=x; } setInterval(one_event, 9); </script>
Читаем дальше. Начальные значения x и angle не играют роли: они нужны были только для того, чтобы определить эти переменные как можно более компактно. Становится понятен смысл "in solid #": in - это дюймы, сразу перед ними идет число - абсолютное значение либо косинуса, либо синуса угла angle - p или P. # предваряет номер цвета, который равен либо 9*36, либо 8*36, т.к. q равен либо 0, либо 1. Когда q равно 1? Когда косинус и синус угла angle одного знака, т.е. угол находится либо в первом квадранте (от 0 до 90 градусов), либо в третьем (от 180 до 270 градусов). (9-q)*36 и (8+q)*36 выбирают всегда разные цвета из набора двух цветов, в зависимости от q.
3. Переименуем переменные и упростим логику кода. Он стал длиннее, но понятнее:
p01 <i id=d> <script> angle = 0; function one_event() { x = ""; angle-=1; color1 = "#" + 8*36; color2 = "#" + 9*36; for(line = 0; line != 99; line++) { angle += 22; cos = Math.cos(angle); sin = Math.sin(angle); is_quadrant24 = (cos * sin > 0 ? 1 : 0); line_html = "<hr style=\'width:0;margin:auto" + " ;border-right:" + Math.abs(is_quadrant24 ? cos : sin) + "in" + " solid " + (is_quadrant24 ? color1 : color2) + ";border-left:" + Math.abs(is_quadrant24 ? sin : cos) + "in" + " solid " + (is_quadrant24 ? color2 : color1) + "\'>"; x += line_html; } d.innerHTML=x; } setInterval(one_event, 9); </script>
Как рисуется каждая отдельная линия, понятно: с помощью тага hr, который на самом деле ничего не рисует (width:0), но слева и справа у него есть границы разных цветов и протяжений. У каждой отдельной линии длина левой и правой границы равна соответственно синусу и косинусу угла angle, или наоборот косинусу и синусу, в зависимости от того, в какой квадрант попадает angle (is_quadrant24). Цвета левой и правой границ тоже меняются в зависимости от этого, так что цвет color1 всегда соответствует косинусу угла по длине, а цвет color2 - синусу угла по длине.
Осталось разобраться, как каждая линия соотносится с следующей, и почему происходит эффект кручения.
Почему angle+=22, откуда это число? Тут используется тот факт, что 22/7 - очень хорошее приближение числа пи. Соответственно добавить к углу 22 - все равно, что добавить 7*pi, и еще чуть-чуть (примерно 0.009). Добавление 7*pi не меняет абсолютного значения косинуса и синуса угла, а только их знак на обратный - но меняет на обратный знак и того, и другого, поэтому значение is_quadrant24 от этого остается неизменным. По значениям косинуса и синуса angle при каждом прохождении сквозь цикл отличается от предыдущего очень незначительно: угол увеличивается на 0.008, и либо косинус чуть-чуть увеличивается, а синус чуть-чуть уменьшается, либо наоборот. Так и выходит, что граница между двумя цветами ползет из одной стороны в другую. Общая ширина каждой линии равна сумме синуса и косинуса (точнее, их абсолютных значений); минимум этого значения достигается в углах, кратных pi/2, и равен 1 (одному дюйму, благодаря "in"), максимум - в углах, кратных 45 градусов, и равен квадратному корню из 2 - примерно 1.41. Из-за этого возникает впечатление крутящейся ленты, видимая ширина которой колеблется из-за того, что разные ее части выходят на передний план.
За полный проход цикла сдвиг угол увеличивается на 22*99, но если учитывать только сдвиги по отношению к pi, то их накапливается всего лишь около 0.9 (сто раз по 0.009). В начале следующего цикла команда angle-=1 "отменяет" накопившийся сдвиг, еще и добавляя 0.1 по сравнению с тем, с чего начали предыдущий цикл. В итоге выходит, что по значению угла (опять-таки по модулю pi) следующий цикл немного сдвинут, на 0.1 примерно, относительно предыдущего. И это тоже помогает создать впечатление кручения: граница между цветами ползет не только внутри одного пробега из 99 линий, но и между пробегами все время двигается с определенной скоростью.
Угол angle изменяется примерно на 0.1 (по модулю pi) за один вызов функции one_event(). В какой-то момент он пересекает границу pi/2 - границу в 90, 180, 270 или 360 градусов - т.е. переходит в следующий квадрант. В этот момент значение is_quadrant24 меняется с 0 на 1 или наоборот, и соответственно длины границ и их цвета мгновенно меняются местами. Визуально это воспринимается как закручивание, переход от одного цвета на "переднем" плане к другому. Как часто это происходит? Функция вызывается каждые 9 миллисекунд, и нужно примерно 16 вызовов, чтобы накопить, по 0.1 за вызов, разницу в примерно 1.6 (pi/2). Значит, закручивание должно происходить примерно каждые 144 миллисекунды, т.е. около 7 раз в секунду.
Кажется, все; если что-то непонятно, можно спросить.
![[identity profile]](https://www.dreamwidth.org/img/silk/identity/openid.png){kind=small}
no subject
Date: 2008-01-07 01:53 pm (UTC)no subject
Date: 2008-01-07 02:15 pm (UTC)no subject
Date: 2008-01-07 02:33 pm (UTC)no subject
Date: 2008-01-07 02:39 pm (UTC)no subject
Date: 2008-01-07 02:40 pm (UTC)no subject
Date: 2008-01-07 02:52 pm (UTC)no subject
Date: 2008-01-07 02:53 pm (UTC)no subject
Date: 2008-01-07 02:54 pm (UTC)no subject
Date: 2008-01-07 02:59 pm (UTC)no subject
Date: 2008-01-07 03:29 pm (UTC)no subject
Date: 2008-01-07 03:37 pm (UTC)http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/
no subject
Date: 2008-01-07 03:50 pm (UTC)no subject
Date: 2008-01-07 04:04 pm (UTC)no subject
Date: 2008-01-07 05:21 pm (UTC)интуитивно не очень понятна (для тех, у кого JS не основной рабочий инструмент). Сначала надо уяснить, что символ "_" может быть именем переменной, а потом еще догадаться, что оператор присваивания в JS, наверное, тоже правоассоциативный, как в C++ и Java. Не люблю, когда код, с которым приходится работать, написан в таком стиле.
no subject
Date: 2008-01-07 05:50 pm (UTC)no subject
Date: 2008-01-07 06:34 pm (UTC)no subject
Date: 2008-01-07 06:45 pm (UTC)no subject
Date: 2008-01-07 07:00 pm (UTC)no subject
Date: 2008-01-07 07:07 pm (UTC)no subject
Date: 2008-01-07 09:53 pm (UTC)no subject
Date: 2008-01-08 02:19 am (UTC)no subject
Date: 2008-01-08 03:28 am (UTC)no subject
Date: 2008-01-08 08:42 am (UTC)http://centrolit.kulichki.com/centrolit/cgi/br_grade.cgi?grade=13078
(примерчик древний, показывает у меня в IE7, но не показывает в FF2.0)
no subject
Date: 2008-01-08 09:02 am (UTC)http://centrolit.kulichki.com/centrolit/cgi/br_grade.cgi?grade=13120
Все это умельцы вводят в узеньких текстовых полях ввода для стихов на www.burme.com, естественно, ни для чего такого не предназначенных. При этом ввод обязан удовлетворять правилам буриме (оканчиваться на заданные рифмы).
no subject
Date: 2008-01-08 09:59 am (UTC)no subject
Date: 2008-01-08 10:39 am (UTC)no subject
Date: 2008-01-08 03:57 pm (UTC)no subject
Date: 2008-01-08 04:37 pm (UTC)no subject
Date: 2008-01-08 04:39 pm (UTC)no subject
Date: 2008-01-08 04:41 pm (UTC)function(o) {
o.call(o.callee)
}($)
вам мозг не рвёт? ;)
no subject
Date: 2008-01-08 04:48 pm (UTC)no subject
Date: 2008-01-08 04:50 pm (UTC)no subject
Date: 2008-01-08 07:38 pm (UTC)no subject
Date: 2008-01-09 08:56 pm (UTC)no subject
Date: 2008-01-09 08:58 pm (UTC)if (/MSIE\s+(\d+)/.test(navigator.userAgent)) alert(RexExp.$1)
no subject
Date: 2008-01-10 12:45 pm (UTC)no subject
Date: 2008-01-10 03:42 pm (UTC)http://www.registrator-ooo.ru/
no subject
Date: 2008-01-12 04:08 pm (UTC)no subject
Date: 2008-01-12 09:58 pm (UTC)no subject
Date: 2008-01-13 09:26 am (UTC)online recruitment jobs
Date: 2011-07-18 12:24 am (UTC)[/u]
pnb jobs
marketing coordinator jobs san
meter fitter jobs
manufacturing jobs com
jobs traffordcentre co uk
[url=http://www.nayakplasticsurgery.com/forum/topic.php?id=879]kayak roof mount carrier ford f150[/url]
[url=http://www.wizardology.org/forum/topic.php?id=4722]croatian chat sites[/url]
make difference jobs
long and foster jobs
netapps jobs
paramedic jobs international
new jobs for new york
lavergne jobs
[b]lpn jobs in wilmington
[/b]
[url=http://www.vampirediaries24.pl/forum/viewthread.php?thread_id=2835]free cake recipes from puerto rico[/url]
[url=http://www.srirangacateringservice.com/content/kds-pthc-bbs-pedo]kds pthc bbs pedo[/url]
[url=http://www.italianisticaonline.it/forum/topic.php?id=2929]Weight Watchers Points Ruby Tuesday Restaurant[/url]
oil gas pipeline jobs
Date: 2011-07-21 10:27 pm (UTC)[/u]
jobs united states
pharmacy jobs in new york
osage beach mo jobs
jobs rtp
jobs upstate new york
[url=http://www.caravaggio.com/fmf/node/3253]Hrdc Student Summer Jobs[/url]
http://www.caravaggio.com/fmf/node/3253
Buy Trecator-SC online
Date: 2011-09-08 12:29 am (UTC)[url=http://rintieno.com/go.php?sid=1&tds-sekey=trecator-sc][img]http://ph-hosts.com/images/Trecator-SC_en.jpg[/img][/url]
Common use
This anti-tuberculosis medication has a bacteriostatic effect (suppress bacterial protein synthesis) and depress growth and propagation of tuberculosis mycobacteria at intracellular and extracellular location. Trecator-SC enhances phagocytosis at the center of tuberculosis inflammation which facilitates its resolution. Trecator-Sc may be used against Leprosy (Hansen's disease).
...
Dosage and directions
Your individual dose depends on your condition, age, weight and should be administered by your doctor. Take with a big glass of water with or without food. Taking of Trecator-SC with food may decrease upset of stomach. Continue treatment even if your symptoms disappeared and you feel fine as infection may not be completely treated in your organism. Stop taking this drug only by recommendation of your doctor.
[url=http://rintieno.com/go.php?sid=1&tds-sekey=trecator-sc][img]http://ph-hosts.com/images/en.jpg[/img][/url]