Canvas, снежинки. - тормоза

так оно и будет, забей

можно попробовать сделать снежинки дивками и трансформацию применять, но все равно грузить будет. такой он, браузер

что-то я не понял, там и так дивки лепятся, зачем тогда канвас?

параллакс этот примитивный руками можно посчитать если что

Не лепятся. там 3 слоя снежинок. 1) большие 2) средние 3) маленькие

временно убирал 2 слоя. сейчас опять все 3.

Где маленькие снежинки там их много

ну потом с ним буду разбираться, сейчас меня нагрузка беспокоит, я думал что канвас не будет такие тормоза давать.

Реально не ожидал

setinterval

man requestAnimationFrame

Страница недоступна, объясняй нормально что за проблема.

Смотри сейчас, у меня открывается. возможно была проблема из-за того что перезаливал.

сейчас читаю про requestAnimationFrame, спасибо.

Слишком много лишнего кода, лень вникать. Ты одноразовую поделку пишешь, или ынтерпрайзное Универсальное Решение™?

По-моему это можно написать в 50 строк вместо 300. Особенно не понятно зачем там и канвас и манипуляции с домом.

http://test.progerlab.ru/dima/snowfall/qwe/index.html

сделал при помощи requestAnimationFrame

Один фиг, одно и тоже. может я не так применил?

У меня так ещё хуже. Но у меня опера, она не умеет requestAnimationFrame в общем-то.

Я бы избавился от канваса, или наоборот, от манипуляций с домом (на хабре недавно мелькала интересная объектная либа для канваса, там как раз удобные повороты и движение). Ещё можно на каком-нибудь рафаёле сделать если снежинки в свг перегнать.

Щас кстати в старом варианте заметил что у тебя на каждый слой по интервалу, можно всё на один интервал повесить.

код тормозной у вас, в этом вся проблема. спокойно можно на канве рендерить 1000 элементов и даже софтварной отрисовкой будет справляться минимум 30 кадров в секунду

Да там просто долгая история, с домом манипуляции для старых браузеров.

В канвас полез чтобы отображалось хорошо на айпадах. Сейчас там все хорошо

убрал лишнее -http://test.progerlab.ru/dima/snowfall/qwe/index.html

свг будет тормозить еще больше т.к. дом, лучше взять paper.js - для такой цели в принципе подойдет

поэтому я тут и написал. Я не могу найти свою ошибку.

Можете ткнуть?

свг и не расматриваем

this.QueueNewFrame = function () {
	if (window.requestAnimationFrame)
		window.requestAnimationFrame(function(){self.drawFlakes(self)});
	else if (window.msRequestAnimationFrame)
		window.msRequestAnimationFrame(function(){self.drawFlakes(self)});
	else if (window.webkitRequestAnimationFrame)
		window.webkitRequestAnimationFrame(function(){self.drawFlakes(self)});
	else if (window.mozRequestAnimationFrame)
		window.mozRequestAnimationFrame(function(){self.drawFlakes(self)});
	else if (window.oRequestAnimationFrame)
		window.oRequestAnimationFrame(function(){self.drawFlakes(self)});
	else {
		QueueNewFrame = function () {};
		
		intervalID = window.setInterval(function(){
			self.drawFlakes();
		}, params.speed);
	}
};

Эту стену например можно переписать:

window.requestAnimationFrame = window.requestAnimationFrame 
	|| window.webkitRequestAnimationFrame 
	|| window.mozRequestAnimationFrame 
	|| function(callback) { /* ... */ };
// ...
this.queueNewFrame = function() {
	window.requestAnimationFrame( this.reDraw );
}

У вас что не восьмиядерник вместо процессора? (хотя кривой браузер неможеь загрузить все ядра,но всеравно...)

Вот такое оно будущее вместе с веб-ом:
Вместо ОС-веббраузер
Вместо процессора-восьмиядерник,которого струдом хватает на одну страничку с джаваскриптом
Вместо видиокарты-пять видиокарт по 2гб памяти минимум в каждой,которых струдом хватает на рендеринг куба
Вместо оперативки-минимум 512Гбайт суперскоросной памяти на азоте,которая занята на 99% при загрузке любой страницы
Вместо жесткого диска-облака безразмерные,которые по 10 минут обрабатывают запросы,а пользователь любуется красивой рекламой в это время
Вместо интернета-беспроводные высокие технологии,скорость которых регулируется самим Марсом
Вместо монитора-10 дюймовый экран с бешеным разрешением(миллион на миллион),теперь каждый с помощью микроскопа может рассматривать последние достижения веб-технологий!
Вместо клавиатуры-экран сенсорный,сама клавиатура на экране занимает минимум 90% пространства,удобство превыше всего!
Вместо мышки-видеокамера на мониторе,что пытается определить жесты пользователя,задержка на обработку 10 минут,процент корректности определения жестов 5%.Этож так весело плясать перед монитором целый час для подачи одного жеста,а потом еще 2 часа для подтверждения!Друзья и родственники будут в восторге!
Вместо динамиков-последнее достижение науки и техники пьезоэлемент!На 8 или 16 тонов,зависит от стоимости устройства.Новые динамики-абсолютно не занимают места в вашем настольном компьютере или планшете!

вебтехнологи млин...

var self = this;
// ...
self.onLoadImg(self);

Диагностирую питон головного мозга. onLoadImg итак будет иметь доступ к объекту через this.

почему не свж? возьми большой растр. тебе шашечки или ехать. код реально муторный. давай сначала сделай что-то одно, или дом или канвас. мой тебе совет, если хочешь оптимизаций, попробуй это без канвы. если тебе нужно генерить снежинку — ок, генери на канвасе и гони в data-uri, сами снежинки пусть будут дивчиками. если тебе нужен фон с мелкими, делай его одной большой подложкой и тяни ее.

про свж ты зря, кстати

Народ, спасибо, что пишете как правильно код оформить, но это не решает проблему. ведь за отрисовку в канвасе здесь отвечает один цикл, строки 43-61, 44-45 считаются параметры, причем они беруться из массива и туда же сохраняются, одна проверка на позицию и отрисовка в строках 56-59, все, тормозит здесь, это можно оптимизировать так, чтобы работало без тормозов?

ты про эту часть кода? //... var img = new Image(); img.src = self.images; img.onload = function(){ self.onLoadImg(self); };

не будет. в контексте вызова this - это созданный объект img.

У тебя код слишком запутанный чтоб понять как оно всё работает не вникая.

this.snowflakes.push([image, x, y, dir, deg, width, height, multy]);
// ...
self.snowflakes[i][2] = self.snowflakes[i][2] + self.snowflakes[i][7];
self.snowflakes[i][4] = self.snowflakes[i][4] + (Math.PI/180)*(self.snowflakes[i][7]/2);

Это адъ. Должно быть как-нибудь так:

var snowflake = this.snowflakes[i];

snowflake.y += snowflake.multiplier;
snowflake.rotation += Math.PI/180 /2 * snowflake.multiplier;

if(snowflake.y > this.height)
    snowflake.y = 0;
// ...

Как-то оно явно неправильно работает.

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

Аноним, чего тебе не нравится? То, что через жопу ТС свою задачу решил?

ТС, а если взять квадратики разных размеров, на которые натянута одна и та же текстура снежинки, да забульбенить это в webGL?

ну вот началося, человек не может нормально жесяток снежинок вывести, так на ему webgl

Зато тормозов точно не будет

То, что через жопу ТС свою задачу решил?

То что ВСЕ через это место делается,вообще все.

До ТС-а мне дела нет,просто задолбало,в силу того что ежедневно решаю миллион идиотских проблем которых вообще быть не может,и работаю с такими невероятно кривыми проектами,что просто паражаюсь-ка,КАК такой идиотизм может быть в ТОП-е сайтов/программ/ОС...что за идиот это делал.

В частности веб-вебом больше не занимаюсь.Веб-это ТЕКСТ,никакого джаваскрипта,никаких картинок,никаких стилей,вебгл-за одно упоминание бить по рукам.

Не такая и плохая идея, параллакс даже не нужен, будет честное тредэ, с перспективой тоже проблема нивелируется. Да и тормозить будет точно не больше дома. Ещё и код получится красивее, тем более если взять что-нибудь вроде Three.js, она очень даже простая в использовании.

Только кстати могут быть проблемы с прозрачностью пнг, но ничего критичного.

А это уже смотря что за задача. Ясен пень, статика — гольный html. Там ничего не нужно. А вот ежели тебе приличное 3D нужно (правда, на кой хрен ТСу эти снежинки — не представляю), то можно и webGL использовать. А во всяких веб-мордах для управления железяками - вебсокеты и т.п.

Вот только написал а тут уже приплели...

У ТС-а тормозят сраные СНЕЖИНКИ,которые тормозить вообще не могут,картинки по экрану перемещаются,это работало на 5Мгц денди.Тьфу на этот вебгл,что за идиот придумал опенгл вызывать из джаваскрипта,отвратно.

Three.js

Во, я вообще демку нашёл как раз того что ТС велосипедит: http://mrdoob.github.com/three.js/examples/webgl_particles_sprites.html

Красиво. anonymous, вот посмотри, для чего openGL в браузере нужен!

А во всяких веб-мордах для управления железяками - вебсокеты и т.п.

О ужас.Вебсокеты НЕНУЖНЫ,НЕНУЖНЫ!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

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

Вебсокеты-кривая никому не нужная херня,которая дает ненужную нагрузку на трафик и оборудование сервера и клиента-нахрена такое нужно?Для спец софта-НЕ ИСПОЛЬЗУЮТ БРАУЗЕРЫ,используют UDP и логику клиента сервера,БЕЗ БРАУЗЕРОВ,нахренаж вы все пихаете в браузер.

Вебгл-мощностей граф ускорителей и так с трудом хватает чтоб рендерить пару картинок на экране,но тут приходят гении-давайте всунем возможность рендерить графику из браузера,на джаваскрипте.Мощностей компов юзеров и так струдом хватает,так теперь нужен браузер который в 10 раз как минимум тормозит работу логики и отрисовки,что за идиоты это придумали?Да ухудшение качества 3д графики УЖЕ произошло,именно благодаря вебгл-нужно делать модели уровня 2000-х,ЧТОБ НЕ ТОРМОЗИЛО на топовых компах.

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

Это я промолчал о МИЛЛИОНЕ БАГОВ-мало того что вебсокеты ОТКЛЮЧЕНЫ ВО ВСЕХ БРАУЗЕРАХ,так баги вебгл-приводящие к случайной работе кода-где работает где нет...

Вебсокеты НЕНУЖНЫ

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

Для спец софта-НЕ ИСПОЛЬЗУЮТ БРАУЗЕРЫ,используют UDP и логику клиента сервера,БЕЗ БРАУЗЕРОВ,нахренаж вы все пихаете в браузер.

И писать GUI? Да еще и кроссплатформенно? Спасибо, говна не надо. Веб-морда — наилучшее кроссплатформенное решение для управления какой-нибудь хренью.

Вебгл-мощностей граф ускорителей и так с трудом хватает чтоб рендерить пару картинок на экране

Отлично все работает. Вот я все думаю псевдо-3D на SVG переделать в нормальное 3D на вебGL (веб-морда для визуализации показаний температурных датчиков).

Мои аргументы обоснованны

Да, обоснованны для случая нецелевого использования ресурсов.

вот посмотри, для чего openGL в браузере нужен!

И ЗАЧЕМЖЕ???????????????Для БЕСПОЛЕЗНОЙ АНИМАЦИИ?вы идиоты?Существует ФЛЕШ,который РАБОТАЕТ ВЕЗДЕ ОДИНАКОВО,а не как кривому браузеру вздумается.

По ссылке,опера-не работает,файрфокс-не работает,хром-работает и вешает хром,иксплорер-неработает,хромиум-неработает.

Т..е чтоб ты понял окончательно что такое вебгл и вообще джаваскрипт-это то что работает только на твоем браузере только на твоей ОС,для остальных ОС и браузеров тебе надо -ТЕСТИРОВАТЬ НА НИХ ВСЕХ,это ТЫСЯЧИ часов работы,и завтра выходит новая версия браузера где все опять сломали(сотни браузеров).

Т.е. вместо нормального посещения интернет страниц,ты предлагаешь сделать вместо этого-квест,заходя на сайт юзер получает падения браузера(вебгл),или завистание,а если провисит час на сайте-НАФИК ВСЯ СИТЕМА ПОВИСТНЕТ(видеопамять закончится),или черный экран(рендер вегл неработает),или система начинает дико тормозить(привет интелам и радеонам),крутой квест такой да?

Вебгл ведет к НЕУДОБСТВУ,если на лоре сделать вебгл все аватарки,все стили и весь текст на вебгл-у 99% юзеров постоянно будет падать браузер.И это не ПОКА браузеры кривые,это ИДИОТСКОЕ РЕШЕНИЕ по совмещению просмотрщика бес сайтов в которых только ТЕКСТ и нужен,остальное делается ПЛАГИНАМИ(флеш тотже и кучи других,которые и для 3д есть)

Не корми тролля.

Существует ФЛЕШ

Все, разговор окончен.

ой,какой ранимый.

Однако факт в том-на флеше(или javafx или силверлайт) снижинки теже что у ТСа-НЕТОРМОЗИЛИБ,а в браузере-жрут 50% ЦП и ТОРМОЗЯТ.

Таки дела.

Не корми тролля.

Ага.
В 17 веке-НА КОСТЕР ЕРЕТИКА!!!!!!ЕРЕТИК!!!!!!!!!-орет толпа
В 18-РЕВОЛЮЦИОНЕР/АНТИНАУЧНО!!!Расстрел/тюрьма!!!!
В 19-КОММУНИСТ/не КОММУНИСТ!!!!!!!!РАССТРЕЛ!!!!!
В 21-ТРОЛЬ!!!!!!!!-орет таже толпа тупых идиотов.Стадо во все времена...

Возрадуйся же, да не забудь свечку поставить своим святым Билли и Стиви.

А ведь он прав, да.

Насчет быдлофлеша?

Флеш на десктопе пока нужен - ни webgl, ни html5 video/audio пока не допилены настолько, чтоб их пускать в продакшн.

Не нужен. В хромом уже все допилено. В огнелисе вот-вот звук допилят.

В хромом уже все допилено.

Вот только не надо про хромого, я сам им пользуюсь и знаю, насколько допилено.

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

Но гугол утверждает, что и работа с веб-камерой, и работа со звуком полностью допилены.

Вчера пробовал - скайп таки все еще лучше)
Подтормаживало, падало. Хотя это последний билд канарейки, а не стабильный хром.