Форум

godofjavascript · #21 (**permalink**) 04.01.2013, 22:45

а я думал это на нем сделано, это просто 2д контекст?

nerv_ · #22 (**permalink**) 04.01.2013, 22:59

Дзен-трансгуманист, 3-и страницы треда в очередной раз говорят о том, что инициатива наказуема

Вроде ничего никому не обещаешь, а они все требуют и требуют )

Дзен-трансгуманист · #23 (**permalink**) 04.01.2013, 23:52

Сообщение от godofjavascript

это просто 2д контекст?

Ну да.

Сообщение от nerv_

а они все требуют и требуют

me.on( 'request', function ( request, response ) {
  response.write( 'ПНХ' );
  response.close();
});

Таков им будет мой ответ.)))

DjDiablo · #24 (**permalink**) 05.01.2013, 00:14

Цитата:

Таков будет мой ответ.)))

ну если говорить о производительности то часть нагрузки должно давать масштабирование на particle.spawnZ

sprite.draw( ctx, particle.spawnX, y, 0, 1/ particle.spawnZ, 1/ particle.spawnZ );

(маштабирование горизонталь + вертикаль )*каждую снежинку * каждый кадр = замедление.

без масштабирования у меня прирост производительности вдвое, нагрузка упала c 25% до 12-10%

Попробуйте замерить производительность (без масштабирования) у себя сами.

<head>
<style>
img, canvas { position: absolute; left: 0px; top: 0px; margin: 0px; padding: 0px; border: none; }
</style>
<script>

function byId ( id ) {
  return document.getElementById( id );
}

function rand ( min, max ) {
  return Math.random() * ( max - min ) + min;
}

function now () {
  return ( +new Date() ) / 1000;
}

function Sprite ( image, sx, sy, sw, sh, originX, originY ) {

  this.image = image;
  this.sx = sx;
  this.sy = sy;
  this.sw = sw;
  this.sh = sh;
  this.originX = originX ? originX : 0;
  this.originY = originY ? originY : 0;
}

Sprite.prototype.draw = function ( context, x, y, angle, scaleX, scaleY ) {

  //context.save();
  //context.translate( x, y );
  //context.rotate( angle );
  //context.scale( scaleX, scaleY );
  /*context.drawImage(
    this.image,
    this.sx, this.sy,
    this.sw, this.sh,
    -this.originX,
    -this.originY,
    this.sw, this.sh
  );*/

  context.drawImage(this.image, x,y);
  //context.restore();
}

function Flakes ( canvas, flake, zmin, zmax, count, speed, loopTime ) {

  var viewW = canvas.width;
  var viewH = canvas.height;

  zmax = Math.min( zmax, ( loopTime * speed - flake.height ) / viewH );
  zmin = Math.min( zmin, zmax );

  var particles = [];
  var flakeHalfW = flake.width * 0.5;
  var flakeHalfH = flake.height * 0.5;

  for ( var i = 0; i < count; i++ ) {

    var spawnZ = rand( zmin, zmax );

    particles.push({
      spawnX    : rand( -flakeHalfW / spawnZ, viewW + flakeHalfW / spawnZ ),
      spawnZ    : spawnZ,
      spawnTime : rand( 0, loopTime ),
      speed     : speed / spawnZ,
      halfH     : flakeHalfH / spawnZ
    });
  }

  particles.sort( function ( a, b ) {
    return b.spawnZ - a.spawnZ;
  });

  this.particles = particles;
  this.viewW     = viewW;
  this.viewH     = viewH;
  this.loopTime  = loopTime;
  this.ctx       = canvas.getContext( '2d' );
  this.sprite    = new Sprite(
    flake,
    0, 0,
    flake.width, flake.height,
    flake.width * 0.5, flake.height * 0.5
  );
}





Flakes.prototype.draw = function ( time ) {


  var ctx       = this.ctx;
  var sprite    = this.sprite;
  var particles = this.particles;
  var viewH     = this.viewH;
  var loopTime  = this.loopTime;

  //временный контекст
  //var pCanvas = document.createElement('canvas');
  //var pCtx = pCanvas.getContext('2d');
  //pCanvas.width = 480;
  //pCanvas.height = 384;  

  for ( var i = 0; i < particles.length; i++ ) {

    var particle = particles[ i ];
    var y = -particle.halfH + ( ( time + particle.spawnTime ) % loopTime ) * particle.speed;

    if ( y < viewH + particle.halfH ) {
      //sprite.draw( pCtx, particle.spawnX, y, 0, 1, 1 );
      sprite.draw( ctx, particle.spawnX, y, 0, 1, 1 );
    }
  }
  //ctx.drawImage(pCanvas, 0,0);
}

window.onload = function () {

  var imgBg    = byId( 'image-bg' );
  var imgFlake = byId( 'image-flake' );
  var canvas   = byId( 'canvas' );

  document.body.removeChild( imgFlake );

  canvas.width = imgBg.width;
  canvas.height = imgBg.height;

  var ctx = canvas.getContext( '2d' );
  var flakes = new Flakes( canvas, imgFlake, 2, 25, 1500, 400, 30 );

  function render () {

    ctx.clearRect( 0, 0, canvas.width, canvas.height );
    flakes.draw( now() - timeOffset );
  }

  var animate = true;
  var timeStop;
  var timeOffset = 0;
  var intervalId = window.setInterval( render, 40 );

  canvas.onclick = function () {

    if ( animate = !animate ) {
      timeOffset += now() - timeStop;
      intervalId = window.setInterval( render, 40 );
    }
    else {
      timeStop = now();
      window.clearInterval( intervalId );
    }
  }
}

</script>
</head>
<body>
<img id="image-flake" src="http://dl.dropbox.com/u/19390559/share/snowflake.png">
<img id="image-bg" src="http://dl.dropbox.com/u/19390559/share/christmas-tree.png">
<canvas id="canvas"></canvas>
</body>

В качестве решения
можно спрайты готовить заранее а не ресайзить в процессе рендеринга.

это конечно всё теории а пробывать лень. Мне кажется что большие снежинки отьедают выигрыш обратно, так как маленькие снежинки прорисовать быстрее, предварительно подготовленные спрайты могут дать представление истинном приросте)

UPD - из решения выпилено ещё часть манипуляций с канвасом

Gozar · #25 (**permalink**) 05.01.2013, 00:59

Сейчас перечитал название темы и вспомнил "Брат 2". Там был один сутенер, "ганста-нига" (3:15 сек) на его сленге русские были "снежок". В свете этого, падающий снежок воспринимается по другому.

Дзен-трансгуманист · #26 (**permalink**) 05.01.2013, 01:18

DjDiablo,
particle.spawnX и y тоже с плавающей запятой, попробуй Math.round их - будет еще быстрее.
А подресайзить заранее конечно можно, но это на каждый спрайт отдельный слой придется готовить, потому что масштаб тут у всех разный. То есть, в данном случае это будет 1500 картинок размером вплоть до 20x20.

Еще я, наверно, неправильно поступил, что подготовил все частицы заранее и зациклил их по модулю от времени. Логичнее было бы генерировать их на лету, но это мой первый опыт создания систем частиц, так что бить ногами не надо.)

Сообщение от DjDiablo

нагрузка упала c 25% до 12-10%

Хм, а у меня без изменений.

DjDiablo · #27 (**permalink**) 05.01.2013, 02:01

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

прирост есть но слишком мальнький (в хроме), интересно как в других браузерах.

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

upd.
Выпилил ещё лишние манипуляции с контекстом, кому нелень потестите пример сверху, я его обновил.
сейчас у меня 9-10% стабильно VS 13-15% у оригинала

Tim · #28 (**permalink**) 05.01.2013, 03:01

Дзен-трансгуманист,
Крутая штука. Тоже была идея такое сделать, но до НГ не успел. Потом так и забыл.
Спасибо, порадовал. Я даже гозару плюсик поставил чтобы тебя плюсануть.

Кст, о ограничениях. Я немо опять наверно могу минус поставить. Ща проверим

Deff · #29 (**permalink**) 05.01.2013, 03:05

Сообщение от DjDiablo

Выпилил ещё лишние манипуляции с контекстом, кому нелень потестите пример сверху, я его обновил.

У мну под Оперой у TS первом примере -13 процентов - твое - 52% от полной загрузки проца
Опера 12.12 XP двух ядерка 3Гига частота проца

Gozar · #30 (**permalink**) 05.01.2013, 03:06

DjDiablo,
У [html height=600 ] задай.

Форум

Справочник

Discord чат

Курсы javascript