Холст становится черным от нижнего левого до верхнего правого

Question

На этой странице https://spiritshare.org/circles.html, Я использую несколько простой код для рендеринга некоторых кругов, движущихся по гравитационной сетке.Сетка впечатляется цветом кругов, когда они движутся вдоль нее, и веса затем рисуются на экране.Но что-то пожирает всю вселенную и сворачивает его в верхний левый угол, как обратный большой взрыв!

Я думаю, что это может быть сборщик мусора или, возможно, математическая ошибка где-то в моем коде?(Вся математика прямо на первой странице, внизу).Вот соответствующая часть, где цвета смешиваются вместе с кружком.

p = (y * fullW + x) * 3;
d = Math.sqrt(xd + yd);// * 0.5; //Math.sqrt( xd + yd );
// console.log(p);
//console.log( c.r, c.g, c.b );

if( cfg.safe_colors == true ) {
    if( typeof cfg.max_color == 'undefined' ) cfg.max_color = 255;
    gravity[p + 0] = (gravity[p + 0] * cfg.color_fade + cfg.color_speed * d * c.r) & cfg.max_color;
    gravity[p + 1] = (gravity[p + 1] * cfg.color_fade + cfg.color_speed * d * c.g) & cfg.max_color;
    gravity[p + 2] = (gravity[p + 2] * cfg.color_fade + cfg.color_speed * d * c.b) & cfg.max_color;
} else if( typeof cfg.max_color != 'undefined' ) {
    gravity[p + 0] = (gravity[p + 0] * cfg.color_fade + cfg.color_speed * d * c.r);
    gravity[p + 1] = (gravity[p + 1] * cfg.color_fade + cfg.color_speed * d * c.g);
    gravity[p + 2] = (gravity[p + 2] * cfg.color_fade + cfg.color_speed * d * c.b);
    if( gravity[p] > cfg.max_color ) gravity[p] = cfg.max_color;
    if( gravity[p+1] > cfg.max_color ) gravity[p+1] = cfg.max_color;
    if( gravity[p+2] > cfg.max_color ) gravity[p+2] = cfg.max_color;
} else {
    gravity[p + 0] = (gravity[p + 0] * cfg.color_fade + cfg.color_speed * d * c.r);
    gravity[p + 1] = (gravity[p + 1] * cfg.color_fade + cfg.color_speed * d * c.g);
    gravity[p + 2] = (gravity[p + 2] * cfg.color_fade + cfg.color_speed * d * c.b);
}

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

Это не должно делать это ... Я обновил его, и он делает это реже с более жестким управлением процессором,но все еще дает сбой, когда цвета становятся слишком плотными, а размытие (удерживайте заглавную букву B для увеличения размытия, предупреждая, что он жует процессор) становится слишком высоким.

Answer 1

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

Я думаю, что наиболее вероятно canvasrendercontext.putImageData - это многопоточная операция, для которой не хватает времени для завершения копирования исходного изображения, когда при основной обработке сценария используется слишком много ЦП.

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

var gravTimeout;
function animate() {
    if( !cfg.setup ) return;
    var tn = new Date();
    gravitate();
    var tx = new Date();
    var td = tx - tn;
    var chg=false;
    if( gravTimeout < td ) { // using too much cpu.
        gravTimeout *= 1.5;
        chg=true;
    } else if( gravTimeout > td*2/3 ) { // going too slowly.
        gravTimeout /= 1.5;
        chg=true;
    }
    if(chg){
        clearInterval(gravTimer);
        gravTimer = setInterval( "animate()", gravTimeout );
        if( gravTimeout > 600 )
            console.log("gt="+gravTimeout);
    }
    //console.log(td, tn.getSeconds(), tx.getSeconds());
}