Grained.org - Online grained gradient image generator

http://www.grained.org

by ronreiter • 15 years ago

72 31 15 years ago

grained.org

VMG• 15 years ago

locks up my chrome 14.0.835.186 on arch

wgx3• 15 years ago

Also: unusably slow on Chrome 13 for OSX lion.

ch0wn• 15 years ago

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

ronreiter11• 15 years ago

Made some optimizations, should be better now.

joeconway• 15 years ago

Works fine for me on chrome 14.0.835.186 on OS X 10.7

IvoDankolov• 15 years ago

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.

ronreiter11• 15 years ago

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

jQueryIsAwesome• 15 years ago

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

natch• 15 years ago

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

fceccon• 15 years ago

Crash WebKit r96455 when clicking 'Get Image'

ronreiter11• 15 years ago

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

riffraff2• 15 years ago

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

on chrome 14 OSX 10.6

ronreiter11• 15 years ago

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

riffraff2• 15 years ago

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

wladimir• 15 years ago

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

mgkimsal• 15 years ago

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

lazugod• 15 years ago

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?

ronreiter11• 15 years ago

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.

ronreiter11• 15 years ago

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

51Cards• 15 years ago

Working beautifully on Windows Chrome 14.0.835.163 Very nicely done!

wgx3• 15 years ago

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.

ronreiter11• 15 years ago

Yea, that was a bug. Fixed now.

lobster_johnson• 15 years ago

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

aaronblohowiak• 15 years ago

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

ronreiter11• 15 years ago

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

pork• 15 years ago

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.

rvenugopal• 15 years ago

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

ronreiter11• 15 years ago

Thanks man

ronreiter11• 15 years ago

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

Grained.org - Online grained gradient image generator

Related Stories