Всетаки не оставили меня мысли об этой сраной матрице. Выкрал еще чуток времени и сделал набросок под один innerHtml.
Все намного проще вышло чем мне показалось с первого раза.
>Stage теперь не нужен так как нет больше столбиков анимируемых отдельно
>Формирование строки для innerHTML и скроллинг массива происходит одновременно, за один и тот же перебор.
Теперь с Fragment надо еще по попробывать, дабы скролить сложные HTML элементы
<body style="height:100%;background:black;">
<div id="matrix" style="width:100%;height:100%; font-family:Courier New;color:green;"></div>
</body>
<script>
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max-min) ) + min;
}
//Класс управлюящий поведением колонок
function Column(minSize){
//сбрасывает столбик
this.reset=function(){
this.frameCount=1; //счетчик пропущенных кадров
this.speed=getRandomInt(1,5); //количество пропущенных кадров на один сработавший
this.length=getRandomInt(minSize,minSize+15); //длинна падающего столбца
}
//уменьшает счетчик на единицу
this.ReduceThecounter=function(){
if ( (this.frameCount--) <0) { //уменьшаем счетчик кадров, если длинна<0 то выполним фрагмент кода
this.frameCount=this.speed;
if ( ( this.length--) <0) this.reset(); //уменьшаем длинну столбца, если длинна<0 то сбрасываем столбец
}
}
this.reset();
}
//Матрица
function Matrix(elem,sizeX,sizeY){
var columns=[],
elem= typeof elem=="string"?document.getElementById(elem):elem,
matrix=[];
//Инициализация колонок и первоначальное заполнение матрицы
for (var x=0;x<sizeX;x++){
columns.push(new Column(sizeY+1) );
matrix.push([]);
for (var y=0;y<sizeY;y++) {
matrix[x][y]={sym:" "};
}
}
//метод обновления
this.update=function(){
var y=sizeY,
x=0,
result="";
while(y--){
x=sizeX;
while(x--){
if (y==0) columns[x].ReduceThecounter();
if(columns[x].frameCount==0){
if (y==0){
matrix[x][0].sym= (columns[x].length>sizeY)?String.fromCharCode( getRandomInt(97,122) ):" ";
} else {
matrix[x][y].sym=matrix[x][y-1].sym;
}
}
result=matrix[x][y].sym+result;
}
result="<br/>"+result;
}
elem.innerHTML=result;
}
}
var m=new Matrix('matrix',82,17);
+function f(){
m.update();
setTimeout(f,1)//setTimeut для демки производительности оставил
}();
</script>