9

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>

1
  • 2
    Can you make a working demo in codepen or somewhere? With the necessary libraries included etc.
    – Roope
    Jan 4, 2016 at 19:27

3 Answers 3

1
+100

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>

1
  • Thanks for your post I will get a chance to look it over tomorrow
    – user4563161
    Jan 5, 2016 at 21:39
1

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

1
  • Thanks for your post I will get a chance to look it over tomorrow
    – user4563161
    Jan 5, 2016 at 21:39
1

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?

2
  • Thanks for your post I will get a chance to look it over tomorrow
    – user4563161
    Jan 5, 2016 at 21:39
  • yeah, sure, let me know if anything else is unclear. Jan 5, 2016 at 22:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.