Show HN: Trianglify – low poly style background generator with D3.js | Hacker News Reader

Show HN: Trianglify – low poly style background generator with D3.js

qrohlf.com

170 pointsqrohlf30 comments

Good job! Here's a similar one, but animated: http://wagerfield.github.io/flat-surface-shader/. It was on HN a few months ago.

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

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.

This is neat!

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

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

Huh, I see that error too.

I guess this is a chrome only demo for now, I'll see if I can't dig into this a little later this afternoon.

works great in firefox also

Well darn it looks like this has to do with drawing svg's to a canvas in webkit: http://getcontext.net/read/chrome-securityerror-dom-exceptio...

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/

Sweet! Just added it to the readme.

Cool app.

I noticed this: Not only does noise slow down rendering, it also increases file size for the downloaded image.

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

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/

Weirdly, I had this exact same idea a little while ago and threw something together: http://polygonz.zaucetech.com/ its open source too!

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

Gorgeous! I've been using 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/ for color palettes?

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

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

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!

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

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

I guess this is a popular idea, made this one a little while aog: http://polygonz.zaucetech.com/ its pure javascript and canvas and allows any color you want

Github link: https://github.com/qrohlf/trianglify

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/

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.

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

https://qrohlf.com/

Same here

    You attempted to reach qrohlf.com, but instead you 
    actually reached a server identifying itself as 
    www.github.com. This may be caused by a misconfiguration 
    on the server or by something more serious. An attacker 
    on your network could be trying to get you to visit a 
    fake (and potentially harmful) version of qrohlf.com.

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

I still get the same error mentioned above.

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

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

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

Reply on news.ycombinator.com