Difference between revisions of "The HSV color scheme"

From JSXGraph Wiki
Jump to navigationJump to search
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,0.8,1]], {name:'S'});
+
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,0.7,1]], {name:'V'});
+
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>