Difference between revisions of "The HSV color scheme"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
Line 3: | Line 3: | ||
* Saturation (purity): between 0 and 1 | * Saturation (purity): between 0 and 1 | ||
* Value (brightness): between 0 and 1 | * Value (brightness): between 0 and 1 | ||
+ | Here, you can experiment with these values. | ||
<jsxgraph width=600 height=500> | <jsxgraph width=600 height=500> | ||
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2,4,8,-4]}); | var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2,4,8,-4]}); | ||
var H = brd.createElement('slider',[[0,3.5],[5,3.5],[0,1,360]], {name:'H'}); | var H = brd.createElement('slider',[[0,3.5],[5,3.5],[0,1,360]], {name:'H'}); | ||
− | var S = brd.createElement('slider',[[0,3],[5,3],[0, | + | var S = brd.createElement('slider',[[0,3],[5,3],[0,1,1]], {name:'S'}); |
− | var V = brd.createElement('slider',[[0,2.5],[5,2.5],[0, | + | var V = brd.createElement('slider',[[0,2.5],[5,2.5],[0,1,1]], {name:'V'}); |
var rct = brd.createElement('curve',[[-1,-1,5,5,-1],[-2,2,2,-2,-2]], | var rct = brd.createElement('curve',[[-1,-1,5,5,-1],[-2,2,2,-2,-2]], | ||
{strokeColor:'black', | {strokeColor:'black', | ||
Line 14: | Line 15: | ||
); | ); | ||
</jsxgraph> | </jsxgraph> | ||
+ | |||
+ | ===The underlying JavaScript code=== | ||
+ | <source lang="xml"> | ||
+ | <jsxgraph width=600 height=500> | ||
+ | var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2,4,8,-4]}); | ||
+ | var H = brd.createElement('slider',[[0,3.5],[5,3.5],[0,1,360]], {name:'H'}); | ||
+ | var S = brd.createElement('slider',[[0,3],[5,3],[0,1,1]], {name:'S'}); | ||
+ | var V = brd.createElement('slider',[[0,2.5],[5,2.5],[0,1,1]], {name:'V'}); | ||
+ | var rct = brd.createElement('curve',[[-1,-1,5,5,-1],[-2,2,2,-2,-2]], | ||
+ | {strokeColor:'black', | ||
+ | fillcolor:function(){ return JXG.hsv2rgb(H.Value(),S.Value(),V.Value()); } | ||
+ | } | ||
+ | ); | ||
+ | </jsxgraph> | ||
+ | </source> | ||
+ | |||
+ | [[Category:Examples]] |
Revision as of 16:21, 11 August 2009
The HSV color scheme consists of three values:
- Hue (base color): between 0 and 360
- Saturation (purity): between 0 and 1
- Value (brightness): between 0 and 1
Here, you can experiment with these values.
The underlying JavaScript code
<jsxgraph width=600 height=500>
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2,4,8,-4]});
var H = brd.createElement('slider',[[0,3.5],[5,3.5],[0,1,360]], {name:'H'});
var S = brd.createElement('slider',[[0,3],[5,3],[0,1,1]], {name:'S'});
var V = brd.createElement('slider',[[0,2.5],[5,2.5],[0,1,1]], {name:'V'});
var rct = brd.createElement('curve',[[-1,-1,5,5,-1],[-2,2,2,-2,-2]],
{strokeColor:'black',
fillcolor:function(){ return JXG.hsv2rgb(H.Value(),S.Value(),V.Value()); }
}
);
</jsxgraph>