Skip to content

Instantly share code, notes, and snippets.

@mezzoblue
Created August 16, 2010 17:09
Show Gist options
  • Save mezzoblue/527303 to your computer and use it in GitHub Desktop.
Save mezzoblue/527303 to your computer and use it in GitHub Desktop.
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?
@mezzoblue
Copy link
Author

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!

Copy link

ghost commented Aug 17, 2010

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

@mezzoblue
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment