
Show HN: Trianglify – low poly style background generator with D3.js  - qrohlf
http://qrohlf.com/trianglify/
======
msvan
Good job! Here's a similar one, but animated:
[http://wagerfield.github.io/flat-surface-
shader/](http://wagerfield.github.io/flat-surface-shader/). It was on HN a few
months ago.

------
rhythmvs
Something similar is used by
[https://peerlibrary.org/](https://peerlibrary.org/) on their homepage’s
background, except that over there the pattern is dynamically being animated —
to great effect.

~~~
qrohlf
That's super slick - but it pretty much makes the site unusable on my phone
with all the rendering that's constantly being done on the UI thread.

------
nixterrimus
This is neat!

I built a little web app to play around with different options:
[http://nixterrimus.github.io/Triangle-Play-
App/](http://nixterrimus.github.io/Triangle-Play-App/)

~~~
qrohlf
That's awesome!

One issue though: I had to switch to Chrome to get it to work - in Safari I
just get a bunch of SecurityErrors...

~~~
nixterrimus
There's now a new build with support for safari. It doesn't have the ability
to download the images (in other browsers you can just drag them off the save
or right click save) but other than that it works.

[http://nixterrimus.github.io/Triangle-Play-
App/](http://nixterrimus.github.io/Triangle-Play-App/)

~~~
qrohlf
Sweet! Just added it to the readme.

------
4gn3s
Have you thought of making a wallpaper generator of it? It would be awesome to
download the output as .png with different screen resolutions

~~~
qrohlf
PNG/JPG output is definitely on my wish list, since I'm going to be using this
thing to generate header images for my blog posts and the whole "save as SVG >
open in Illustrator > save as jpg" thing is going to get old really fast.

I haven't done much with the HTML5 canvas API yet though, and that seems like
its what I'm going to have to use to rasterize the generated SVGs in the
browser. Canvg[1] looks interesting, but I kind of doubt that it's going to
support the noise filter (even imagemagick chokes on that one).

[1] [https://code.google.com/p/canvg/](https://code.google.com/p/canvg/)

------
backwardm
Nicely done! The noise option really makes for a great looking pattern.

------
cookrn
Gorgeous! I've been using
[http://cl.ly/image/0S0X0V3F2H2K](http://cl.ly/image/0S0X0V3F2H2K) for the
last few years and looking for similar, nicely colored images to swap into a
rotation. I had two fun thoughts w/r/t your code:

* How would you feel about using [https://kuler.adobe.com/](https://kuler.adobe.com/) for color palettes?

* Would it be possible to make the patterns repeatable or tile-able?

~~~
qrohlf
You can use any color palette you want! The whole thing is packaged up as a
drop-in javascript library.

Check out the x_gradient and y_gradient config options:
[https://github.com/qrohlf/trianglify#options](https://github.com/qrohlf/trianglify#options)

As for tiling, it's definitely possible but it wouldn't look very good with
the gradient palettes - you'd have to use a randomized palette for the tiling
to look natural. I'm probably not going to make those changes, but feel free
to send a pull request!

------
samstave
Love it -- I would request two sliders: triangle size/density slider and color
brightness... (I'd like darker screens rather than bright pastels)

~~~
qrohlf
You should check out
[https://github.com/qrohlf/trianglify](https://github.com/qrohlf/trianglify)
\- the options that you'd be interested in are cellsize, x_gradient, and
y_gradient.

------
qrohlf
Github link:
[https://github.com/qrohlf/trianglify](https://github.com/qrohlf/trianglify)

------
zaucetech
This is sweet, maybe you could benefit from some of the code I wrote a little
while earlier for something super similar:
[http://polygonz.zaucetech.com/](http://polygonz.zaucetech.com/)

------
quackerhacker
Reminds of a kaleidoscope. Since you've based the package on Javascript, it
wouldn't be too difficult/time-consuming to add some css3 animation to make it
transform as such.

Props on making the Trianglify object so clean.

------
balls187
I get an SSL error when clicking on your site link.

[https://qrohlf.com/](https://qrohlf.com/)

~~~
qrohlf
My bad - forgot github pages doesn't do SSL on custom domains. Fixed!

~~~
ZirconCode
I still get the same error mentioned above.

~~~
qrohlf
Do you have some kind of "always https" extension installed in your browser?
[http://qrohlf.com](http://qrohlf.com) should load just fine, https will not.

------
robbles
Quick one-liner for converting and resizing these to your screen resolution
(with ImageMagick):

    
    
        $ mogrify -path converted -format png -resize 1440x900\! originals/*.svg

