Feedback on PaintbrushJS

I'm working on a client-side image processing library, prospectively named PaintbrushJS. 
I plan to develop in the open on GitHub, there are just a few loose ends to clean up 
before I push the initial source. This is the biggie, since I don't want to change it 
after I make a decision.

It would be helpful to read my description and subsequent comments on here to get the 
gist of the problem:

http://dribbble.com/shots/45454-Canvas-Effects

My question is the best way to pass filter arguments to the script, assuming I want to 
do that at the markup level. Currently I have an init script that defines things like 
noise amount and colour tint RGB value, but ideally I'd like to do it in markup, as 
attributes of the elements I'm manipulating. I think my options basically come down to 
classes and data- attributes.

An example. The noise filter requires two additional parameters, a string to specify 
mono/colour, and an integer between 0 and 100 to control amount. Both ways could work:

<img src="lighthouse.jpg" class="filter-noise noise-mono noise-amount-50">

<img src="lighthouse.jpg" class="filter-noise" data-noise-type="mono" data-noise-amount="50">

Though more verbose, it feels like the second is the "right" way, and will be easier 
to parse. Am I correct in this thinking? Am I overlooking anything? Is there a third, 
better way I'm not aware of?

@DavidOrchard @davemo - both of those suggestions look like they might be a really elegant way of doing it. Problem is parsing, not entirely sure if I've got the chops to make it happen. Maybe that's a post-release nice to have.

@devongovett - yep, I'm thinking of that too. There's a bigger problem where the initial filter is destructive, so the first step would be saving a copy in memory, then I could worry about changing after load. But animation / post-load changes are on my radar.

Another argument for the first method is that many image algorithms, for example sharpening, depend on the display resolution of the final device. A real world example of that would be changing the parameters for a sharpening algorithm when the iPhone 4's retina display is detected (which can you do via Javascript). So you would simply vary parameters in the JS initialization code for your library but keep the class in the markup the same.

Data attributes. We're using the same approach for mobile widgets. The namespacing makes it verbose, but it feels right.

Related articles:
http://ejohn.org/blog/html-5-data-attributes/
http://unspace.ca/discover/attributes/

You could also use something like data-pb-noise='{"type": "mono", "amount": 50}' and run it through a JSON-parser, that'll enable you to still have all the data at markup level, while keeping it rather small (compared to other examples).

Running it through a JSON parser will also allow you to get typed values, which never is a bad thing. :-)

There's a third way (but not necessarily better in any way): use URL parameters in the src attribute and parse them. The most obvious downside (or perhaps upside in some cases) is they get sent to the server. Just throwing it out there.

-1 on the classes. With CSS3 selectors, any benefit you might expect to get from them no longer applies...

I first thought of data-* too, but this could get very repetitive... and it's presentation information.

Why not supply two ways to use this... data-* attributes AND a json file somewhere in the global scope. Something similar to behavior.js, like so:

var paintbrushfx = [
{ which: 'img.fx-bw', what: 'noise', args: { mono: true, ammount: 50 } },
{ which: '#list img', what: 'blackandwhite' },
{ which: '#list img:hover', what: 'normal' }
];

Extra points if you manage to support :hover and other basic interactions... but see? It would have to be a way to go back to normal (ie, original).

Data Attributes are the right way to go, or pure JavaScript.

+1 for data attributes or something similar to jQuerys $.data();

Dave, I've been going over this in my head...

I believe a simple parser could be written (I've made an attempt in firebug and worked) to achieve that JSON object from a css-like file:

img.fx {
noise: amount=50, mono;
black-and-white;
};

into:

[
{ which: 'img.fx', fx: [ { what: 'noise', args: { mono: true, amount: 50 } }, { what: 'black-and-white' } ]
]

This would make it super-simple for webdesigners to use this. Instead of making them know javascript, they would only have to pick up a syntax similar to css...

Best of both worlds I think. I'm writing it as data- attributes that create a JSON config object, and it's working swimmingly. Swapping out for a literal JSON file later will be cake.

Thanks all for the help!

Awesome, Dave. Writing a parser from the example I gave to your json object will also be possible. Even if not in the vanilla package, I can write it for myself.

Looking forward to seeing this in action! :-D

(ps: think of sprites... it might be helpful.)

Oh yeah, should probably mention here that the library is now public: http://github.com/mezzoblue/PaintbrushJS