Невозможно использовать `Symbol` для` Group` с бумагой. js - PullRequest
Новая
       26

Невозможно использовать `Symbol` для` Group` с бумагой. js

3 голосов
/ 06 января 2020

Я хочу сделать анимацию реакционно-диффузионной системы с paper.js.

Вот код, который генерирует только одно изображение: 

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.2/paper-full.min.js"></script>
    <style>
      canvas {
        width: 400px;
        height: 400px;
        border: black 3px solid;
      }
    </style>
  </head>
  <body>
    <script>
      function subm_index(M, x){
        if (x<0)
          return x+M;
        if(x >= M)
          return x-M;
        return x;
      }
      function update_concentrations(X, L, DA, DB, f, k){ 
        var sum_a, sum_b, x1, y1, t;
        var m = X.A.length;
        var n = X.A[0].length;
        var A = new Array(m);
        var B = new Array(m);
        for(var i = 0; i < m; i++){
          A[i] = new Array(n);
          B[i] = new Array(n);
        }        
        for(var x = 0; x < m; x++) {
          for(var y = 0; y < n; y++){
            sum_a = 0.0;
            sum_b = 0.0;
            for(var i = -1; i <= 1; i++){
              for(var j = -1; j <= 1; j++){
                x1 = subm_index(m, x - i);
                y1 = subm_index(n, y - j);
                sum_a = sum_a + L[i+1][j+1] * X.A[x1][y1];
                sum_b = sum_b + L[i+1][j+1] * X.B[x1][y1];
              }
            }
            t = X.A[x][y]*X.B[x][y]*X.B[x][y];
            A[x][y] = X.A[x][y] + DA*sum_a - t + f*(1-X.A[x][y]);
            B[x][y] = X.B[x][y] + DB*sum_b + t - (k+f)*X.B[x][y];
          }
        }
        return {A: A, B: B};
      }
      function iterate_Gray_Scott(X, L, DA, DB, f, k, n){
        for(var i = 0; i < n; i++){
          X = update_concentrations(X, L, DA, DB, f, k); 
        }
        return X;
      }
      var L = [[0.05, 0.2, 0.05], [0.2, -1, 0.2], [0.05, 0.2, 0.05]];
      var DA = 1;
      var DB = 0.5;
      var f = 0.0545;
      var k = 0.062;
    </script>

    <script type="text/paperscript" canvas="quad">
      var pixels = 200;
      var gridSize = 2;
      var rectSize = 2;

      var A = new Array(pixels);
      var B = new Array(pixels);
      for(var i = 0; i < pixels; i++){
        A[i] = new Array(pixels);
        B[i] = new Array(pixels);
        for(var j = 0; j < pixels; j++){
          A[i][j] = 1;
          B[i][j] = Math.random() < 0.98 ? 0 : 1;
        }
      }
      var X = {A: A, B: B};

      X = iterate_Gray_Scott(X, L, DA, DB, f, k, 1000);
      
      for(var y = 0; y < pixels; y++){
        for(var x = 0; x < pixels; x++){
          var color = {
		        hue: X.B[x][y] * 360,
		        saturation: 1,
		        brightness: 1
	        };
          var path = new Path.Rectangle(new Point(x, y) * gridSize, new Size(rectSize, rectSize));
          path.fillColor = color;
        }
      }
      project.activeLayer.position = view.center;
    </script>
    <canvas id="quad" resize></canvas>
  </body>
</html>

Теперь вот код, который генерирует анимацию: 

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.2/paper-full.min.js"></script>
    <style>
      canvas {
        width: 400px;
        height: 400px;
        border: black 3px solid;
      }
    </style>
  </head>
  <body>
    <script>
      function subm_index(M, x){
        if (x<0)
          return x+M;
        if(x >= M)
          return x-M;
        return x;
      }
      function update_concentrations(X, L, DA, DB, f, k){ 
        var sum_a, sum_b, x1, y1, t;
        var m = X.A.length;
        var n = X.A[0].length;
        var A = new Array(m);
        var B = new Array(m);
        for(var i = 0; i < m; i++){
          A[i] = new Array(n);
          B[i] = new Array(n);
        }        
        for(var x = 0; x < m; x++) {
          for(var y = 0; y < n; y++){
            sum_a = 0.0;
            sum_b = 0.0;
            for(var i = -1; i <= 1; i++){
              for(var j = -1; j <= 1; j++){
                x1 = subm_index(m, x - i);
                y1 = subm_index(n, y - j);
                sum_a = sum_a + L[i+1][j+1] * X.A[x1][y1];
                sum_b = sum_b + L[i+1][j+1] * X.B[x1][y1];
              }
            }
            t = X.A[x][y]*X.B[x][y]*X.B[x][y];
            A[x][y] = X.A[x][y] + DA*sum_a - t + f*(1-X.A[x][y]);
            B[x][y] = X.B[x][y] + DB*sum_b + t - (k+f)*X.B[x][y];
          }
        }
        return {A: A, B: B};
      }
      function iterate_Gray_Scott(X, L, DA, DB, f, k, n){
        for(var i = 0; i < n; i++){
          X = update_concentrations(X, L, DA, DB, f, k); 
        }
        return X;
      }
      var L = [[0.05, 0.2, 0.05], [0.2, -1, 0.2], [0.05, 0.2, 0.05]];
      var DA = 1;
      var DB = 0.5;
      var f = 0.0545;
      var k = 0.062;
    </script>

    <script type="text/paperscript" canvas="quad">
      var pixels = 200;
      var gridSize = 2;
      var rectSize = 2;
      var A = new Array(pixels);
      var B = new Array(pixels);
      var Paths = new Array(pixels);
      for(var i = 0; i < pixels; i++){
        A[i] = new Array(pixels);
        B[i] = new Array(pixels);
        Paths[i] = new Array(pixels);
        for(var j = 0; j < pixels; j++){
          A[i][j] = 1;
          B[i][j] = Math.random() < 0.99 ? 0 : 1;
        }
      }
      var X = {A: A, B: B};

      for(var y = 0; y < pixels; y++){
        for(var x = 0; x < pixels; x++){
          var color = {
		        hue: X.B[x][y] * 360,
		        saturation: 1,
		        brightness: 1
	        };
          Paths[x][y] = new Path.Rectangle(new Point(x, y) * gridSize, new Size(rectSize, rectSize));
          Paths[x][y].fillColor = color;
        }
      }

      var nframes = 100;

      var XX = new Array(nframes);
      XX[0] = X;
      for(var frm = 1; frm < nframes; frm++){
        XX[frm] = iterate_Gray_Scott(XX[frm-1], L, DA, DB, f, k, frm);
      }

      project.activeLayer.position = view.center;

      function onFrame(event){
        console.log(event.count);
        if(event.count < nframes){
          for(var y = 0; y < pixels; y++){
            for(var x = 0; x < pixels; x++){
              var color = {
                hue: XX[event.count].B[x][y] * 360,
                saturation: 1,
                brightness: 1
              };
              Paths[x][y].fillColor = color;
            }
          }
        }
      }
    </script>

    <canvas id="quad" resize></canvas>
  </body>
</html>

Работает, но анимация недостаточно плавная. Это связано с двойным l oop в onFrame, который занимает некоторое время.

Поэтому я сначала попытался создать массив, содержащий nframes Group элементов, каждая группа которых содержит pixels*pixels Rectangle элементов. Но это породило нехватку памяти.

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

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.2/paper-full.min.js"></script>
    <style>
      canvas {
        width: 400px;
        height: 400px;
        border: black 3px solid;
      }
    </style>
  </head>
  <body>
    <script>
      function subm_index(M, x){
        if (x<0)
          return x+M;
        if(x >= M)
          return x-M;
        return x;
      }
      function update_concentrations(X, L, DA, DB, f, k){ 
        var sum_a, sum_b, x1, y1, t;
        var m = X.A.length;
        var n = X.A[0].length;
        var A = new Array(m);
        var B = new Array(m);
        for(var i = 0; i < m; i++){
          A[i] = new Array(n);
          B[i] = new Array(n);
        }        
        for(var x = 0; x < m; x++) {
          for(var y = 0; y < n; y++){
            sum_a = 0.0;
            sum_b = 0.0;
            for(var i = -1; i <= 1; i++){
              for(var j = -1; j <= 1; j++){
                x1 = subm_index(m, x - i);
                y1 = subm_index(n, y - j);
                sum_a = sum_a + L[i+1][j+1] * X.A[x1][y1];
                sum_b = sum_b + L[i+1][j+1] * X.B[x1][y1];
              }
            }
            t = X.A[x][y]*X.B[x][y]*X.B[x][y];
            A[x][y] = X.A[x][y] + DA*sum_a - t + f*(1-X.A[x][y]);
            B[x][y] = X.B[x][y] + DB*sum_b + t - (k+f)*X.B[x][y];
          }
        }
        return {A: A, B: B};
      }
      function iterate_Gray_Scott(X, L, DA, DB, f, k, n){
        for(var i = 0; i < n; i++){
          X = update_concentrations(X, L, DA, DB, f, k); 
        }
        return X;
      }
      var L = [[0.05, 0.2, 0.05], [0.2, -1, 0.2], [0.05, 0.2, 0.05]];
      var DA = 1;
      var DB = 0.5;
      var f = 0.0545;
      var k = 0.062;
    </script>

    <script type="text/paperscript" canvas="quad">
      var pixels = 50;
      var gridSize = 2;
      var rectSize = 2;
      var A = new Array(pixels);
      var B = new Array(pixels);
      var Paths = new Array(pixels);
      for(var i = 0; i < pixels; i++){
        A[i] = new Array(pixels);
        B[i] = new Array(pixels);
        Paths[i] = new Array(pixels);
        for(var j = 0; j < pixels; j++){
          A[i][j] = 1;
          B[i][j] = Math.random() < 0.99 ? 0 : 1;
        }
      }
      var X = {A: A, B: B};

      var nframes = 50;

      var XX = new Array(nframes);
      XX[0] = X;
      for(var frm = 1; frm < nframes; frm++){
        XX[frm] = iterate_Gray_Scott(XX[frm-1], L, DA, DB, f, k, frm);
      }
      
      var Rects = [];
      for(var x = 0; x < pixels; x++){
        for(var y = 0; y < pixels; y++){
          var rect = new Path.Rectangle(new Point(x, y) * gridSize, new Size(rectSize, rectSize));
          var color = {
            hue: 1,
            saturation: 1,
            brightness: 1
          };
          rect.fillColor = color;
          rect.visible = false;
          Rects.push(rect);
        }
      }

      group = new Group(Rects);

      symbolGroup = new Symbol(group);

      var Groups = new Array(nframes);
      for(var frm = 0; frm < nframes; frm++){
        Groups[frm] = symbolGroup.place(view.center);
        var k = 0;
        for(var x = 0; x < pixels; x++){
          for(var y = 0; y < pixels; y++){
            Groups[frm].definition.definition.children[k].fillColor = {
              hue: XX[frm].B[x][y] * 360,
              saturation: 1,
              brightness: 1
            };
            k = k+1;
          }
        } 
        XX[frm] = null; // to free some memory
      } 

      project.activeLayer.position = view.center;

      function onFrame(event){
        if(event.count < nframes){
          console.log(event.count);
          Groups[event.count].visible = true;
          if(event.count > 0){
            Groups[event.count-1].visible = false; // to free some memory
          }
        }
      }
    </script>

    <canvas id="quad" resize></canvas>
  </body>
</html>

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

Ответы [ 2 ]

2 голосов
/ 17 января 2020

Если вы стремитесь к производительности, в этом случае вам следует избавиться от бумаги. js, которая добавляет накладные расходы к части рендеринга.
В качестве замены вы можете напрямую работать с Canvas. API для рендеринга вашего чертежа.
Вот краткий пример, основанный на вашем коде, показывающий, как вы можете его использовать. 

<html>
<head>
    <style>
        canvas {
            width  : 400px;
            height : 400px;
        }
    </style>
</head>
<body>
<canvas></canvas>

<script>
    function subm_index(M, x) {
        if (x < 0) {
            return x + M;
        }
        if (x >= M) {
            return x - M;
        }
        return x;
    }

    function update_concentrations(X, L, DA, DB, f, k) {
        var sum_a, sum_b, x1, y1, t;
        var m = X.A.length;
        var n = X.A[0].length;
        var A = new Array(m);
        var B = new Array(m);
        for (var i = 0; i < m; i++) {
            A[i] = new Array(n);
            B[i] = new Array(n);
        }
        for (var x = 0; x < m; x++) {
            for (var y = 0; y < n; y++) {
                sum_a = 0.0;
                sum_b = 0.0;
                for (var i = -1; i <= 1; i++) {
                    for (var j = -1; j <= 1; j++) {
                        x1 = subm_index(m, x - i);
                        y1 = subm_index(n, y - j);
                        sum_a = sum_a + L[i + 1][j + 1] * X.A[x1][y1];
                        sum_b = sum_b + L[i + 1][j + 1] * X.B[x1][y1];
                    }
                }
                t = X.A[x][y] * X.B[x][y] * X.B[x][y];
                A[x][y] = X.A[x][y] + DA * sum_a - t + f * (1 - X.A[x][y]);
                B[x][y] = X.B[x][y] + DB * sum_b + t - (k + f) * X.B[x][y];
            }
        }
        return { A: A, B: B };
    }

    function iterate_Gray_Scott(X, L, DA, DB, f, k, n) {
        for (var i = 0; i < n; i++) {
            X = update_concentrations(X, L, DA, DB, f, k);
        }
        return X;
    }

    var L = [[0.05, 0.2, 0.05], [0.2, -1, 0.2], [0.05, 0.2, 0.05]];
    var DA = 1;
    var DB = 0.5;
    var f = 0.0545;
    var k = 0.062;


    var pixels = 200;
    var gridSize = 2;
    var rectSize = 2;
    var A = new Array(pixels);
    var B = new Array(pixels);
    var Paths = new Array(pixels);
    for (var i = 0; i < pixels; i++) {
        A[i] = new Array(pixels);
        B[i] = new Array(pixels);
        Paths[i] = new Array(pixels);
        for (var j = 0; j < pixels; j++) {
            A[i][j] = 1;
            B[i][j] = Math.random() < 0.99 ? 0 : 1;
        }
    }
    var X = { A: A, B: B };

    var nframes = 50;

    var XX = new Array(nframes);
    XX[0] = X;
    for (var frm = 1; frm < nframes; frm++) {
        XX[frm] = iterate_Gray_Scott(XX[frm - 1], L, DA, DB, f, k, frm);
    }



    //
    // New code
    //

    // Get a reference to the canvas element. 
    const canvas = document.querySelector('canvas');
    // Make sure that canvas internal size fits its display size. 
    canvas.width = 400;
    canvas.height = 400;
    // Get canvas context to be able to draw directly on it. 
    const ctx = canvas.getContext('2d');

    // Counter used to swicth between frames.
    let currentFrame = 0;

    // Launch the animation.
    animate();

    function animate() {
        // Draw current frame.
        draw();

        // Update frame counter (make it loop after last frame).
        currentFrame = currentFrame < nframes - 1 ? currentFrame + 1 : 0;

        // Do a recursive call to render next frame.
        requestAnimationFrame(animate);
    }

    function draw() {
        // For each pixel...
        for (var y = 0; y < pixels; y++) {
            for (var x = 0; x < pixels; x++) {
                // ...get the color...
                const hue = Math.round(XX[currentFrame].B[x][y] * 360);
                const color = `hsl(${hue}, 100%, 50%)`;
                // ...use it as canvas fill color...
                ctx.fillStyle = color;
                // ...and draw a scaled rectangle.
                ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize);
            }
        }
    }
</script>

</body>
</html>

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

2 голосов
/ 11 января 2020

Синтаксически, я думаю, что здесь есть небольшая проблема: 

Groups[frm].definition.definition.children[k].fillColor
|           |          |          |           ^ changing fill color of Rect
|           |          |          ^ accessing children of group
|           |          ^ should be item*
|           ^ SymbolDefinition
^ array of placed symbols

* [SymbolDefinition.item] http://paperjs.org/reference/symboldefinition/

Но я бы не стал тратить Много времени пытаясь заставить символы отображаться так или иначе.

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

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

Бумага. js, кажется, не дает очевидного способа реализовать это, но вы, вероятно, могли бы использовать 2 слоя для достижения sh этого , Поскольку только один слой будет «активным» одновременно, вы можете нарисовать свои прямоугольники на одном, кэшировать его как растровое изображение, а затем активировать. Затем нарисуйте следующий набор прямоугольников на 2-м слое, кэшируйте его как растровое изображение и активируйте. Переключение назад и вперед может дать вам необходимое повышение производительности.

В качестве альтернативы есть вещь под названием PaperScope , которую вы можете использовать для той же техники. PaperScope использует второй элемент canvas. Вам нужно будет вручную активировать их при переключении так же, как слои.

...