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

by qrohlf • 12 years ago

170 29 12 years ago

samstave• 12 years ago

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

qrohlf9• 12 years ago

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

zaucetech3• 12 years ago

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

backwardm• 12 years ago

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

qrohlf9• 12 years ago

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

4gn3s• 12 years ago

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

qrohlf9• 12 years ago

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/

zaucetech3• 12 years ago

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

balls187• 12 years ago

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

https://qrohlf.com/

olegkikin• 12 years ago

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.

qrohlf9• 12 years ago

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

ZirconCode• 12 years ago

I still get the same error mentioned above.

cookrn• 12 years ago

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?

qrohlf9• 12 years ago

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!

msvan• 12 years ago

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

rhythmvs• 12 years 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.

qrohlf9• 12 years ago

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.

nixterrimus4• 12 years ago

This is neat!

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

qrohlf9• 12 years ago

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

nixterrimus4• 12 years ago

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.

lingben• 12 years ago

works great in firefox also

nixterrimus4• 12 years ago

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

nixterrimus4• 12 years ago

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/

PeterSmit• 12 years ago

Cool app.

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

robbles• 12 years ago

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

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

zaucetech3• 12 years ago

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/

quackerhacker• 12 years ago

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.

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

Related Stories