Изменить дисперсию при движении мыши

Так что я возиться с trianglify.js.

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

Теоретически это хорошо, но на практике это не совсем так. Я пробовал несколько разных форматов кода, но на самом деле не могу понять, что они трианглифицированы, чтобы уважать новое значение.

Надеюсь, кто-то может пролить свет на то, что я делаю неправильно.

//Do Traingle Canvas
window.onload = function() {
    var pattern = Trianglify({
      width: window.innerWidth,
      height: window.innerHeight,
      cell_size: 120,
      stroke_width: 1.3,
      variance: 0.75,
      seed: '9rqsn',
      x_colors: 'Blues'
    });
    var homecan = document.getElementById('home');
    homecan.appendChild(pattern.canvas());

    document.onmousemove = (function() {
      var onmousestop = function() {
          var pattern = Trianglify({
            variance: 0.05
          });
          pattern.canvas()
        },
        thread;

      return function() {
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 100);
      };
    })();
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.4.0/trianglify.min.js"></script>
<div id="home"></div>

Источник

3 ответа

Решение

var pattern определяется внутри onmousetop функция не влияет на оригинал pattern определяется в window.onload функция. Таким образом, он не собирается изменять существующий холст, как вы ожидаете. Вместо этого вы можете попробовать удалить старый холст и добавить новый холст. Возможно, вам придется добавить все параметры здесь, чтобы он работал как положено. (Кроме того, вы пропустили закрывающую скобку } за window.onload функция. Я думаю, это только ошибка ввода при написании вопроса. Я тоже это отредактировал в вашем вопросе.)

    var patternOptions = {
      width: window.innerWidth,
      height: window.innerHeight,
      cell_size: 120,
      stroke_width: 1.3,
      variance: 0.75,
      seed: '9rqsn',
      x_colors: 'Blues'
    };
    ...........
    ..........
        var onmousestop = function() {
          patternOptions.variance = 0.05;
          var pattern2 = Trianglify(patternOptions);
          homecan.innerHTML = ''; //Clear the existing canvas
          homecan.appendChild(pattern2.canvas()); //append the new canvas
        },
        thread;

Полная демонстрация: 

//Do Traingle Canvas
window.onload = function() {
    var patternOptions = {
      width: window.innerWidth,
      height: window.innerHeight,
      cell_size: 120,
      stroke_width: 1.3,
      variance: 0.75,
      seed: '9rqsn',
      x_colors: 'Blues'
    };
    var pattern = Trianglify(patternOptions);
    var homecan = document.getElementById('home');
    homecan.appendChild(pattern.canvas());

    document.onmousemove = (function() {
      var onmousestop = function() {
          patternOptions.variance = 0.05;
          var pattern2 = Trianglify(patternOptions);
          homecan.innerHTML = ''; //Clear the existing canvas
          homecan.appendChild(pattern2.canvas()); //append the new canvas
        },
        thread;

      return function() {
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 100);
      };
    })();
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.4.0/trianglify.min.js"></script>
<div id="home"></div>

Источник

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

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.4.0/trianglify.min.js"></script>
<body>
<canvas id='mycanvas' width='200' height='200' style="border:1px solid Black;"></canvas>
<script type="text/javascript">
   window.onload = function () {
       var pattern = Trianglify({
           width: window.innerWidth,
           height: window.innerHeight,
           cell_size: 120,
           stroke_width: 1.3,
           variance: 0.75,
           seed: '9rqsn',
           x_colors: 'Blues'
       });

       pattern.canvas(document.getElementById('mycanvas'));
   };
   document.onmousemove = function () {
       var pattern = Trianglify({
           variance: 0.05,
           x_colors: 'Reds'
       });
       pattern.canvas(document.getElementById('mycanvas'));
   };
</script>
</body>
</html>

Источники:

Читать трианглифы: https://github.com/qrohlf/trianglify/blob/master/Readme.md

Trianglify начало работы: http://qrohlf.com/trianglify/

Html5 canvas: http://www.w3schools.com/html/html5_canvas.asp

Событие OnMouseMove: http://www.w3schools.com/jsref/event_onmousemove.asp

Источник

Проблема с оригинальным решением состоит в том, что вновь созданный холст в onmousemove нигде не отображается. Вы должны помнить холст с момента, когда вы впервые его создали, а затем просто передать его в качестве аргумента для вызова pattern.canvas(...) позже:

window.onload = function() {
    var pattern = Trianglify({
      width: window.innerWidth,
      height: window.innerHeight,
      cell_size: 120,
      stroke_width: 1.3,
      variance: 0.75,
      seed: '9rqsn',
      x_colors: 'Blues'
    });
    var homecan = document.getElementById('home');
    var canvas = pattern.canvas();
    homecan.appendChild(canvas);

    document.onmousemove = (function() {
      var onmousestop = function() {
          var pattern = Trianglify({
            width: window.innerWidth,
            height: window.innerHeight,
            variance: 0.05
          });
          pattern.canvas(canvas);
        },
        thread;

      return function() {
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 100);
      };
    })();
}

Решение @pabrams тоже хорошо, просто не забудьте создать <canvas> элемент с id="mycanvas". Кстати, то, что вы делаете с таймером, это в основном самодельная реализация debounce (хотя и правильная!): Что делает RxJS.Observable debounce?

Источник
Другие вопросы по тегам