Форум

рони · #11 (**permalink**) 29.09.2013, 21:32

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

как добавить кнопку "посмотреть"

run в тег

[HTML  run]

DjDiablo · #12 (**permalink**) 29.09.2013, 22:09

Не стоит копировать с ответов часть ответственную за взаимодействие с DOM. 2е решение хоть и красивое но FullScreen по производительности не потянет 100X30 это 3000 операций с дум на кадр. А это очень много. При таких масштабах нужно обращаться к дум как можно меньше,а это означает что придется юзать либо innerHTML/innerText, либо Fragment. 2й пример пожалуй неудачный, а нападка на innerHtml в первом комменте чересчур предвзята.

1Й основан на innerText и он на фуллскрине выдает 30 кадров. Только slice для строки пришлось добавить.

DjDiablo · #13 (**permalink**) 30.09.2013, 04:40

Всетаки не оставили меня мысли об этой сраной матрице. Выкрал еще чуток времени и сделал набросок под один 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:"&nbsp"};
        }		
      }

     //метод обновления
     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) ):"&nbsp";
	          } 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>

danik.js · #14 (**permalink**) 30.09.2013, 05:29

Дык а нафига вообще тут DOM использовать? Есть же уже куча готовых реализаций на canvas
http://tenthpla.net/matrix/
http://warwolf.org/404

DjDiablo · #15 (**permalink**) 30.09.2013, 05:47

Сообщение от danik.js

Дык а нафига вообще тут DOM использовать? Есть же уже куча готовых реализаций на canvas
http://tenthpla.net/matrix/
http://warwolf.org/404

А это не мои проблемы

Мне таки именно dom помучить хотелось

А автору темы надо при помощи МАТРИЦЫ признаться в любви на НЕМЕЦКОМ ЯЗЫКЕ !!!
Воистину любовь толкает на безрассудные поступки

Deff · #16 (**permalink**) 30.09.2013, 05:57

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

DjDiablo · #17 (**permalink**) 30.09.2013, 14:15

DEFF
Они не синхронно падают, у примера выше просто разброс в скорости небольшой от 1 до 5, и длительность колонок большая была и это все очень быстро в придачу.

Можно поиграться с кастомизацией здесь http://learn.javascript.ru/play/0a6oXb

Поиграться со скоростью (speed это количество пропущенных кадров на один сработавший)
к примеру this.speed=getRandomInt(0,4)*3;
0 минимальная
4 максимальная
3 это множитель делающий разброс в скорости более выраженным

поиграться с длинной колонок
к примеру this.length=getRandomInt(minSize,minSize+15)
minSize означает что длинна минимум равна высоте экрана
minSize+15 означает что можно генерировать столбик до 15 символов
Подмечу что minSize для столбика это количество пробелов разделяющих столбики, и естественно оно равно высоте экрана (иначе столбец исчезнет раньше чем скроется внизу за экраном).

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

Красота лично мне мало интересна

Заранее подготовленные столбики двигать не пробывал, их штук 130 будет.

DjDiablo · #18 (**permalink**) 03.10.2013, 00:20

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

Производительность ебстебственно одинаковая.

var getRandomInt=(min:number, max:number)=> Math.floor(Math.random() * (max - min)) + min;

//Класс управляющий поведением колонок
class Column {
    frameCount:number;//счетчик пропущенных кадров (тип число)
    length:number;    //Длина анимации (тип число)
    speed:number;     //это значение устанавливается frameCount, если он ниже нуля (тип число)

    //конструктор. Прикольно что minSize сразу в this попадает :)
    constructor(private minSize:number) {
        this.reset();
    }
    
    //сбрасывает столбик
    public reset() {
        this.frameCount = 1;
        this.speed = getRandomInt(1, 5);
        this.length = getRandomInt(this.minSize, this.minSize + 15);
    }

    //уменьшает счетчик на единицу
    public ReduceThecounter() {
        if ( ( this.frameCount-- ) < 0) {
            this.frameCount = this.speed;
            if ( (this.length--) < 0) this.reset();
        }
    }
}

//Матрица
class Matrix {
    private columns=[];
    private matrix=[];

    constructor(private elem, private sizeX:number, private sizeY:number){
        this.elem=typeof elem == "string" ? document.getElementById(elem) : elem;//не стал мудрить, оставил в стиле JS
        for (var x = 0; x < sizeX; x++) {
            this.columns.push(new Column(sizeY + 1));
            this.matrix.push([]);
            for (var y = 0; y < sizeY; y++) {
                this.matrix[x][y] = { sym: "&nbsp" };
            }
        }
    }

    //метод обновления
     public update () {
        var y = this.sizeY,
            x = 0,
            result = "";

        while (y--) {
            x = this.sizeX;
            while (x--) {
                if (y == 0) this.columns[x].ReduceThecounter();
                if (this.columns[x].frameCount == 0) {
                    if (y == 0) {
                        this.matrix[x][0].sym = (this.columns[x].length > this.sizeY) ? String.fromCharCode(getRandomInt(97, 122)) : "&nbsp";
                    } else {
                        this.matrix[x][y].sym = this.matrix[x][y - 1].sym;
                    }
                }
                result = this.matrix[x][y].sym + result;
            }
            result = "<br/>" + result;
        }
        this.elem.innerHTML = result;
    }
}
var m = new Matrix('matrix', 82, 17);

+(function f() {
    m.update();
    setTimeout(f, 1);
})();
//# sourceMappingURL=app.js.map

Форум

Справочник

Discord чат

Курсы javascript