Been cranking through the revisions of PaintbrushJS over the last week or two. This is the new demo page I built to separate out the filters and apply only one at a time to speed things up, plus I wrote about 300 lines of script to allow for manual adjustment via range inputs. (May as well go full in on HTML5 and CSS3 on this one, given that it's a canvas project)
One thing I wanted to point out was the hovers on the thumbnails. Go check the site in a WebKit browser and click around on those. That's my best argument for how CSS3 transitions should be used. With subtlety, restraint, and quick timing functions.
over 3 years ago
0.2s for the prowess.
Wonderful job, sir.
And another thing, yer a madman and a genius. Wonderful stuff.
This is fantastic!
That is amazing. Good work :)
Everything about this is fantastic. PaintbrushJS is unbelievable, and I'm slack-jawed watching it do its thing. It's almost like magic.
One thing about the demo page itself is the sliders seem a little unresponsive, probably because it takes a lot of computing power to create awesome out of thin air like that.
I'm completely ignorant about how you're already doing things (save for a cursory grep), but it seems that background processing via web workers might be really useful for something like PaintbrushJS.
And once more for the record: Paintbrush is totally, totally awesome. Thanks!
Dave, this is really innovative. I'm really psyched about coming up with neat ways to integrate it into my site redesign.
Looks awesome. Great presentation, functionality getting there.
Nice! Someone stop me from thinking of all possibilities this can offer!
** edit **
what's killing me, is the simplicity of usage :)
** edit 2 **
maybe it's just me , but the demos in the archive don't seem to be working..
Beautiful and awesome. :-)
Re: the playground JS itself: if I get around to it, I'm gonna try and make the event handler for updating filter settings work based on mouseup instead of onchange, or use a delay at least, so that it doesn’t bog down when you drag the slider or click a couple of times in short succession.
(of course, anyone else who feels like spending a bit of time doing JS optimization should feel free to beat me to it)
@J. R. Pattern @Faruk -- the sliders are probably a bit on the deceptive side, since the filters require so much CPU/GPU power. (It's not clear to me which browsers currently handle canvas' pixel manipulation on the GPU). If there were a better input control I'd use it. I do like Faruk's idea of making the change on mouseup instead, and J. R.'s suggestion of moving processing to web workers is already something that's on my to-do list.
@Ahmed -- which demos in the archive? URL, perhaps?
Oh yes, sorry... I downloaded this archive & tried the demos inside... but doesn't work
This is just wonderful.
@Ahmed - that tells me you're running Firefox or Chrome. Second to last known issue explains it: http://wiki.github.com/mezzoblue/PaintbrushJS/known-issues
my bad, I didn't check the known issues
Now I get it! thanks :)
This is insane, Dave. Totally have plans to use it.
And your remarks about the hovers/CSS3 transitions? Couldn't agree more.
Excellent work! I am excited to see how these ideas are integrated with content management systems for dynamic effects on user uploaded content.
Just as a follow-up, I fixed some of the slowdown last night. Should be pretty darn quick. Still buggy in Firefox though, and don't bother checking on mobile devices.
WOW this is awesome. I will also find a good way to use this plugin :)
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter