Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Скрипт "Падающий снег" 
:(
    Опции темы
12345c
Дата 28.12.2005, 07:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 2
Всего: 101



 По неоднократным просьбам сделать работающими какие-то старые скрипты со снегом, сделал и выкладываю. Учтены многие имевшиеся недостатки и пожелания.

Аннотация.
Скрипт падающего снега. 28.12.2005 IE5+, FF1.06+, Opera7.54+ 

(9.11.2006: апгрейд для Оперы 9+, проверено в Опере 9.01.)
Не требует обязательного использования рисунка снежинок. 
Может показывать несколько видов снежинок или символов, похожих на них. 
Устанавливается прозрачность снежинок или символов, оттенок цвета. 
Регулируются скорость падения, минимальный и максимальный размеры. 
Указывается расположение и ширина колонки в окне, в которой будет снег.

Снежинки кружатся по собственным случайным законам.
Процесс устойчив к прокрутке и изменению размеров окна.
Чем меньше снежинок, тем меньше нагрузка процессора при просмотре окна.

При установках по умолчанию процессор 2000МГц показал в WinXP загрузку 12-15% для IE6, 23-25% для FF (он традиционно сильно грузит анимацией прозрачных слоёв).

Работу скрипта можно посмотреть на странице falling-snow.htm.


С благодарностью приму результаты тестирования и возможность сотрудничества в особенных, но не слишком экзотических браузерах - на Юниксе, на Маках. 

Примечание от 9.11.2006: обновил скрипт до поддержки прозрачности в Опере 9+.
(На Маках так никто и не проверил? А скачивают этот скрипт регулярно.)

Это сообщение отредактировал(а) 12345c - 3.3.2008, 13:05

Присоединённый файл ( Кол-во скачиваний: 335 )
Присоединённый файл  falling_snow.rar 5,50 Kb


--------------------
Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go
PM WWW   Вверх
12345c
Дата 30.1.2006, 19:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 2
Всего: 101



 Повесил разновидность этого скрипта - снег с налетающими "в кадр" снежинками. Страница для отладки, поэтому довольно сильно нагружает процессор. При желании можно поставить stepTime=120;snowmax=15; в командной строке и перезапустить - нагрузка уменьшится.

Ожидаю, что кто-то даст дельные советы, как улучшить дизайн скрипта, приведёт гифы вращающихся снежинок с прозрачным фоном. Делать их довольно долго, возможно, кто-то сможет сделать кады анимации из 3d-модели.

http://js2.ru/example/xmp002/fa...ow-BrownMov.htm

В архиве falling-snow.rar этой версии скрипта нет, читайте со страницы демонстрации.

Главное, что хочу доделать - изменить алгоритм движения на более хаотический. Если присмотреться, сейчас они движутся по более или менее изломанной спирали. Хорошо бы попробовать вектор скоростей, подверженный броуновскому движению, и оптимизировать его так, чтобы не ухудшить производительность. Потребуется долгий тюнинг и выбор параметров, поэтому скрипт ожидает своего доделывания. 

Это сообщение отредактировал(а) 12345c - 3.3.2008, 13:06


--------------------
Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go
PM WWW   Вверх
Sardar
Дата 4.2.2006, 16:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317



Сильно грузит процессор... и так будет всегда ИМXО... это ограничивает применение скрипта.
Может набивать большие слои со снежинками в разброс, двигая слои можно добиться иллюзии что двигаютться снежинки хаотично, а браузеру гораздо меньше нагрузка (блок уже отрисован).
Можно время от времени сдвигать снежинки и в слоях, тогда хаотичность точно будет smile


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
12345c
Дата 5.2.2006, 02:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 2
Всего: 101



Чем крупнее снежинки, тем больше нагружается. Большие слои должен вообще долго двигать. Если много картинок не делать (12-15), то нормально - на 5-20% процессор типа 2 ГГц. Сильно зависит от размеров рисунков и частоты перерисовки. Если снег делать в маленьком окошке, как в подобных реализациях на флеш и джава, то по плавности будет неотличим при небольшой загрузке процессора. А вообще джава должна работать значительно быстрее. Другое дело, что отключают флеш и джаву.


--------------------
Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go
PM WWW   Вверх
Sardar
Дата 5.2.2006, 23:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317



Нет, есть понятие контейнера (в CSS), это область в которую входят другие блочные элементы со своими контейнерами и inline элементы. Если слой на абсолютной позиции, то его содержимое отрисовываеться в буффер-картинку. Если сдвигать такой слой, то он будет отрисовываться горадо быстрее чем туева хуча элементов по отдельности, т.к. отрисовки нет, прямое копирование пикселов.

Короче попробуй smile


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Siansor
Дата 8.2.2006, 09:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 61
Регистрация: 22.9.2005
Где: Украина

Репутация: нет
Всего: 0



Присоединённый файл для скачивания- не скачивается smile (4 раза пробовал)

PM MAIL WWW ICQ   Вверх
12345c
Дата 8.2.2006, 14:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 2
Всего: 101



 Siansor, ?? , у меня качается без проблем. Тогда берите его на странице демонстрации - http://js2.ru/example/xmp002/falling-snow.htm . 

Это сообщение отредактировал(а) 12345c - 3.3.2008, 13:07


--------------------
Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go
PM WWW   Вверх
12345c
Дата 9.11.2006, 20:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 2
Всего: 101



Поддержана прозрачность падающих снежинок в Опере9+.

Как это выглядит в Опере 9.01 (скрипт с эффектом приближения снежинок):

на рисунке выбрана область присутствия снега в пределах 40% правой части окна. Процессор 2 ГГц, при этом нагрузка - 40-50 % при данных установках, видимых на рисунке. В список снежинок включены символы и буквы, поэтому они летают на экране вместе с рисунками.

Присоединённый файл ( Кол-во скачиваний: 105 )
Присоединённый файл  snap5.png 35,81 Kb


--------------------
Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go
PM WWW   Вверх
AKS
Дата 1.12.2006, 15:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 2
Всего: 52



В качестве альтернативного варианта решил предложить свой "снегопад".
Сценарий для "снегопада" я попытался написать, руководствуясь принципами ООП. В результате с "дуру" я создал для каждой "снежинки" свой собственный объект, но, как раз, без этого было бы не интересно. 
В архиве - страничка с примером.

(02.12) Изменил сценарий - добавил возможность использовать изображения.

Это сообщение отредактировал(а) AKS - 2.12.2006, 16:43

Присоединённый файл ( Кол-во скачиваний: 149 )
Присоединённый файл  snowfall.zip 15,63 Kb
PM MAIL   Вверх
Zeroglif
Дата 1.12.2006, 16:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 644
Регистрация: 22.9.2005

Репутация: 1
Всего: 66



Цитата(AKS @  1.12.2006,  15:08 Найти цитируемый пост)
свой "снегопад".

 smile  Плюс семь в Москве (прощай, шипованная резина). Сейчас кроме "своего снегопада" ничего другого не остаётся. Пусть даже этот snowstorm и из 50-ти снежинок... smile


PM MAIL WWW   Вверх
AKS
Дата 1.12.2006, 21:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 2
Всего: 52



Цитата(Zeroglif)
прощай, шипованная резина

Не переживайте, разутым не останетесь! Поделюсь своими кроссовками, которые на все случаи жизни (у них псевдослик от +30С до -30С)!  ;)

Ну а по снежинкам? 50 снежинок - 50 объектов? Каково script engine'у?...

PM MAIL   Вверх
Aliance
Дата 6.12.2006, 00:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 6
Всего: 137



У меня скрипт в ИЕ как минимум моргает полоска прокрутки справа время от времени...
Зато сокрость скрипта радует smile
PM MAIL WWW ICQ Skype   Вверх
AKS
Дата 6.12.2006, 09:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 2
Всего: 52



Aliance
Попробуйте в объекте snow_Flakes_Proto увеличить значение самого первого св-ва page_padding. Я, тестируя в своих браузерах, посчитал, что 60 px будет достаточно. Но, раз уж "вылазят" снежинки за пределы ограниченной области, надо добавить. Надеюсь, что именно из-за недостаточного отступа появляется полоса прокрутки...
PM MAIL   Вверх
Aliance
Дата 6.12.2006, 11:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 6
Всего: 137



Извените, если не уточнил - пользуюсь скриптом от 12345c  smile 
PM MAIL WWW ICQ Skype   Вверх
12345c
Дата 6.12.2006, 12:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 2
Всего: 101



Да, в него надо прикрутить измеритель перегрузки процессора, чтобы затем установить автоматически меньшую скорость. Потому что на слабых процессорах перегружается (загрузка времени 100%), а если несколько окон со скриптом открыто, то и на любых.
PM WWW   Вверх
Ответ в темуСоздание новой темы Создание опроса
Здесь публикуют скрипты, которые уже проверены в обсуждениях других тем (при этом полезно поставить ссылки на все смежные обсуждения) или переносятся кем-либо из модераторов по просьбе участников, если видно, что в результате обсуждения темы был написан полезный или интересный скрипт. Третий возможный вариант - участник форума публикует скрипт, заведомо известный как полезный и эффективный, для, возможно, небольшой доработки и обсуждения.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Наши скрипты | Следующая тема »


 




[ Время генерации скрипта: 0.1698 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.