The HSV color scheme: Difference between revisions

From JSXGraph Wiki
No edit summary
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,gradient:'radial'});
           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',gradient:'linear'
                 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>

External links