Change variance on mouse movement

Question

So I'm messing around with trianglify.js.

My aim here is that when the mouse moves my trianglfied canvas' variance will change.

In theory fine but in practice it's not really taken I have tried a few different code formats but just can't actually seem to get trianglify to respect the new value.

So hopefully, someone can shed light on what I'm doing wrong.

//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>

Can you make a working demo in codepen or somewhere? With the necessary libraries included etc. — Roope, Jan 04 '16 at 19:27

pabrams · Answer 1 · 2016-01-05T22:01:50.080

Here's an example where the colours change successfully on mouse move. Should be the same thing for variance, although that seems difficult to test.

<!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>

Sources:

Trianglify readme: https://github.com/qrohlf/trianglify/blob/master/Readme.md

Trianglify getting started: http://qrohlf.com/trianglify/#gettingstarted

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

OnMouseMove event: http://www.w3schools.com/jsref/event_onmousemove.asp

Thanks for your post I will get a chance to look it over tomorrow — , Jan 05 '16 at 21:39

score 1 · Answer 2 · edited May 23 '17 at 12:04

Problem with the original solution is that the newly generated canvas in onmousemove is not displayed anywhere. You should remember the canvas from the moment when you first created it and then just pass it as an argument to pattern.canvas(...) call later:

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);
      };
    })();
}

The solution of @pabrams is also fine, just don't forget to create <canvas> element with id="mycanvas". BTW, what you are doing with the timer is basically home-made implementation of debounce (although, correct one!): What does RxJS.Observable debounce do?

Thanks for your post I will get a chance to look it over tomorrow — , Jan 05 '16 at 21:39

score 1 · Accepted Answer · answered Jan 05 '16 at 06:54

The var pattern defined inside onmousetop function has no impact on the original pattern defined in window.onload function. So, it isn't going to modify the existing canvas as you are expecting. Instead you can try removing the older canvas and append the new canvas. You may need to add all options here too to make it work as expected. (Additionally, you missed the closing brace } for window.onload function. I guess, it's only input mistake while writing the question. I edited that in your question too.)

    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;

Complete Demo:

//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>

Thanks for your post I will get a chance to look it over tomorrow — , Jan 05 '16 at 21:39

Change variance on mouse movement

3 Answers3

Complete Demo: