Grained.org - Online grained gradient image generator | Hacker News Reader

Grained.org - Online grained gradient image generator

grained.org

72 pointsronreiter31 comments

The design of the site is quite good, but the mouse events on the canvas to control the shape of the gradient don't seem to work at all under Opera (it's fine under Chrome).

As a suggestion, gradients with more than 2 colors (a Photoshop style adding intermediate colors on a line or something similar) would be a useful feature to add.

Thanks for the heads up. I'll fix it. The color stop feature is actually pretty easy to add, it's only a question of where to put the color selector now...

Maybe you could do it like this guys: (http://gradients.glrzad.com/) (you click the plus button to add a new color)

Awesome, looks good and usable. Will do.

Mm, it seems to require high noise levels to not look visibly stripey. Is it actually dithering the colors, or just overlaying noise on top of it?

It uses the canvas gradient to create it, and then atop of that it dithers the colors using pixel manipulation. AFAIK there are no dithering techniques in the gradient creation itself, only the grain I add manually after creating the gradient.

And it's just noise I'm adding, I don't dither the colors.

Feedback: I'd like to be able to alter the RGB values by entering into the input field, rather than 'press and guess' on the colour picker.

Yea, that was a bug. Fixed now.

Haha! This is the sort of stuff we should see more often on HN. I'd just like to say that I love the tagline -- "because CSS gradients are just not there yet". Just imagine the poor sods who wrote the gradient renderer in the popular browsers. To me, the gradients generated by the site do look really good, and if these are beyond CSS3, then CSS3 should be expanded.

Cool, but why is there no setting to change the length/radius of the gradient? The "radius" slider only changes the contrast (but curiously only in radial mode), not the size.

Bug report: The color up/down thingies become stuck so that any mouse movement will change the value. (Chrome 15 on Lion.)

Working beautifully on Windows Chrome 14.0.835.163 Very nicely done!

Ron. Pretty awesome. Just playing with it on Chrome and am pleased with the effects. Adding more than one gradient would be a useful feature as others have noted. Keep up the good work

Thanks man

On a positive note, no issues on OSX 10.6.7 with FF 6.0.2 :)

Crashed Safari (complete sudden browser disappearance, followed by crash dialog message) on fully updated OS X Lion.

Crash WebKit r96455 when clicking 'Get Image'

Yea, it's very CPU intensive. I'll rewrite the grain algorithm so it'll be faster.

Reminds me a bit of the Javascript "text color gradient" generators of the 90's. But much cooler. Nice toy :)

Uncaught TypeError: Object [object HTMLCanvasElement] has no method 'relMouseCoords'

on chrome 14 OSX 10.6

Hey riffraff, could you please email me at ron.reiter@gmail.com with the log? Thanks.

I will, but mind you there isn't much in the console

Your height truncates, it does not actually alter the distance of the gradient (chrome canary, osx)

You'll have to recreate the gradient once you resize.

Fixed a few issues, now works on Opera as well.

locks up my chrome 14.0.835.186 on arch

Also: unusably slow on Chrome 13 for OSX lion.

Serious question: Why are you still using Chrome 13? Did you prevent it from updating on purpose?

Yep, I don't allow the google background processes which run the updater.

Made some optimizations, should be better now.

Works fine for me on chrome 14.0.835.186 on OS X 10.7

Reply on news.ycombinator.com