The HSV color scheme: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
Line 5: | Line 5: | ||
Here, you can experiment with these values. | Here, you can experiment with these values. | ||
<jsxgraph width=600 height=500> | <jsxgraph width=600 height=500> | ||
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-4,4,4,-4]}); | var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-4,4,4,-4], keepAspectRatio:true}); | ||
var H = brd.createElement('slider',[[-3,3.5],[2,3.5],[0,1,360]], {name:'H',fillColor:'black',strokeColor:'black'}); | var H = brd.createElement('slider',[[-3,3.5],[2,3.5],[0,1,360]], {name:'H',fillColor:'black',strokeColor:'black'}); | ||
var S = brd.createElement('slider',[[-3,3],[2,3],[0,1,1]], {name:'S',fillColor:'black',strokeColor:'black'}); | var S = brd.createElement('slider',[[-3,3],[2,3],[0,1,1]], {name:'S',fillColor:'black',strokeColor:'black'}); | ||
Line 20: | Line 20: | ||
{fillcolor:function(){ return JXG.hsv2rgb(H.Value(),S.Value(),V.Value()); }, | {fillcolor:function(){ return JXG.hsv2rgb(H.Value(),S.Value(),V.Value()); }, | ||
highlightFillcolor:function(){ return JXG.hsv2rgb(H.Value(),S.Value(),V.Value()); }, | highlightFillcolor:function(){ return JXG.hsv2rgb(H.Value(),S.Value(),V.Value()); }, | ||
strokeColor:'black',strokeWidth:3 | strokeColor:'black',strokeWidth:3}); | ||
var p = brd.createElement('point',[0,-0.5],{visible:false}); | var p = brd.createElement('point',[0,-0.5],{visible:false}); | ||
Line 27: | Line 27: | ||
highlightFillcolor:function(){ return JXG.hsv2rgb(180+H.Value(),S.Value(),V.Value()); }, | highlightFillcolor:function(){ return JXG.hsv2rgb(180+H.Value(),S.Value(),V.Value()); }, | ||
strokewidth:3, | strokewidth:3, | ||
strokeColor:'black | strokeColor:'black' | ||
}); | }); | ||
</jsxgraph> | </jsxgraph> |
Revision as of 16:05, 24 September 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>