Как стать автором
Обновить

Комментарии 139

в опере ничего не видно, так-то ©
в Опере
Версия 9.50
Сборка 10063
Платформа Win32
Система Windows XP
всё-таки что-та видно
вот так-то ©
НЛО прилетело и опубликовало эту надпись здесь
Version 9.60
Build 10408
Platform Win32
System Windows XP
Прекрасно работает и не тормозит. сам комп достаточно слабый.
НЛО прилетело и опубликовало эту надпись здесь
Opera 9.52
Сборка 10093
Все видно, но нет прозрачности :(
хороший скрипт, гораздо больше понравился чем flash-вариант.
чем, если не секрет? тем что на js?
во первых этим, так как на flash ни чего не пишу, в отличие от js. а код посмотреть интересно. а во вторых тем, что на js тоже можно делать красивые вещи, как и на flash.
тормозит в фф3, но вроде обещается какой-то прорыв в скорости яваскрипта в нем, может и выйдет что из вашей задумки. а может можно и сейчас уже код заоптимизировать. еслибы не тормоза, то эффектная фишка вышла бы.
на моей машине 20 тего не тормозит вот на рабочей жуткии тормоза. Да и 20 тегов много это — каша получается
У меня под FF3(Linux), Intel Core 2 Duo 1.83 с 2Gb памяти тоже жутко тормозит.
Уменя FF3(Vista), Intel Core 2 Duo 1.83 с 2Gb
пардон 2.33ГГц
такая же хня на такой же конфигурации, только 2 Ghz
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
FF3 win2003 Intel Core 2 Duo 3 GHz c 4Gb памяти — тормозит
Opera 9.1 Windows XP, Celeron M 1.7 GHz, 1GB память.
Тормозов не замечено:)
Windows XP, Celeron M 1.7 GHz, 512 Мб
(Прошу прощения, недописал)
Opera 9.52: загрузка процессора 80%, тормозов нет,
Firefox 3.0: загрузка процессора 100%, не тормозит, но периодически приостанавливается «перевести дух»,
IE7: загрузка процессора 100%, все движется ужасно медленно, еле закрыл вкладку.
Вывод: автор крут, штука прикольная, но не для практического использования.
Аналогично… лагает сильно. Intel Core 2 Duo 1.83 и 2гб озу
и ваш вариант, и вариант на флеше кажется неюзабельным… только если для красоты добаить можно…
з.ы. в опере ваше облако очень даже неплохо глючит(
Мне тоже так кажется сделал только для того чтоб мозги размять :), ну и может кому понадобится
Как разминка для мозгов — супер. Как способ представления — уж лучше на флеше ;)
Эту идею можно перенести на галерею фото — должно быть интересно.
Оно в опере, в принципе работает, но почему-то отображаются не все теги сразу, некоторые неожиданно выскакивают в середине этого «облака»
Это касяки с прозрачностью, либо с перерисовкой у оперы есть такой глюк
НЛО прилетело и опубликовало эту надпись здесь
Думаете фроемворк будет работать быстрее чем голый javascript?
НЛО прилетело и опубликовало эту надпись здесь
Да интересна реализация и довольно шустрая. Только основной алгоритм не использует jquery. Так что jquery скорости не пребовляет :)
да реализация пркольная — попробуй угонись за этим тегом :)
Может работать быстрее.
Хачу пример
Ищебы обосновали бы минусы жутко интересно :)
я уже писал что там все вычисления делаются простым javascriptom да еще и не оптимально сравните их цикл вычисления

for(i=0; i<this.length; i++) {
107 if (! elem[i]) elem[i] = {};
108
109 //angle of the system
110 angle += sin*scale;
111
112 //uncomment below line to rotate 1/r^2
113 // elem[i].angle = (angle + elem[i].theta)*(400/(elem[i].r^2));
114 elem[i].angle = (angle + elem[i].theta);
115
116
117
118 //psi from -.99 to .99
119 X = elem[i].r*Math.cos(elem[i].angle*Math.PI/180)*Math.cos(elem[i].psie*Math.PI/180);
120 Y = elem[i].r*Math.sin(elem[i].angle*Math.PI/180)*Math.cos(elem[i].psie*Math.PI/180)*Math.sin(psi) + elem[i].z*Math.cos(psi);
121
122
123 elem[i].dist = parseInt( elem[i].r*Math.cos((vpsi + elem[i].psie)*Math.PI/180) +
124 elem[i].rr*Math.sin(elem[i].angle*Math.PI/180)*Math.cos(vpsi*Math.PI/180) + camDist);
125
126 // console.info(Math.sin(elem[i].angle*Math.PI/180))
127 //scale factor for sizing
128 size = (elem[i].dist — 00)/700;
129
130 //was using jquery to set the CSS like this, but the following is faster
131 //$(this[i]).css({left: X + «px», top: -Y + «px», fontSize: size + «em», opacity: (size*10)/30 });
132
133 this[i].style.top = -Y + «px»;
134 this[i].style.left = X + «px»;
135 this[i].style.fontSize = size + «em»;
136 this[i].style.opacity = (size*10)/5;
137 this[i].style.zIndex = elem[i].dist;
138 document.body.style.backgroundPosition = angle*10 + «px „ + vpsi*2 + px;

}

и мой

for(var i=0, len=this.tags.length; i<len; i++)
{
tag = this.tags[i];
var r = this.sub(this.my,[tag.x-dx, tag.y-dy, tag.z-this.radius]);
var r = this.sub(this.mx, r);
tag.setPosition({x: r[0]+dx, y: r[1]+dy, z: r[2]+this.radius});
}
А этим ребятам немешало бы курс аналитической геометрии перечитать.
Неплохо. Но тормозит жутко.
Да, круто в плане «чуваки, я сделал 3d в javascript!». Но практического применения не вижу.
Автор, поправьте заголовок!
а у меня тег «технологии» стоит на месте… а они ведь должны двигаться)))
Отображается отлично, хотя тормозит немного. Если вы это написали после появления поста, то снимаю перед вами шляпу. Может некоторые смогли бы лучше и быстрее, не знаю, но на мой взгляд это действительно круто. Хотя, честно говоря, даже если бы я стал использовать такое облако, то выбрал бы флеш.
Прошу прощения, забыл ссылку. Я имел ввиду этот пост
Да я написал этот скрипт после этого поста, мне просто стало интересно посмотреть как подобное будет работать на javascripte, но судя по комменнтам очень медленно, надо еще на silverlight попробывать :)
Боюсь что на Silverlight это будет совсем бесполезная штука, хоть и любопытная. Мой вам совет, постарайтесь сделать на java более гладко и быстро, так как при доведении до совершенства это будет жизнеспособный плагин, ориентированный на тех, кто до сих пор не установил flash плеер :) И желаю вам удачи!
мне очень понравилось, обязательно себе поставлю!
очень хорошая запоминающаяся штука.
только вот ошибки какие-то вылезают, но работе они не мешеают, так что всё ок!
На флеше гладкость достигается тем, что изменяется размер клипа с текстом(до долей пикселя равномерное смещение), а на яваскрипте — размер шрифта…
у меня не тормозит (P4-3ГГц/1Gb + FF3.0.1)? что я делаю не так?
только вот насчет практического применения — согласен. замучился ловить тег в том плане что тег вроде пойман, но еще движется и тянет за собой руку)
к тому же отыскать нужный тег крайне затруднительно…

а в целом неплохо
было бы неплохо, чтоб при наведении на тег, у него появлялся полупрозрачный фон, а то наслаиваются друг на друга — не разобрать.
А так, конечно впечатлило.
Ну это легко делается через стили
Было бы красивее, если бы при наведении на ссылку она не обводилась, имхо на флеше красивее…
НЛО прилетело и опубликовало эту надпись здесь
Math.sqrt() используется только в начале при расстановки тэгов так что здесь нечего аптемезировать а на счет map это просто цикл а он в любом случае нужен можно конечно сделать for но мне кажется сильно не поможет но я попробую :)
НЛО прилетело и опубликовало эту надпись здесь
map работает с массивом проходя по нему и выполняя функцию к каждому элементу массива. Единственное что при использование map вместо for(… идет расход на вызов функции. Я кстати map уже убрал
Не сочтите дотошным, но написание первого слова в названии темы меня несколько смущает.
я совсем с ума сошел, или коменты новые стали сверху?! :)
сорри, глюкануло…
НЛО прилетело и опубликовало эту надпись здесь
Вращающаяся =))))
Вот такие феерверки под Safari 3.1.2 Mac:
незапланированные эффекты))
мак он вообще очень фееричный
Эти вензеля у меня рисуются и под виндой во всех браузерах=\
Браузер почемуто не все перерисовывает :( бывает когда часто перерисовываеш
Ну чтоб не тормозило можно просто вращать не постоянно, а по drag'n'drop. Т.е. схватил — повращал куда надо и бросил. Было бы очень прикольно, только теги получаются все разного веса.

Я в код не заглядывал, но думаю, что оптимизировать там сильно нечего.
еще один момент — было бы разумнее, если бы теги выводились центром под курсор, если наводишь на какой-то из них, а то получается, что приходится гоняться за ними
Автор, под какой лицензией распространяется Ваш скрипт? Оч важно знать.
Пользуйтесь на здоровье
Лучшая лицензия, которую я когда-либо видел.

Обязательно зарегистрируйте ее официально.
WTFPL ?
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Нетнетнет, POLZUITES NA ZDOROVYE PUBLIC LICENSE гораздо душевнее :))
Тогда это Public Domain или «Общественное достояние».
Все это не работает в России, к слову.

Согласно комментариям одного моего знакомого (кандидат юр. наук, специализируется в области авторского права), в России с точки зрения законодательства не могут работать публичные лицензии типа GPL. Лицензию может выдать автор программы какому-то конкретному клиенту, выдать лицензию «всем» нельзя.
Рекомендую не только размер менять но и цвет — дальние темнее(серее, синее, фиолетовее), ближние светлее. Если есть какой-то минимальный художественный навык, то вы поняли, что я имею в виду. Только без фанатизма :-) Новогодняя елка точно никому не нужна.
И притормозить чуток, а то если это облако будет так летать, то на него все внимание уходит. По большому счету пока на него мышь не навели оно вообще должно чуть шевелиться.
На сет цветов я не дизайнер :( Для притормозить есть переменная в настройках speed, на счет вращения он вращается когда мышка находится на родительском элемент в примере это все окно
Может дело во мне, но работает очень медленно, фрейма так 3 в секунду
в FF3 под XP тег «технологии» поймать практически не удаётся :)
спасибо за проделанную работу, думаю, кому-то оно может быть полезным впоследствии
и да, кстати, у меня, как ни странно, почти не тормозит
и, если можно, поправьте загловок — вращающееся
Облако оно по этому мне кажется все таки « Вращающаяся облако» если я не прав поправте
Оно вращающееся — правильно.
Думаю лучше будет если они будут вращаться только после на ведения на них мышкой.
Задние слова лучше бы сделать более тёмным цветом…
Полез посмотреть лицензию… Ну и забавные у Вас коментарии, однако ;)
сделал плагин для wordpress. Автору скрипта большое спасибо за полезный скрипт!
ссылка на плагин
ссылка на демо
ссылка на архв со скриптом
Что-то в демке у меня Россия не вращается )))
Какбэ… А шо с весом слов делать?)
Машинка P4 2.8 1Гб DDR WinXP:
*Фокс 3.0.1 — Несколько притормаживает но мне кажется тут еще изза загруженности самого фокса, открыто как минимум 100 вкладок а то и 150.

*Opera 9.52 — Тормозит меньше фокса немного! но думаю изза загруженности первого.Но и может быть что Опера лучше оптимизировала работы с флеш движком. Неисключено.См.выше Celeron 1.7 Опера -Безтормозов. Опятьже чувак наверное немного врет. У меня на более мощной притормаживает слегка а на Селероне… уж

*Safari 3.1.2 Не тормозит вообще, но и отрисовываться пытается немного подругому механизму. Но это неважно веть некоторые теги стоят на месте а другие при передвижении оставляют следы.

На более мощной машине сейчас проверить не могу — устанавливаю БЗД.Ю))

Интересная штука но с флешем всегда надо быть аккуратнее.Есть вариант доработать его оптимизировать под все основные Браузеры. Оптимизировать сам код. И коненчо мне неочнеь нраивтся эта штука. Хотя гдето может и быть применима вполне.
Не нравится потому что:

Сделано не совсем универсально (многие могут испытать дискомфорт)
Сделано зеленовато. Не оптимизированно и не доработанно.

А так автор молодец. Интересно.
100 вкладок о_О у меня фокс 3 при 10 под 300 метров памяти кушает иногда, конечно будет тормозить
может быть что Опера лучше оптимизировала работы с флеш движком

Интересная штука но с флешем всегда надо быть аккуратнее

А так автор молодец. Интересно.

Главное преимущество работы автора в том, что флэша там нет. Пример сделан на java script.

По поводу ваших оценок работы скрипта в разных браузерах- а почему вы не создали для них равные условия, и беретесь оценивать? Откройте одинаковое количество вкладок в обоих, или откройте только одну со скриптом. А то после таких тестов и начинаются мифы «а ХХХХ у меня летает, а УУУУУУ тормозит». Впрочем тесты рендеринга скриптов показывают, что Опера действительно работает с js быстрее (в этом можно убедиться на хабре и в тестах Opera Kestler (9.5x) — на английском и весит ~1.7 Мб из-за графиков результатов тестов)
На счет опера быстрее это зависит от операции я както делал шаблонизатор на js та много конкатинаций и eval так по тестам у меня места по быстроте такии были:
1- софари
2- ие :)
3- Опера
4- лиса :(

Так что одни операции в одном браузере быстрее другие в другом.
Интересные результаты, не думал что рендер ИЕ может в некоторых задачах быть быстрее Оперы и ФФ.
Просто после того как я потестил работу этого скрипта на одной машине, утром я влез перезагрузив и в пометках на раб.столе стояло — «посмотреть скрипт» попивая чай я потестил еще раз на свежую голову а вчера уже неосображал почти. И не стал писать оправержения — опера с тяжелыми скриптами работает лучше. Селяви.

Сам я не пользуюсь оперой все время ее и сафари держу тока как альтернативы и то так побаловаться. Даже моя девушка предпочитает Firefox:) Может отчасти потому что он у меня открыт все время и там все настроено(вкладки закладки аддоны) Впрочем не вижу в этом сильного приимущества Оперы. Одно то что мне не удается на ней работать так же удобно даже из-за удобности и простоты интерфейса Фокса а сглаженная, простите как залупа, опера меня убивает. После четкой темы слегка желтоватой по умолчанию фоксовской и расположения элементов всех я просто немогу ничего другого использовать для браузинга.

Я дотошный человек и если чтото пишу потом вижу что неправ переписываю))
А вот какойто парень писал что на селероне 1.7 все летает ))) Вот сним поговорите. Вот такие шапкокидатели пускают дизинформацию.
Одно то что мне не удается на ней работать так же удобно даже из-за удобности и простоты интерфейса Фокса а сглаженная, простите как залупа, опера меня убивает


Мог бы поспорить на счет Опера vs ФФ, но это уже будет холивар. Ведь если сравнивать Оперу АС (а user js там туева хуча, и все уже настроено) с коробочным ФФ (без установленных плагинов он тоже голый) то ситуация будет противоположной. На вкус ИЛИ цвет фломастеры разные :)

Про Celeron 1.7: у меню ноут с Core 2 Duo, сейчас проц работает с тактовой частотой 1 ГГц. Опера как известно использует 1 ядро, так что преимуществ от второго нет. Оперативки 512 метров, в Опере АС (ядро 9.27). Открыто 23 вкладки. Браузер жрет 164 метра оперативки. Скрипт НЕ тормозит. Почему я не должен верить тому, что он не тормозит на 1.7 ГГц Celeron и Опера 9.1?
Потомучто значит нетолько от мощности процессора зависит.Если опера использует одно ядро то мой P4 2.8 Должен скрипт по идее нормально гонять. Значит тут много других факторов.Но если вы почитаете комменты еще вы увидете ребят с 2.3 1.8 DUO И тормозах на фоксе особенно на опере у меня лично тормозит Вот сейчас комп полностью разгруженный. И притормаживает. Да хрен сним.Любите споры на пустом месте разводить хоть вних типо и рождается истина.

Если очень ты умный то не общался бы со мной на эту тему ерундовую а с автором, предложения по рефакторингу бы выкладывали. Спасибо за притензии… сто раз перепроверил тормоза есть. Ждем в обновленным варианте с учетом интересных предложений геометрических))
Автору браво. Действительно классная вещь получилась, только вот если много тегов будет… кхм кхм… :)
Ну и наверное в работе этого механизма должно при наведении на нужный мне тег както все фиксироваться, даже пусть с плавным переходом. Думаю если это будет сделано тормозов будет меньше. Ибо он вращается даже при уже выбранном теге(навел) как неприкаенный. Гламурная Динамичность.
Я думал над этим даже делал. Но сложно добраться до задних тегов тк как они натыкаются на мышку и все останавливается нужно мы уводить в сторону не очень удобно. Сейчас вроде как попасть по ссылки можно а потом всеравно будет переход на другую страницу
шЫкарно =) могу только заплюсовать топик и карму, в знак уважения. Я думал только я так люблю извращаться с JS.
Кстатии для ускорения работы могу предложить использовать массив значений для SIN и COS, будет более приблизительно (для шага в 1*), но зато быстрее. Как то давно замудрялся с 3D движком на PHP — такой ход дал большой прирост произодительности, так как данные уже были просчитанны заранее, но уменьшилась точность.
ЗЫ: согласен с тем что чем «дальше» (меньше шрифт) тег от пользовалетя, тем больше значение прозрасночти надо .style.opacity=0...1 — будет выглядеть намного красивее и заодно для любого фона (для IE какое то другой свойство надо для прозрачности, щас не вспомню, а в опере и фф будет 100% работать)
Если opacity элемента стоит меньше 1.0, то шрифт теряет сглаживание. Так что лучше использовать вариант с изменением цвета шрифта на более темный и прозрачный фон для тэгов.
Универсальное решение для изменения прозрачности выглядит примерно так:
.preview a img: hover
{margin: 11px;
filter: alpha(opacity:80); /* фильтр для ИЕ */
KHTMLOpacity: 0.8;
MozOpacity: 0.8;
opacity: 0.8;}

(взял из css своего проекта)
Intel Core 2 Duo 2.3 с 2Gb Vista FF3 — такая машина нужна чтоб облако тегов плавно двигалось %))))?

нєє таких скриптов явно не надо, да и не очень юзабельно, хотя идея интересная.
Советую вот такие вещи как:

      this.mx = [
         [1, 0, 0],
         [0, cosY, -sinY],
         [0, sinY, cosY]
      ];
      this.my = [
         [cosX, 0, sinX],
         [0, 1, 0],
         [-sinX, 0, cosX]
      ];

представлять в виде результирующей матрицы:

      this.MR = [
            [ cosX, 0, sinX ],
            [ sinY*sinY, cosY, -sinY*cosY ],
            [ -sinX*cosY, sinY, cosX*cosX ]
        ];


чтобы потом в цикле был один вызов умножения матрицы на вектор:

var r = this.sub(this.MR, [tag.x-dx, tag.y-dy, tag.z-this.radius]);
tag.setPosition({x: r[0]+dx, y: r[1]+dy, z: r[2]+this.radius});
мне это пришло уже в голову когда спать ложился надо реализовать. Спосибо!
И вобще почемуто хорошии идеи приходят кода спать ложишся :)
а еще когда просыпаешь, но когда проснулся забываешь их =)
классно, мне напомнило заставку виндовса сквозь вселенную. можно сделать что бы теги летели так же.
Удачных разработок! ))
ага и догоняй их
Можно еще как у Нортон Коммандера. Через случайные промежутки времени теги взрываются :)
Очень интересно получилось. :-)

Единственное, что при вращении тэги смещаются относительно друг-друга. И еще, если поставить курсор в левый нижний угол, то происходит эффект расширения пространства… тэги становятся все больше и больше… скорость вращения все увеличивается… :-))
Так называемое расширение пространства получилось после этой оптимизации habrahabr.ru/blogs/javascript/38264/#comment_905119 гдето есть погрешность надо искать, пока времени нет :)
Тоже недавно делал примерно такое вращение.

Сильно не понравилось, что браузеры не умеют плавно уменьшать и увеличивать размер шрифта.

Ждем SVG+SMIL. :)
НЛО прилетело и опубликовало эту надпись здесь
Да, я тоже столкнулся с этой проблемой.
Как эффект — «ВАУ». Как функционал, не пойдет, минуты 2 пытался нажать на тег «ПО», он просто сливается с другими тегами. А еще под Фаерфоксом чтото тормозить стало. Минуты через две.
Тег Яндекс стоит на месте! Это реклама! :-D
Круто. Я за тегом тянусь, а он от меня убегает. Интерактивность :)
Главное отличие от оригинала, это то что в Flash версии тэги размещаются на поверхности виртуальной сферы и размещены с довольно равномерной плотностью, в вашем, в принципе некислом варианте, у меня в Firefox-e 3.0.1
это похоже на кучку слов вращающихся вокруг одного центра, ключевое слово кучка, моментами по пять шесть слов сливаются в одну линию по оси Z (нормаль к плоскости монитора).
Что-то хост с демкой лежит… Хабраэффект? :)
Хабраэффект, что ли?
ааааа убили хостинг
А Я то думаю что не показывает.
НЛО прилетело и опубликовало эту надпись здесь
Чета я там по тыкался и не нашел куда можно разместить код :(
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Выложил ссылка в посте
а у меня чего так нифига и не запустилось :-( нет соединения с серваком
Opera 9.52 build 10108 не тормозит
было бы интереснее, если бы при наведении на ссылку облако останавливалось или сильно замедлялось, чтоб за ссылками не бегать
Великолепно смотрится.
А ещё интересный эффект разгона получается, если поставить курсор в угол экрана и подождать чуть-чуть ;)
«Фраемворки не предлагать только алгоритмы»
Это как «казнить нельзя помиловать»
тормозит прилично
имхо на данном этапе не приемлено
может стоит оптимизировать код?
есть тут спецы по Javascript?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Истории