Last active
August 29, 2015 14:08
-
-
Save webdesserts/3966ff8c2d191e1e54d2 to your computer and use it in GitHub Desktop.
Alchemist API
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/**========================================* | |
* Alchemist.js - Exploring a possible API * | |
*=========================================*/ | |
/**=============* | |
* Conversions * | |
*=============**/ | |
var colors = new Alchemist() | |
colors.rgb(255, 255, 255).hsl() //=> [0, 0, 100] | |
/**==============* | |
* Manipulations * | |
*==============**/ | |
// this would... | |
// 1. convert the color to Lab | |
// 2. increment the Lightness by 10 | |
// 3. convert the color to Luv and output it's values | |
var color = color.rgb(80, 98, 88) | |
color.lighten(10).Luv() // => [50, -9.72, 5.46] | |
// TODO: in a perfect world, if `lighten` had a modifier for Luv or any of the color spaces along | |
// the conversion path, then we would convert straight to Luv and make the modifications along the way. | |
// I'll have to look into whether there's a way to curry the lighten function until an output is required. | |
/**====================* | |
* Mapping Conversions * | |
*====================**/ | |
// TODO: some of this might change now that we are setting the `use` command on the | |
// instance rather than the Class | |
// By default Alchemist will map all possible conversions on init. | |
var colors = new Alchemist() | |
// If you value memory over performance you can disable this and it will | |
// traverse the conversion graph on every call to the api. | |
var colors = new Alchemist({map: false}) | |
// You can also tell Alchemist to lazily generate the map as needed. | |
var colors = new Alchemist({map: 'lazy'}) | |
//·If you would like to provide your own custom map or would just like to | |
// prerender the map and store it yourself you can pass in a map on init. | |
var colors = new Alchemist({map: { /* my map */ }}) | |
// If you would like to finish generating the map after initial object creation | |
// you can call the mapAll() function | |
var colors = new Alchemist({map: 'lazy'}) | |
colors.mapAll() | |
// You can retreive the current state of the map at anytime | |
colors.map //=> { current map... } | |
/**===================* | |
* Color Space Plugin * | |
*===================**/ | |
// names are case insensitive | |
var HuSV = { | |
name: 'HuSV', | |
conversions: { | |
'lab': { | |
to: function(h, s, v) { | |
// ... | |
}, | |
from: function(L, a, b) { | |
// ... | |
} | |
// you can define multiples if you like | |
} | |
} | |
} | |
colors.use(HuSV) | |
/**================* | |
* Modifier Plugin * | |
*================**/ | |
//TODO: need to modify the API to better support passing of arguments | |
var compliment = { | |
name: 'compliment', | |
modifies: { | |
'hsl': function(h, s, l, args) { | |
h += 180 | |
if (h >= 360) h -= 360 | |
return [h, s, l] | |
}, | |
'hsv': function(h, s, v, args) { | |
//... | |
} | |
} | |
} | |
colors.use(compliment) | |
colors.hsl(130, 30, 80).compliment().hsl() //=> [310, 30 80] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/**===========* | |
* Map Object * | |
*===========**/ | |
// TODO Why not put these on the color space objects themselves? Do we really | |
// need a seperate map object? | |
var map = { | |
'hsl': { | |
'hsv': 'rgb', | |
'cmyk': 'rgb' | |
}, | |
'rgb': { | |
'cmyk': 'cmy' | |
}, | |
'cmy': { | |
'cmyk': null | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment