The HSV color scheme

From JSXGraph Wiki
Revision as of 07:52, 22 July 2010 by A WASSERMANN (talk | contribs)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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:[-4,4,4,-4], keepaspectratio:true});
var H = brd.create('slider',[[-3,3.5],[2,3.5],[0,1,360]], {name:'H',fillColor:'black',strokeColor:'black'});
var S = brd.create('slider',[[-3,3],[2,3],[0,1,1]], {name:'S',fillColor:'black',strokeColor:'black'});
var V = brd.create('slider',[[-3,2.5],[2,2.5],[0,1,1]], {name:'V',fillColor:'black',strokeColor:'black'});
        
var r1 = 2;
var r2 = 1/4.75;
var lambda = 8;

var c1 = brd.create('curve',[
          function(t){return r1*Math.sin(t)+r2*Math.sin(lambda*t);},
          function(t){return r1*Math.cos(t)+r2*Math.cos(lambda*t)-0.2;},
          0, 2*Math.PI],
          {fillcolor: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',gradientsecondcolor:'white'});

var c2 = brd.create('curve',[
          function(t){return Math.sin(t);},
          function(t){return Math.cos(t)-0.2;},
          0, 2*Math.PI],
          {fillcolor: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,
           strokeColor:'black',gradient:'linear'});
</jsxgraph>

External links