Show HN: Trianglify – low poly style background generator with D3.js(qrohlf.com)
qrohlf.com
Show HN: Trianglify – low poly style background generator with D3.js
http://qrohlf.com/trianglify/
13 comments
Cool app.
I noticed this: Not only does noise slow down rendering, it also increases file size for the downloaded image.
I noticed this: Not only does noise slow down rendering, it also increases file size for the downloaded image.
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...
One issue though: I had to switch to Chrome to get it to work - in Safari I just get a bunch of SecurityErrors...
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/
Sweet! Just added it to the readme.
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...
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.
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
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.
Props on making the Trianglify object so clean.
Quick one-liner for converting and resizing these to your screen resolution (with ImageMagick):
$ mogrify -path converted -format png -resize 1440x900\! originals/*.svgLove 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
Nicely done! The noise option really makes for a great looking pattern.
Github link: https://github.com/qrohlf/trianglify
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/
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!
[deleted](1)
I get an SSL error when clicking on your site link.
https://qrohlf.com/
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.
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?
* 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!
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!
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.
I built a little web app to play around with different options: http://nixterrimus.github.io/Triangle-Play-App/