Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by John Weland
John Weland
42,478 Points

Trianglify.js: a little help

So I found Trianglify.js from one of the older episodes of the treehouse show. Trianglify.js is a javascript solution for building angled 'painted glass window' style imagery. You can check it out on github here https://github.com/qrohlf/trianglify .

I have tried for the last few hours to render a simple background that scales to my viewport.

my HTML:

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="assets/css/sitewide.css" />
    </head>
    <body>
        <script src="assets/js/d3.min.js"></script>
        <script src="assets/js/trianglify.js"></script>
        <script>
            var t = new Trianglify({
            noiseIntensity: 0.1,
            cellpadding: 10,
            cellsize: 100}).generate(document.body.clientWidth, document.body.clientHeight);
            document.body.setAttribute('style', 'background-image: '+t.dataUrl);
        </script>
    </body>
</html>

the 'sitewide.css' file doesn't do anything right now. The problem is its not generating proper angles. I'm hoping someone here has some experience with it and can help me out.

here is a pen of my code and what is happening with it when it renders.

http://codepen.io/johnweland/pen/veCjI