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
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).
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.
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:
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!
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.
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.
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.
31 comments
[ 3.5 ms ] story [ 75.4 ms ] threadI 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://qrohlf.com/
* 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?
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!
I built a little web app to play around with different options: http://nixterrimus.github.io/Triangle-Play-App/
One issue though: I had to switch to Chrome to get it to work - in Safari I just get a bunch of SecurityErrors...
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.
http://nixterrimus.github.io/Triangle-Play-App/
I noticed this: Not only does noise slow down rendering, it also increases file size for the downloaded image.
Props on making the Trianglify object so clean.