ser commented 8 years ago

Hi, is it possible to make trianglify generated image as a div's background? If yes, how? Code similar to:

<div class="fullscreen background" style="background-image:url('http://www.minimit.com/images/picjumbo.com_IMG_6648.jpg');" data-img-width="1600" data-img-height="1064">

brocococonut commented 8 years ago

I'd suggest you actually just output the generated image as a PNG data url and set that as the diva background via a CSS update. I can comment my code that I use for this if you'd like.

ser commented 8 years ago

If you could provide some code, I would be really grateful, and I think not only me :) Thanks!

brocococonut commented 8 years ago

This shows how to add the trianglify generated image as a base64 png as a background image to anything with the class of background. You can of course edit the insert rule to use identifiers instead of classes if you'd like to be more specific. Adding this inside of a document load function will make it run on load.

The div declaration

<div class="fullscreen background"></div>

<script>

The Trianglify pattern

var pattern = Trianglify({
  width: 1600,
  height: 1064,
  cell_size: 300 + Math.random() * 1000,
  x_colors: ['#111', '#111', '#000'],
  y_colors: ['#111', '#333', '#222'],
  stroke_width: 3
}).png();
var pattern64 = pattern.substr(pattern.indexOf('base64') + 7);

Declaring sheet to be the nonexisting stylesheet

var sheet = (function() {
  var style = document.createElement("style");

  style.appendChild(document.createTextNode(""));

  document.head.appendChild(style);

  return style.sheet;
})();

The final insert rule declaring what to add to the stylesheet

sheet.insertRule(".background { background: transparent url(data:image/png;base64,"+pattern64+"); }", 0.5);
}
</script>

Full example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.4.0/trianglify.min.js"></script>
  </head>
  <body onload="divtest();">
    <div class="fullscreen background" style="width: 1600px; height:1064px;"></div>

    <script>
        function divtest(){
            var pattern = Trianglify({
            width: 1600,
            height: 1064,
            cell_size: 300 + Math.random() * 1000,
            x_colors: ['#111', '#111', '#000'],
            y_colors: ['#111', '#333', '#222'],
            stroke_width: 3
          }).png();
            var pattern64 = pattern.substr(pattern.indexOf('base64') + 7);

        var sheet = (function() {
            var style = document.createElement("style");

            style.appendChild(document.createTextNode(""));

            document.head.appendChild(style);

            return style.sheet;
        })();
        sheet.insertRule(".background { background: transparent url(data:image/png;base64,"+pattern64+"); }", 0.5);
        }
        </script>
  </body>
</html>

qrohlf commented 8 years ago

closing as solved unless @ser says otherwise

ser commented 8 years ago

I'm really sorry that I forgot to say thank you! It works fantastically.

brocococonut commented 8 years ago

Of course :) I'm glad I could help. Thanks to qrohlf for the amazing library.

qrohlf / trianglify

trianglify generated image as a div's background? #58

Full example: